Suporte phpBB

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

Alternar cor de fundo na listagem dos topicos

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

Página 1 de 1

Alternar cor de fundo na listagem dos topicos

Enviado: 25 Fev 2012, 19:15
por strobi
Qual a URL do seu fórum: http://forum.lolesporte.com/
Tipo de Hospedagem: Pago
Qual a versão do phpBB: phpBB 3.0.10
É um novo ou uma conversão: Instalação Limpa
Usuário de teste: Usuário: n/d Senha: n/d
Estilos instalados: xandgrey (baseado no subsilver2)
Modificações instaladas: Topic Evaluation
Qual seu nivel de experiência:: Iniciante
Quando começou o problema:
Descreva seu problema: Quero saber como faço pra intercalar as cores de fundo entre os titulos dos topicos ja que no meu fórum o fundo é todo branco.

Re: Alternar cor de fundo na listagem dos topicos

Enviado: 26 Fev 2012, 15:22
por robra
Cara... você pode ver no demo.phpbb3styles.net que TODOS estilos baseados no Subsilver2 tem o mesmo fundo para a lista dos Tópicos.
Já o Prosilver tem o fundo diferente, alternado entre eles.
Daí, adaptei as informações do Prosilver para o Subsilver2 e parece que deu certo.
1- Faça backup dos arquivos /styles/xandgrey/template/viewforum_body.html e /styles/xandgrey/theme/stylesheet.css.

2- Abra o arquivo viewforum_body.html com o programa Notepad++.
Se você não tem o Notepad++, baixe-o no link http://download.tuxfamily.org/notepadpl ... .8.bin.zip e após descompactar o arquivo, abra o executável notepad++.exe da pasta "unicode", porque esta versão lhe dá a opção de alterar o idioma do programa para o português.
- Ache as linhas entre 37ª à 64ª:

Código: Selecionar todos

		<tr>
			<td class="row1" width="25" align="center">{topicrow.TOPIC_FOLDER_IMG}</td>
			<!-- IF S_TOPIC_ICONS -->
				<td class="row1" width="25" align="center"><!-- IF topicrow.TOPIC_ICON_IMG --><img src="{T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}" width="{topicrow.TOPIC_ICON_IMG_WIDTH}" height="{topicrow.TOPIC_ICON_IMG_HEIGHT}" alt="" title="" /><!-- ENDIF --></td>
			<!-- ENDIF -->
			<td class="row1">
				<!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a><!-- ENDIF -->
				{topicrow.ATTACH_ICON_IMG} <!-- IF topicrow.S_HAS_POLL or topicrow.S_TOPIC_MOVED --><b>{topicrow.TOPIC_TYPE}</b> <!-- ENDIF --><a title="{L_POSTED}: {topicrow.FIRST_POST_TIME}" href="{topicrow.U_VIEW_TOPIC}"class="topictitle">{topicrow.TOPIC_TITLE}</a>
				<!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED -->
					<a href="{topicrow.U_MCP_QUEUE}">{UNAPPROVED_IMG}</a>&nbsp;
				<!-- ENDIF -->
				<!-- IF topicrow.S_TOPIC_REPORTED -->
					<a href="{topicrow.U_MCP_REPORT}">{REPORTED_IMG}</a>&nbsp;
				<!-- ENDIF -->
				<!-- IF topicrow.PAGINATION -->
					<p class="gensmall"> [ {GOTO_PAGE_IMG}{L_GOTO_PAGE}: {topicrow.PAGINATION} ] </p>
				<!-- ENDIF -->
			</td>
			<td class="row2" width="130" align="center"><p class="topicauthor">{topicrow.TOPIC_AUTHOR_FULL}</p></td>
			<td class="row1" width="50" align="center"><p class="topicdetails">{topicrow.REPLIES}</p></td>
			<td class="row2" width="50" align="center"><p class="topicdetails">{topicrow.VIEWS}</p></td>
			<td class="row1" width="140" align="center">
				<p class="topicdetails" style="white-space: nowrap;">{topicrow.LAST_POST_TIME}</p>
				<p class="topicdetails">{topicrow.LAST_POST_AUTHOR_FULL}
					<!-- IF not S_IS_BOT --><a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a><!-- ENDIF -->
				</p>
			</td>
		</tr>
Substitua por:

Código: Selecionar todos

<tr>[code]<tr>
			<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" width="25" align="center">{topicrow.TOPIC_FOLDER_IMG}</td>
			<!-- IF S_TOPIC_ICONS -->
				<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" width="25" align="center"><!-- IF topicrow.TOPIC_ICON_IMG --><img src="{T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}" width="{topicrow.TOPIC_ICON_IMG_WIDTH}" height="{topicrow.TOPIC_ICON_IMG_HEIGHT}" alt="" title="" /><!-- ENDIF --></td>
			<!-- ENDIF -->
			<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
				<!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a><!-- ENDIF -->
				{topicrow.ATTACH_ICON_IMG} <!-- IF topicrow.S_HAS_POLL or topicrow.S_TOPIC_MOVED --><b>{topicrow.TOPIC_TYPE}</b> <!-- ENDIF --><a title="{L_POSTED}: {topicrow.FIRST_POST_TIME}" href="{topicrow.U_VIEW_TOPIC}"class="topictitle">{topicrow.TOPIC_TITLE}</a>
				<!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED -->
					<a href="{topicrow.U_MCP_QUEUE}">{UNAPPROVED_IMG}</a>&nbsp;
				<!-- ENDIF -->
				<!-- IF topicrow.S_TOPIC_REPORTED -->
					<a href="{topicrow.U_MCP_REPORT}">{REPORTED_IMG}</a>&nbsp;
				<!-- ENDIF -->
				<!-- IF topicrow.PAGINATION -->
					<p class="gensmall"> [ {GOTO_PAGE_IMG}{L_GOTO_PAGE}: {topicrow.PAGINATION} ] </p>
				<!-- ENDIF -->
			</td>
			<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" width="130" align="center"><p class="topicauthor">{topicrow.TOPIC_AUTHOR_FULL}</p></td>
			<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" width="50" align="center"><p class="topicdetails">{topicrow.REPLIES}</p></td>
			<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" width="50" align="center"><p class="topicdetails">{topicrow.VIEWS}</p></td>
			<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" width="140" align="center">
				<p class="topicdetails" style="white-space: nowrap;">{topicrow.LAST_POST_TIME}</p>
				<p class="topicdetails">{topicrow.LAST_POST_AUTHOR_FULL}
					<!-- IF not S_IS_BOT --><a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a><!-- ENDIF -->
				</p>
			</td>
		</tr>
CONTINUA NA PROXIMA MENSAGEM PORQUE NÃO ESTAVA CONSEGUINDO COLOCAR TUDO EM UMA ÚNICA MENSAGEM

Re: Alternar cor de fundo na listagem dos topicos

Enviado: 26 Fev 2012, 22:35
por robra
- Ache as linhas entre 182ª à 209ª:

Código: Selecionar todos

			<tr>
				<td class="row1" width="25" align="center">{topicrow.TOPIC_FOLDER_IMG}</td>
				<!-- IF S_TOPIC_ICONS -->
					<td class="row1" width="25" align="center"><!-- IF topicrow.TOPIC_ICON_IMG --><img src="{T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}" width="{topicrow.TOPIC_ICON_IMG_WIDTH}" height="{topicrow.TOPIC_ICON_IMG_HEIGHT}" alt="" title="" /><!-- ENDIF --></td>
				<!-- ENDIF -->
				<td class="row1">
					<!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a><!-- ENDIF -->
					{topicrow.ATTACH_ICON_IMG} <!-- IF topicrow.S_HAS_POLL or topicrow.S_TOPIC_MOVED --><b>{topicrow.TOPIC_TYPE}</b> <!-- ENDIF --><a title="{L_POSTED}: {topicrow.FIRST_POST_TIME}" href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a>
					<!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED -->
						<a href="{topicrow.U_MCP_QUEUE}">{topicrow.UNAPPROVED_IMG}</a>&nbsp;
					<!-- ENDIF -->
					<!-- IF topicrow.S_TOPIC_REPORTED -->
						<a href="{topicrow.U_MCP_REPORT}">{REPORTED_IMG}</a>&nbsp;
					<!-- ENDIF -->
					<!-- IF topicrow.PAGINATION -->
						<p class="gensmall"> [ {GOTO_PAGE_IMG}{L_GOTO_PAGE}: {topicrow.PAGINATION} ] </p>
					<!-- ENDIF -->
				</td>
				<td class="row2" width="130" align="center"><p class="topicauthor">{topicrow.TOPIC_AUTHOR_FULL}</p></td>
				<td class="row1" width="50" align="center"><p class="topicdetails">{topicrow.REPLIES}</p></td>
				<td class="row2" width="50" align="center"><p class="topicdetails">{topicrow.VIEWS}</p></td>
				<td class="row1" width="140" align="center">
					<p class="topicdetails" style="white-space: nowrap;">{topicrow.LAST_POST_TIME}</p>
					<p class="topicdetails">{topicrow.LAST_POST_AUTHOR_FULL}
						<!-- IF not S_IS_BOT --><a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a><!-- ENDIF -->
					</p>
				</td>
			</tr>
Substitua por:

Código: Selecionar todos

			<tr>
				<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" width="25" align="center">{topicrow.TOPIC_FOLDER_IMG}</td>
				<!-- IF S_TOPIC_ICONS -->
					<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" width="25" align="center"><!-- IF topicrow.TOPIC_ICON_IMG --><img src="{T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}" width="{topicrow.TOPIC_ICON_IMG_WIDTH}" height="{topicrow.TOPIC_ICON_IMG_HEIGHT}" alt="" title="" /><!-- ENDIF --></td>
				<!-- ENDIF -->
				<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
					<!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a><!-- ENDIF -->
					{topicrow.ATTACH_ICON_IMG} <!-- IF topicrow.S_HAS_POLL or topicrow.S_TOPIC_MOVED --><b>{topicrow.TOPIC_TYPE}</b> <!-- ENDIF --><a title="{L_POSTED}: {topicrow.FIRST_POST_TIME}" href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a>
					<!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED -->
						<a href="{topicrow.U_MCP_QUEUE}">{topicrow.UNAPPROVED_IMG}</a>&nbsp;
					<!-- ENDIF -->
					<!-- IF topicrow.S_TOPIC_REPORTED -->
						<a href="{topicrow.U_MCP_REPORT}">{REPORTED_IMG}</a>&nbsp;
					<!-- ENDIF -->
					<!-- IF topicrow.PAGINATION -->
						<p class="gensmall"> [ {GOTO_PAGE_IMG}{L_GOTO_PAGE}: {topicrow.PAGINATION} ] </p>
					<!-- ENDIF -->
				</td>
				<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" width="130" align="center"><p class="topicauthor">{topicrow.TOPIC_AUTHOR_FULL}</p></td>
				<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" width="50" align="center"><p class="topicdetails">{topicrow.REPLIES}</p></td>
				<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" width="50" align="center"><p class="topicdetails">{topicrow.VIEWS}</p></td>
				<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" width="140" align="center">
					<p class="topicdetails" style="white-space: nowrap;">{topicrow.LAST_POST_TIME}</p>
					<p class="topicdetails">{topicrow.LAST_POST_AUTHOR_FULL}
						<!-- IF not S_IS_BOT --><a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a><!-- ENDIF -->
					</p>
				</td>
			</tr>
3- Abra o arquivo stylesheet.css com o programa Notepad++ e ache as linhas:

Código: Selecionar todos

.row4 {
    background-color: #FFFFFF;
    padding: 0px;
} 
Adicione após, em uma nova linha:

Código: Selecionar todos

.bg1    { background-color: #FFFFFF; }
.bg2    { background-color: #BEBEBE;  }    
Sendo #FFFFFF correspondente ao fundo branco e #BEBEBE correspondente ao fundo cinza, conforme mostra a imagem abaixo:
img000.jpg
O fundo cinza do ícone do 2º tópico parece "borrado" mas o problema é a arte do ícone correspondente ao arquivo topic_unread.gif, que foi originalmente mal feita.
Caso queira alterar as cores, procure no Google por "cores hexadecimais" e você terá vários códigos de cores.

4- Atualize a Templates e Temas do estilo Xandgrey pela aba ESTILOS do ACP, e limpe o cache do Fórum.

Abraço. Imagem

Re: Alternar cor de fundo na listagem dos topicos

Enviado: 26 Fev 2012, 23:30
por strobi
caramba :o valeu robra, eu ainda nao tentei, mas pelo visto funciona mesmo.. depois vou tentar, mto obrigado!

Re: Alternar cor de fundo na listagem dos topicos

Enviado: 27 Fev 2012, 09:46
por robra
Pode testar que vai funcionar. Vai ser o 1º estilo baseado em Subsilver2 com cores alternadas na lista dos tópicos.
Se quiser, você pode alterar a cor de cada coluna separadamente, ou seja, pode deixar de cor diferente a coluna, Tópico, Autor, Respostas, Exibições e Última Mensagens.
Digamos que você queira deixar a coluna "Autor" em azul claro.
Aí, no stylesheet.css, ache as linhas...

Código: Selecionar todos

.row4 {
    background-color: #FFFFFF;
    padding: 0px;
} 
... e adicione após, em uma nova linha:

Código: Selecionar todos

.row5 {
    background-color: #CADCEB;
    padding: 4px; 
... e no viewforum_body.html, na linha...

Código: Selecionar todos

<td class="row<!-- IF topicrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" width="130" align="center"><p class="topicauthor">{topicrow.TOPIC_AUTHOR_FULL}</p></td>
... você substitui para:

Código: Selecionar todos

<td class="row5" width="130" align="center"><p class="topicauthor">{topicrow.TOPIC_AUTHOR_FULL}</p></td>
OBS: Atenção no momento de fazer as substituições em seu viewforum_body.html porque você tem uma coluna a mais, chamada NOTA.

Abraço. Imagem
Todos os horários são UTC-03:00
Página 1 de 1

Powered by phpBB® Forum Software © phpBB Limited

Traduzido por: Suporte phpBB