[TUTORIAL] Personalização do widget "tópicos recentes"
Fórum dos Fóruns :: Forumeiros e você ::
Página 1 de 1
[TUTORIAL] Personalização do widget "tópicos recentes"
![]() | Personalização do widget "tópicos recentes" |
--> Tutoriais, dicas e astúcias <--
Personalização do widget "tópicos recentes"
Personalização do widget "tópicos recentes"
1º - Noção básica da função:
Antes, teremos que criar um Widget personalizado para que o código possa ser executado. Abaixo mostramos algumas etapas na hora de criar o Widget que recebera o código.
Painel de controle ![]() ![]() ![]() ![]() |
![[TUTORIAL] Personalização do widget "tópicos recentes" Wf110](https://i.servimg.com/u/f85/12/75/28/98/wf110.png)
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
2º - Inserir o Widget e configura-lo:
Para que aconteça a função, teremos que inserir o Widget. Siga os passos abaixo para fazer inserir o Widget:
Painel de controle ![]() ![]() ![]() ![]() |
![[TUTORIAL] Personalização do widget "tópicos recentes" Wforum10](https://i.servimg.com/u/f86/11/66/91/15/wforum10.gif)
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 "
![[TUTORIAL] Personalização do widget "tópicos recentes" Editer](https://2img.net/i/fa/admin/icones/editer.png)
![[TUTORIAL] Personalização do widget "tópicos recentes" A7041fe7fefa4b42be0285305faebb9f](https://2img.net/h/image.prntscr.com/image/a7041fe7fefa4b42be0285305faebb9f.png)
(Imagem já modificada de acordo com os passos abaixo)
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
![]() | ![]() |
3° - Edição dos templates
Para que possamos fazer tal função em nosso fórum, precisaremos modificar o Template "Overall_header", como mostramos abaixo:
Painel de controle ![]() ![]() ![]() ![]() |
![[TUTORIAL] Personalização do widget "tópicos recentes" Templa10](https://i.servimg.com/u/f48/15/88/72/83/templa10.png)
4º - Alterando o código:
Após acessar o Template do teu fórum, basta fazer as alterações de acordo com a versão do teu fórum, mas tome cuidado e tenha atenção a sua versão para não ocasionar em erros:
|
![]() | PHPBB2 |
Painel de controle ![]() ![]() ![]() ![]() |
![[TUTORIAL] Personalização do widget "tópicos recentes" Templa10](https://i.servimg.com/u/f48/15/88/72/83/templa10.png)
Primeiramente localize os códigos abaixo em teu Template:
- 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>
Depois basta altera-los pelo código abaixo, mas tome o devido cuidado para não alterar código errado:
- 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 ![]() ![]() ![]() ![]() |
Você irá deletar todo o conteúdo da página e adicionar o seguinte código:
- 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 ![]() ![]() ![]() ![]() |
![[TUTORIAL] Personalização do widget "tópicos recentes" Templa10](https://i.servimg.com/u/f48/15/88/72/83/templa10.png)
- 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>
Depois basta altera-los pelo código abaixo, mas tome o devido cuidado para não alterar código errado:
- 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 ![]() ![]() ![]() ![]() |
Você irá deletar todo o conteúdo da página e adicionar o seguinte código:
- 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 -->
|
- Resultado
![[TUTORIAL] Personalização do widget "tópicos recentes" B13f091cbd7944149d971c0def370c17](https://2img.net/h/image.prntscr.com/image/b13f091cbd7944149d971c0def370c17.png)
© Fórum dos Fóruns
![]() | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [DÚVIDA] Personalização do widget "tópicos recentes" |
![-](https://2img.net/i/fa/fdf3/moins10.png)
» Personalização do widget tópicos recentes
» Personalização do widget "tópicos recentes"
» Personalização do widget "tópicos recentes"
» Personalização do widget "tópicos recentes"
» Personalização dos tópicos recentes
» Personalização do widget "tópicos recentes"
» Personalização do widget "tópicos recentes"
» Personalização do widget "tópicos recentes"
» Personalização dos tópicos recentes
Fórum dos Fóruns :: Forumeiros e você ::
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos