Como posso colocar um backgoud aleatório?

Mensagem por **junior.470** » 28 Ago 2012, 20:31

Bom pessoal,. Primeiramente, muito obrigado por tentarem me ajudar, mas com o pouco que sei me virei aqui.
Falei com o proprietário do site Zatecus se seria possivel usar esse script que ele criou em um site phpBB, e ele me respondeu que não
mas não me dei por vencido e trabalhei dia e noite aqui pra ver se daria certo.
então fiz dessa forma abaixo e deu certo:

em /styles/prosilver_se/template/overall_header.html procurei por;

Código: Selecionar todos

</head>

e adicionei antes;

Código: Selecionar todos

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

div.bg {position: fixed; 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>

Como o documento não tem <body>, procurei novamente por;

Código: Selecionar todos

</head>

E adicionei depois;

Código: Selecionar todos

<body> 
<div class="bg" id="background1"></div>
<div class="bg" id="background2"></div>
<div class="bg" id="background3"></div>
<div class="bg" id="background4"></div>
<div class="bg" id="background5"></div>	
</body>

salvei o documento e abri /styles/prosilver_se/theme/colours.css
Procurei por;

Código: Selecionar todos

html, body {
	color: #137fb6;
	background: black;	
}

E substitui por;

Código: Selecionar todos

html, body {
	color: #137fb6;
	background: transparent;
	padding-top: 0px;
	padding-bottom: 0px;
	top: 30px;
	bottom: 30px;
}

Procurei por;

Código: Selecionar todos

#wrap {
	padding: 0 20px;
	min-width: 650px;
	width: 900px;
	margin: 0 auto;
}

E subistitui por;

Código: Selecionar todos

#wrap {
	padding: 0 20px;
	min-width: 650px;
	width: 900px;
	margin: 0 auto;
	position: relative;
}

Salvei o documento e abri /styles/prosilver_se/theme/common.css
procurei por;

Código: Selecionar todos

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
}

E substitui por;

Código: Selecionar todos

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	padding: 30px 0;
	position: relative;
}

Depois limpei o cache e atualizei o tema no ACP

Pra minha Felicidade, deu certo e resolvi postar aqui pra quem quiser fazer tambem.
O resultado do trabalho vocês podem ver no link abaixo
http://www.serverbrasilcoms.com/forum

Mais uma vez obridado pessoal pela ajuda. até Mais

Suporte phpBB

Como posso colocar um backgoud aleatório?

Re: Como posso colocar um backgoud aleatório?