Suporte phpBB

Suporte com ética e seriedade
https://www.suportephpbb.com.br/

Como posso colocar um backgoud aleatório?

https://www.suportephpbb.com.br/viewtopic.php?t=47489

Página 1 de 2

Como posso colocar um backgoud aleatório?

Enviado: 28 Ago 2012, 02:55
por junior.470
Qual a URL do seu fórum: http://www.forum.serverbrasilcoms.com
Tipo de Hospedagem: Pago
Qual a versão do phpBB: phpBB 3.0.11
É um novo ou uma conversão: Update da versão 3.0.10
Usuário de teste: Usuário: n/a Senha: n/a
Estilos instalados: prosilver se
Modificações instaladas: share topic plus, autoMOD
Qual seu nivel de experiência: Iniciante
Descreva seu problema:
pesquisando por ai eu encontrei um site que da os códigos e scripts que ele criou pra fazer isso. E o legal é que atualiza sozinho, sem a necessidade de atualizar a pagina. Porem, eu não sei onde posso inserir esse códigos
abaixo é o link do site do criador da script onde da pra ter uma previa de como fica
http://www.zatecus.com/blog-jquery-back ... -post.html

Re: Como posso colocar um backgoud aleatório?

Enviado: 28 Ago 2012, 14:32
por _Vinny_
Você quer uma imagem de fundo aleatória? Pelo notei este script é para fundo de elementos DIVs, não fundo do forum.

Re: Como posso colocar um backgoud aleatório?

Enviado: 28 Ago 2012, 16:09
por junior.470
_Vinny_ escreveu:Você quer uma imagem de fundo aleatória? Pelo notei este script é para fundo de elementos DIVs, não fundo do forum.
Então não é possível fazer o mesmo efeito desse site no meu fórum.
Lembrando que em meu fórum já tem uma imagem, mas fixa.

Re: Como posso colocar um backgoud aleatório?

Enviado: 28 Ago 2012, 16:43
por _Vinny_
Vamos ver desse jeito:
Abra: styles/seu-estilo/template/overall_header.html
Localize:

Código: Selecionar todos

</head>
Adicione antes:

Código: Selecionar todos

<style type="text/css" media="screen">
html, body {height: 100%; margin: 0;}

div.bg {position: absolute; width: 100%; height: 100%; background-position: center bottom; background-repeat: no-repeat;}

div#background1 {background-image: url(http://dl.zatecus.com/2010-10/23fzl6da.jpg);}
div#background2 {background-image: url(http://dl.zatecus.com/2010-10/b6o615z8.jpg);}
/* Para cada nova imagem adicione uma linha como essa: 
div#background3 {background-image: url(http://meusite.com/imagem.jpg);}
* Sempre da numeração para identificar cada imagem. 
*/

</style>

<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function()
	{
	/* Classe padrão dos backgrounds */
	var bgClass = "div.bg";

	/* Prefixo para IDs dos backgrounds */
	var bgPrefix = "background";

	/* Tempo para fade in-out */
	var fade = 3000;

	/* Não precisa alterar estas =P */
	var bgSize = $(bgClass).size();
	var curSize = 1;
	var timerSrc = "";

	/* Mostra apenas o primeiro bg */
	$(bgClass).hide();
	$(bgClass + ':first').show();

	/* Se houver divs com classes BG */
	if (bgSize)
	{
		/* Inicia o loop dos backgrounds */
		timerSrc = setInterval (function ()
			{
				/* Oculta um fundo e exibe outro */
				$('#' + bgPrefix + curSize).fadeOut(2000);
				curSize = (curSize >= bgSize) ? 1 : curSize + 1;
				$('#' + bgPrefix + curSize).fadeIn(1000);
			}, fade);
	}
				
	});
</script>
Aqui neste trecho, você substitui http://dl.zatecus.com/2010-10/23fzl6da.jpg e http://dl.zatecus.com/2010-10/b6o615z8.jpg com os links das suas imagens para aparecer.

Localize:

Código: Selecionar todos

<body>
Adicione depois:

Código: Selecionar todos

<div class="bg" id="background1"></div>
<div class="bg" id="background2"></div>
Se seu minha pequena explicação acima para adicionar novas imagens, sempre que adicionar uma nova lá encima, deve adicionar aqui também, exemplo:
<div class="bg" id="background3"></div> <- Essa aqui mostra a imagem de background3 definida lá encima.

Feito todas as edições, basta atualizar a templates do estilo.

Re: Como posso colocar um backgoud aleatório?

Enviado: 28 Ago 2012, 18:31
por junior.470
Localize:

Código: Selecionar todos

<body>
Adicione depois:

Código: Selecionar todos

<div class="bg" id="background1"></div>
<div class="bg" id="background2"></div>
Se seu minha pequena explicação acima para adicionar novas imagens, sempre que adicionar uma nova lá encima, deve adicionar aqui também, exemplo:
<div class="bg" id="background3"></div> <- Essa aqui mostra a imagem de background3 definida lá encima.
a primeira parte de localizar a </head> deu certo, mas nao localizei a <body>

Meu tema é o mesmo do site Prosilver Special Edition

Re: Como posso colocar um backgoud aleatório?

Enviado: 28 Ago 2012, 19:24
por robra
Poste o seu overall_header.html dentro do BBcode Code.

Abraço. Imagem

Re: Como posso colocar um backgoud aleatório?

Enviado: 28 Ago 2012, 19:51
por junior.470

Código: Selecionar todos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

<!--
	phpBB style name: 	prosilver Special Edition
	Based on style:   	prosilver (this is the default phpBB3 style)
	Original author:  	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		phpBB Styles Team     
	
	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var style_cookie_settings = '{A_COOKIE_SETTINGS}';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP and S_NEW_PM -->
		var url = '{UA_POPUP_PM}';
		window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
	<!-- ENDIF -->

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	};

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	};

// ]]>
</script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->
<style type="text/css" media="screen">
html, body {height: 100%; margin: 0;}

div.bg {position: absolute; width: 100%; height: 100%; background-position: center bottom; background-repeat: no-repeat;}

div#background1 {background-image: url(http://www.forum.serverbrasilcoms.com/styles/prosilver_se/theme/images/ADD_style/background1.jpg);}
div#background2 {background-image: url(http://www.forum.serverbrasilcoms.com/styles/prosilver_se/theme/images/ADD_style/background2.jpg);} 
div#background3 {background-image: url(http://www.forum.serverbrasilcoms.com/styles/prosilver_se/theme/images/ADD_style/background3.jpg);}
div#background4 {background-image: url(http://www.forum.serverbrasilcoms.com/styles/prosilver_se/theme/images/ADD_style/background4.jpg);}
div#background5 {background-image: url(http://www.forum.serverbrasilcoms.com/styles/prosilver_se/theme/images/ADD_style/background5.jpg);}
*/

</style>

<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function()
   {
   /* Classe padrão dos backgrounds */
   var bgClass = "div.bg";

   /* Prefixo para IDs dos backgrounds */
   var bgPrefix = "background";

   /* Tempo para fade in-out */
   var fade = 9000;

   /* Não precisa alterar estas =P */
   var bgSize = $(bgClass).size();
   var curSize = 1;
   var timerSrc = "";

   /* Mostra apenas o primeiro bg */
   $(bgClass).hide();
   $(bgClass + ':first').show();

   /* Se houver divs com classes BG */
   if (bgSize)
   {
      /* Inicia o loop dos backgrounds */
      timerSrc = setInterval (function ()
         {
            /* Oculta um fundo e exibe outro */
            $('#' + bgPrefix + curSize).fadeOut(2000);
            curSize = (curSize >= bgSize) ? 1 : curSize + 1;
            $('#' + bgPrefix + curSize).fadeIn(1000);
         }, fade);
   }
            
   });
</script>
</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div id="wrap">
    <div class="border-left">
    <div class="border-right">
    <div class="border-top">
    <div class="border-top-left">
    <div class="border-top-right">
        <div class="inside" style="direction: {S_CONTENT_DIRECTION};">
        	<a id="top" name="top" accesskey="t"></a>
        	<div id="page-header">
        		<div class="headerbar">
        			<div class="inner"><span class="corners-top"><span></span></span>
        
        			<div id="site-description">
        				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
        				<h1>{SITENAME}</h1>
        				<p>{SITE_DESCRIPTION}</p>
        				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
        			</div>
        
        		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
        			<div id="search-box">
        				<form action="{U_SEARCH}" method="get" id="search">
        				<fieldset>
        					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
        					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
        					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
        				</fieldset>
        				</form>
        			</div>
        		<!-- ENDIF -->
        
        			<span class="corners-bottom"><span></span></span></div>
        		</div>
        
        		<div class="navbar">
        			<div class="inner"><span class="corners-top"><span></span></span>
        
        			<ul class="linklist navlinks">
        				<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>
        
        				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>
        
        				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
        				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
        				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
        				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
        			</ul>
        
        			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
        			<ul class="linklist leftside">
        				<li class="icon-ucp">
							<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
								<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
							<!-- IF S_DISPLAY_SEARCH --> &bull;
							<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
							<!-- ENDIF -->
        					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
        					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
        					<!-- ENDIF -->
        				</li>
        			</ul>
        			<!-- ENDIF -->
        
        			<ul class="linklist rightside">
        				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
        				<!-- IF not S_IS_BOT -->
        					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
							<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
							<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
        				<!-- ENDIF -->
        			</ul>
        
        			<span class="corners-bottom"><span></span></span></div>
        		</div>
        
        	</div>
        
        	<a name="start_here"></a>
        	<div id="page-body">
        		
				<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
				<div id="information" class="rules">
        			<div class="inner"><span class="corners-top"><span></span></span>
        				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
        			<span class="corners-bottom"><span></span></span></div>
        		</div>
        		<!-- ENDIF -->
Ai esta
tem mais uma coisa
o plano de fundo precisa fira fixo
e atras do forum(no fundo) fiz uns testes aki pelo crome e ele funcionou mas nao fixo e sobre parte do forum

Re: Como posso colocar um backgoud aleatório?

Enviado: 28 Ago 2012, 20:21
por robra
Tente adicionando as linhas...

Código: Selecionar todos

<div class="bg" id="background1"></div>
<div class="bg" id="background2"></div>
...após a linha <body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

Abraço. Imagem

Re: Como posso colocar um backgoud aleatório?

Enviado: 28 Ago 2012, 20:24
por _Vinny_
A linha ao inves de body é:

Código: Selecionar todos

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
Faça o teste.

Re: Como posso colocar um backgoud aleatório?

Enviado: 28 Ago 2012, 20:26
por junior.470
Eu acabei de fazer o que você citou, mas olha como ficou
Imagem

mas teria que ficar assim
Imagem
Todos os horários são UTC-03:00
Página 1 de 2

Powered by phpBB® Forum Software © phpBB Limited

Traduzido por: Suporte phpBB