[TUTORIAL] 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

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 "<div>", 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 "<div class=""></div>" 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

  Em Phpbb2, você poderá modificar o template em Painel de controle 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:
  
  

---

© Fórum dos Fóruns & Shek

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Destacar quantidade de tópicos e mensagens