Personalização do widget "tópicos recentes"

Em
muitas plataformas pagas é possível incrementar e dar um ar
profissional aos tópicos recentes. Neste tutorial, através da edição de
templates disponível apenas para PHPBB2 e PunBB, faremos essa
personalização que dará ao vosso fórum, um incremento especial!

--> Tutoriais, dicas e astúcias <--
Personalização do widget "tópicos recentes"

1º - Modificação das opções dos módulos

Painel
de controle avançado >> Módulos >> Portal & Widgets
>> Gestão dos Widgets do fórum >> Opções gerais dos widgets
do fórum

Exibir os widgets do fórum : - Nesta opção, deverá marcar: "Sim"

Largura da coluna 1 (esquerda) e 3 (direita) : - Nestas opções, deverá preencher com o valor: "180" em ambos os boxes.

Distância entre dois widgets : - Neste box, o valor deve ser "0"

Espaço entre duas colunas : - Neste box, o valor deve ser "0"

2º - Inserir o widget e configura-lo

Painel
de controle avançado >> Módulos >> Portal & Widgets
>> Gestão dos Widgets do fórum >> Tópicos recentes



Insira
o widget em uma das colunas, como mostra a imagem acima e, em seguida,
acione a modificação do widget através do botão modificar ""

Quantidade de tópicos recentes : - Nesta opção, opte por : "10"

Ativar o scrolling dos tópicos recentes : - Nesta opção, opte por : "Não"

Sentido do deslocamento dos tópicos : - Nesta opção, opte por : "Topo"

Altura da tabela contendo os tópicos recentes : - Nesta opção, opte por : "180"

Tempo de espera entre dois deslocamentos : - Nesta opção, opte por : "0"

Sem progressão do scrolling : - Nesta opção, opte por : "0"

3° - Edição dos templates

Painel de controle avançado >> Templates >> Geral >> overall_header

PHPBB2

Ache o seguinte código:

Código:

 <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                <!-- BEGIN giefmod_index1 -->
                                {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                <!-- END giefmod_index1 -->
                              </div>
                          </td>

E substitua-o por:

Código:

 <td valign="top" width="100%">
                              <div id="center">
                                <!-- BEGIN giefmod_index1 -->
                                {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                <!-- END giefmod_index1 -->
                              </div>
                          </td></tr><tr>

Painel de controle avançado >> Templates >> Portal >> mod_recent_topics

Delete todo o conteúdo da página e adicione o seguinte:

Código:

 <style>
div.title {
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #fff;
text-align:center;
}
</style>
<!-- BEGIN classical_row -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="3" align="center"><tbody>
<thead><tr><th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">
<div class="ist">Tópicos recentes</div>
</th></tr></thead>
<tr>
<td
 style="padding: 0px; background: rgb(255, 255, 255) none repeat scroll
0% 0%; -moz-background-clip: border; -moz-background-origin: padding;
-moz-background-inline-policy: continuous;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" colspan="3" width="100%">
 
<tr><td class="catHead" colspan="2" width="50%">
<div class="title"><font color="black">Tópico:</font></div>
</td>
<td class="catHead" colspan="1" width="25%">
<div class="title"><font color="black">Postado em:</font></div>
</td>
<td class="catHead" colspan="1" width="25%">
<div class="title"><font color="black">Feito por:</font></div>
</td></tr>
 
<tr valign="top">
<td
 colspan="1" style="border-top: 0px none; padding: 0px; background:
transparent
url(http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/list.gif)
no-repeat scroll center top; -moz-background-clip: border;
-moz-background-origin: padding; -moz-background-inline-policy:
continuous;" width="24"><img src="http://2img.net/i/fa/empty.gif"
 width="24" border="0"></td><td style="border-top: 0px none;
 padding: 0px; line-height: 20px; background-repeat: repeat;"
align="left"
background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif"
 width="50%">
 
<!-- BEGIN recent_topic_row -->
<a
href="{classical_row.recent_topic_row.U_TITLE}"><b><font
style="font-family: Tahoma; font-size:
11px">{classical_row.recent_topic_row.L_TITLE}</font></b></a><br>
 
<!-- END recent_topic_row -->
</td>
<td
 style="border-top: 0px none; padding: 0px; line-height: 16.5px;
background-repeat: repeat;" align="center"
background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif"
 width="25%">
<span class="gensmall">
<!-- BEGIN recent_topic_row -->
<img src="http://img816.imageshack.us/img816/9845/11750606.png" width="16px" height="16px" />
{ON} {classical_row.recent_topic_row.S_POSTTIME}
<br><!-- END recent_topic_row -->
</span>
</td>
<td
 style="border-top: 0px none; padding: 0px; line-height: 17px;
background-repeat: repeat;" align="left"
background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif"
 width="25%">
<!-- BEGIN switch_poster -->
<a
href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
{classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
<!-- END switch_poster_guest -->
<!-- BEGIN recent_topic_row -->
<img src="http://www.birazkisisel.com/wp-content/plugins/wp-favorite-posts/img/star.png">
<a
 
href="{classical_row.recent_topic_row.switch_poster.U_POSTER}"><font
 style="font-family: Tahoma; font-size:
11px">{classical_row.recent_topic_row.switch_poster.S_POSTER}</font></a>
<br><!-- END recent_topic_row -->
 
</td>
</tr></table></td></tr></tbody></table>
<!-- END classical_row -->

PunBB

Painel de controle avançado >> Templates >> Geral >> overall_header

Ache o seguinte código:

Código:

<div id="{ID_LEFT}">
                                    <!-- BEGIN giefmod_index1 -->
                                    {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                    <!-- END giefmod_index1 -->
                                </div>

Substitua-o por:

Código:

 <td valign="top" width="100%"><div id="center">
                                <!-- BEGIN giefmod_index1 -->
                                {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                <!-- END giefmod_index1 -->
                              </div></td>

Painel de controle avançado >> Templates >> Portal >> mod_recent_topics

Delete todo o conteúdo da página e adicione o seguinte:

Código:

<style>
div.title {
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #fff;
text-align:center;
}
</style>
<!-- BEGIN classical_row -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="3" align="center"><tbody>
<thead><tr><th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">
<div class="ist"> Últimos tópicos:</div>
</th></tr></thead>
<tr>
<td
 style="padding: 0px; background: rgb(255, 255, 255) none repeat scroll
0% 0%; -moz-background-clip: border; -moz-background-origin: padding;
-moz-background-inline-policy: continuous;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" colspan="3" width="100%">
 
<tr><td class="catHead" colspan="2" width="50%">
<div class="title"><font color="black">Tópico:</font></div>
</td>
<td class="catHead" colspan="1" width="25%">
<div class="title"><font color="black">Postado em:</font></div>
</td>
<td class="catHead" colspan="1" width="25%">
<div class="title"><font color="black">Feito por:</font></div>
</td></tr>
 
<tr valign="top">
<td
 colspan="1" style="border-top: 0px none; padding: 0px; background:
transparent
url(http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/list.gif)
no-repeat scroll center top; -moz-background-clip: border;
-moz-background-origin: padding; -moz-background-inline-policy:
continuous;" width="24"><img src="http://2img.net/i/fa/empty.gif"
 width="24" border="0"></td><td style="border-top: 0px none;
 padding: 0px; line-height: 20px; background-repeat: repeat;"
align="left"
background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif"
 width="50%">
 
<!-- BEGIN recent_topic_row -->
<a
href="{classical_row.recent_topic_row.U_TITLE}"><b><font
style="font-family: Tahoma; font-size:
11px">{classical_row.recent_topic_row.L_TITLE}</font></b></a><br>
 
<!-- END recent_topic_row -->
</td>
<td
 style="border-top: 0px none; padding: 0px; line-height: 16.5px;
background-repeat: repeat;" align="center"
background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif"
 width="25%">
<span class="gensmall">
<!-- BEGIN recent_topic_row -->
<img src="http://img816.imageshack.us/img816/9845/11750606.png" width="16px" height="16px" />
{ON} {classical_row.recent_topic_row.S_POSTTIME}
<br><!-- END recent_topic_row -->
</span>
</td>
<td
 style="border-top: 0px none; padding: 0px; line-height: 17px;
background-repeat: repeat;" align="left"
background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif"
 width="25%">
<!-- BEGIN switch_poster -->
<a
href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
{classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
<!-- END switch_poster_guest -->
<!-- BEGIN recent_topic_row -->
<img src="http://www.birazkisisel.com/wp-content/plugins/wp-favorite-posts/img/star.png">
<a
 
href="{classical_row.recent_topic_row.switch_poster.U_POSTER}"><font
 style="font-family: Tahoma; font-size:
11px">{classical_row.recent_topic_row.switch_poster.S_POSTER}</font></a>
<br><!-- END recent_topic_row -->
 
</td>
</tr></table></td></tr></tbody></table>
<!-- END classical_row -->

Se desejar alterar as imagens que acompanham os respectivos locais, procurem no código as seguintes URL's:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] (Números da lista)(recomendamos não alterar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] (relógio)(Data da postagem)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] (estrela)(Quem postou)

Resultado:

--> FAQ do Tutorial <--
Personalização do widget "tópicos recentes"

• Posso alterar algum valor do primeiro passo do tutorial?
  Sim,
  contudo, alguns itens foram dispostos daquela forma por algumas funções
  serem limitadas, porém, não impede a vós, de alterar quantos tópicos
  recentes possa ter disposto no widget, desde que, claro, não ultrapasse
  os da imagem, por exemplo.