Contagem regressiva no portal

Suporte aos MODs/Hacks para phpBB.
Avatar do usuário
The Crow
Novato
Novato
Mensagens: 76
Registrado em: 27 Jun 2009, 11:59
Localização: Shiga-Japão
Contato:

Re: Contagem regressiva no portal

Mensagem por The Crow »

_Vinny_ não funcionou, editei o arquivo, atualizei o template e limpei o cache mas não funcionou, eu desconfio que esse alinhamento é feito em um dos dois arquivos da pasta style que vem no arquivo lwtCountdown-html.zip mas não consegui descobrir.
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Contagem regressiva no portal

Mensagem por robra »

O HTML original, onde o contador regressivo aparece centralizado na página, está abaixo...

Código: Selecionar todos

<div id="container">

		<h1>UNDER CONSTRUCTION</h1>
		<h2 class="subtitle">Stay tuned for news and updates.</h2>

		<!-- Countdown dashboard start -->
		<div id="countdown_dashboard">
			<div class="dash weeks_dash">
				<span class="dash_title">weeks</span>
				<div class="digit"><div class="top" style="display: none; ">2</div><div class="bottom" style="display: block; ">2</div></div>
				<div class="digit"><div class="top" style="display: none; ">4</div><div class="bottom" style="display: block; ">4</div></div>
			</div>

			<div class="dash days_dash">
				<span class="dash_title">days</span>
				<div class="digit"><div class="top" style="display: none; ">0</div><div class="bottom" style="display: block; ">0</div></div>
				<div class="digit"><div class="top" style="display: none; ">6</div><div class="bottom" style="display: block; ">6</div></div>
			</div>

			<div class="dash hours_dash">
				<span class="dash_title">hours</span>
				<div class="digit"><div class="top" style="display: none; ">0</div><div class="bottom" style="display: block; ">0</div></div>
				<div class="digit"><div class="top" style="display: none; ">2</div><div class="bottom" style="display: block; ">2</div></div>
			</div>

			<div class="dash minutes_dash">
				<span class="dash_title">minutes</span>
				<div class="digit"><div class="top" style="display: none; ">0</div><div class="bottom" style="display: block; ">0</div></div>
				<div class="digit"><div class="top" style="display: none; ">3</div><div class="bottom" style="display: block; ">3</div></div>
			</div>

			<div class="dash seconds_dash">
				<span class="dash_title">seconds</span>
				<div class="digit"><div class="top" style="display: none; ">5</div><div class="bottom" style="display: block; ">5</div></div>
				<div class="digit"><div class="top" style="display: block; overflow: hidden; height: 6.749678777893409px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; ">0</div><div class="bottom" style="display: block; overflow: hidden; height: 71.43641020891702px; ">1</div></div>
			</div>

		</div>
		<!-- Countdown dashboard end -->

		<div class="dev_comment">
			This is a place holder for your comments.<br>
			This page has been tested with <br>IE 6, IE 7, IE 8, FF 3, Safari 4, Opera 9, Chrome 4
		</div>

		<div class="subscribe">
			<form action="" method="POST" id="subscribe_form">
				<input type="text" name="email" id="email_field" class="faded" value="your@email.com"> <input type="submit" id="subscribe_button" value="Stay updated">
			</form>
		</div>

		<script language="javascript" type="text/javascript">
			jQuery(document).ready(function() {
				$('#countdown_dashboard').countDown({
					targetDate: {
						'day': 		18,
						'month': 	2,
						'year': 	2013,
						'hour': 	22,
						'min': 		0,
						'sec': 		0
					}
				});
				
				$('#email_field').focus(email_focus).blur(email_blur);
				$('#subscribe_form').bind('submit', function() { return false; });
			});
		</script>
	
	</div>
... e são as definições no CSS da div id="container" que definem a centralização na página, como pode ver abaixo:

Código: Selecionar todos

#container {
margin: 100px auto;
width: 700px;
color: #555;
} 
Ou você inclui div id="container", igual ao original, ou deixa as linhas conforme sua mensagem viewtopic.php?f=147&t=47486#p283120, e no arquivo CSS do contador, ache as linhas...

Código: Selecionar todos

#countdown_dashboard {
height: 110px;
}
... e substitua por:

Código: Selecionar todos

#countdown_dashboard {
height: 110px;
margin: 100px auto;
width: 700px;
}
Abraço. Imagem
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Avatar do usuário
The Crow
Novato
Novato
Mensagens: 76
Registrado em: 27 Jun 2009, 11:59
Localização: Shiga-Japão
Contato:

Re: Contagem regressiva no portal

Mensagem por The Crow »

robra, o contador centralizou essa parte ficou resolvida mas as áreas abaixo (veja a screen anterior) não voltam ao alinhamento original que seria a esquerda, os arquivos de style do site não foram alterados, não entendo porque centralizaram assim.
Avatar do usuário
robra
Membro Sênior
Membro Sênior
Mensagens: 6065
Registrado em: 02 Dez 2010, 22:29

Re: Contagem regressiva no portal

Mensagem por robra »

O problema é a linha <link rel="Stylesheet" type="text/css" href="style/main.css"></link> do countdown.html, que está inserido no overall_header.html e está dando conflito com o css do Fórum, também chamado no overall_header.html.
Como a página não está "online" aí não tenho como usar o "inspecionar elemento" do Google Chrome para analisar a página mas acho provável que seja a definição abaixo do arquivo main.css:

Código: Selecionar todos

body {
    text-align: center;
}
Exclua as linhas supracitadas do main.css, e no countdown.html, na linha
<font size="5" color="#0000FF"><strong> Texto acima do contador </strong></font><br />, onde tem <font size="5" color="#0000FF"> substitua por:
<font size="5" color="#0000FF" style="text-align: center;">

Abraço. Imagem
[DICA] Antes de abrir um Novo Tópico, procure saber se a sua dúvida já foi respondida. Pesquise no Google por palavras(em inglês também) relacionadas à ela, somado à palavra "phpbb".
Avatar do usuário
The Crow
Novato
Novato
Mensagens: 76
Registrado em: 27 Jun 2009, 11:59
Localização: Shiga-Japão
Contato:

Re: Contagem regressiva no portal

Mensagem por The Crow »

robra valeu pela força, o problema foi resolvido excluindo as linhas do arquivo main.css que você indicou, quanto a usar <font size="5" color="#0000FF" style="text-align: center;"> não funcionou, o que funciona bem no meu caso é <div align="center"><font size="5" color="#0000FF">. Eu acredito que seguindo esse tópico vai ficar fácil pra quem quiser esse contador no site, quem quiser dar uma olhada o contador já está no site online. robra e _Vinny_ agradeço imensamente pela ajuda que me deram, valeu.
Trancado