![[TUTORIAL] Destacar quantidade de tópicos e mensagens Buddy_Group](https://2img.net/h/cdn1.iconfinder.com/data/icons/df_On_Stage_Icon_Set/128/Buddy_Group.png){kind=icon}
Suporte Forumeiros
Início
Entrar
Cadastre-se
Mensagens
Moedas![[TUTORIAL] Destacar quantidade de tópicos e mensagens Theme](https://2img.net/i/fa/admin/icones/theme.png) | Destacar quantidade de tópicos e mensagens |
Da
mesma forma que fazemos na versão PhpBB3 em destacar a quantidade de
mensagens e tópicos, podemos realizar na versão Invision, PhpBB2 e
Punbb. Vamos editar os templates de seu fórum aplicando em uma variável
novas classes.
1º - Edição de template
Para realizar a modificação, temos que ceder a Painel de controle > Visualização > Templates > Geral > index_box
(carregue na imagem para aumentar)
![[TUTORIAL] Destacar quantidade de tópicos e mensagens Templa10](https://i.servimg.com/u/f48/15/88/72/83/templa10.png)
Vamos buscar duas variáveis com valores 'class=""' já atribuídos, ou seja, vamos encontrar uma variável chamada class="tc2" que é responsável pela personalização do da quantidade de tópicos que aparece na página principal nos fóruns.
No template Index_body, procure as seguintes varáveis:
- Código:
<td class="tc2">{catrow.forumrow.TOPICS}</td>
<td class="tc3">{catrow.forumrow.POSTS}</td>
Ao encontrar, você vai adicionar mais uma tag HTML chamada
"
", só que esta terá uma classe. Que classe é essa? Será uma
classe que vamos criar que personalizará e resultará no efeito. Para
mais informações, aconselhamos que leia o tutorial Elaborar um código CSS.
Vamos adicionar a tag "" no seu template, e entre as aspas vamos colocar a classe for_topics ou for_posts. Então o código será:
Ao aplicar, salve seu template e publique.
2º - Código CSS:
Para finalizar o efeito, temos que aplicar um código CSS.
Para as demais versões:
Em Phpbb2, você poderá modificar o template em Painel de controle ![[TUTORIAL] Destacar quantidade de tópicos e mensagens 633772](https://2img.net/u/2112/28/77/07/smiles/633772.png)
Visualização Templates Geral index_box e procurar pelo seguinte código:
E substituir por esse:
Adicione o CSS indicado acima para obter o mesmo resultado.
![[TUTORIAL] Destacar quantidade de tópicos e mensagens Logo](https://2img.net/i/bl/logo.png)
Invision
Resultado:![[TUTORIAL] Destacar quantidade de tópicos e mensagens Result28](https://i.servimg.com/u/f43/16/63/75/54/result28.png)
classe que vamos criar que personalizará e resultará no efeito. Para
mais informações, aconselhamos que leia o tutorial Elaborar um código CSS.
Vamos adicionar a tag "" no seu template, e entre as aspas vamos colocar a classe for_topics ou for_posts. Então o código será:
- Código:
<td class="tc2"><div class="for_topics">{catrow.forumrow.TOPICS}</div></td>
<td class="tc3"><div class="for_posts">{catrow.forumrow.POSTS}</div></td>
Ao aplicar, salve seu template e publique.
2º - Código CSS:
Para finalizar o efeito, temos que aplicar um código CSS.
- Código:
.for_topics {
width: 74px;
height: 33px;
background: url("http://i43.servimg.com/u/f43/14/53/79/27/fp10.png") no-repeat left top;
text-align: center;
font-size: 12px;
font-weight: bold;
line-height: normal;
color: #0e2c3e;
padding-top: 3px;
margin-left: 13px;
}
.for_topics span {
display: block;
color: #105289;
font-size: 10px;
}
.for_posts {
width: 74px;
height: 33px;
background: url("http://i43.servimg.com/u/f43/14/53/79/27/fp10.png") no-repeat left top;
text-align: center;
font-size: 12px;
font-weight: bold;
line-height: normal;
color: #0e2c3e;
padding-top: 3px;
margin-left: 13px;
}
.for_posts span {
display: block;
color: #105289;
font-size: 10px;
}
Para as demais versões:
| | phpBB2 |
Visualização Templates Geral index_box e procurar pelo seguinte código:- Código:
<td class="row3" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.TOPICS}</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.POSTS}</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>
E substituir por esse:
- Código:
<td class="row3" align="center" valign="middle" height="50">
<span class="gensmall"><div class="for_topics">{catrow.forumrow.TOPICS}</div></span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall"><div class="for_posts">{catrow.forumrow.POSTS}</div></span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>
Adicione o CSS indicado acima para obter o mesmo resultado.
| | phpBB3 |
- Código:
.lastpost {
-moz-border-radius: 7px;
-moz-box-shadow: 0 0 8px #666;
-webkit-border-radius: 7px;
-webkit-box-shadow: 0 0 8px #666;
border: 2px solid #EEE;
border-image: initial;
border-radius: 10px;
box-shadow: 0 0 7px #666;
margin: 3px;
width: auto;
}
Invision- Código:
tbody .row1 span{
-moz-border-radius: 7px;
-moz-box-shadow: 0 0 8px #666;
-webkit-border-radius: 7px;
-webkit-box-shadow: 0 0 8px #666;
border: 2px solid #EEE;
border-image: initial;
border-radius: 10px;
box-shadow: 0 0 7px #666;
padding: 3px;
height: 100px;
width: 100px;
}
Resultado:
