[Tutorial]Personalizando as legendas dos tópcos

Nome do Arquivo:  [Tutorial] Personalizando as legendas dos tópicos
Autor: Victor Menezes
Funcionalidade: PunBB
Categoria: Recursos de Outros Autores

ola galera, bom hoje nós vamos aprender a como personalizar as legendas que significam tópicos, que foram fechados, populares e abertos.

primeiramente os códigos tem créditos então se for postar em outro lugar poste com o meu nome, por gentileza!!!

oque nós vamos fazer vai exigir, mudanças no template e no CSS, primeiro saiba que não vai ser preciso excluir nada!

vamos á:

Painel de Controle Visualização Templates Geral viewforum_body

Troque seu template COMPLETO por este:

Código:

<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
      <li>
          <script type="text/javascript">//<![CDATA[
            var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
            var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
            var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
            var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
            var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
            insert_plus_menu_new('f{FORUM_ID}&f={FORUM_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
         //]]>
         </script>
      </li>
       <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
       <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
       <li><a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a></li>
   </ul>
   <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
   <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

{BOARD_INDEX}

<div class="main paged">
   <div class="paged-head clearfix">
      <p class="paging">{PAGINATION}</p>
      <!-- BEGIN switch_user_authpost -->
      <p class="posting"><a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" /></a></p>
      <!-- END switch_user_authpost -->
   </div>

   {TOPICS_LIST_BOX}

   <div class="paged-foot clearfix">
      <p class="paging">{PAGINATION}</p>
      <!-- BEGIN switch_user_authpost -->
      <p class="posting"><a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" /></a></p>
      <!-- END switch_user_authpost -->
   </div>

</div>
<div class="pun-crumbs">
   <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>

<div id="pun-info2" class="main">
   <div class="main-content">
      <div id="stats">
         <p class="right">{L_MODERATOR} : {MODERATORS}</p>
         {LOGGED_IN_USER_LIST}
      </div>
      <div id="onlinelist">
         <p>{L_TABS_PERMISSIONS} <br />{S_AUTH_LIST}</p>
      </div>
   </div>
</div>
<div class="h33">Legenda</div>
<!-- BEGIN switch_legend -->
<ul class="pun-legend1">
  <li><img src="{FOLDER_NEW_IMG}" alt="{L_FOLDER_NEW_IMG}" /> {L_FOLDER_NEW_IMG}</li>
   <li><img src="{FOLDER_HOT_NEW_IMG}" alt="{L_FOLDER_HOT_NEW_IMG}" /> {L_FOLDER_HOT_NEW_IMG}</li>
   <li><img src="{FOLDER_LOCKED_NEW_IMG}" alt="{L_FOLDER_LOCKED_NEW_IMG}" /> {L_FOLDER_LOCKED_NEW_IMG}</li>
</ul>
<ul class="pun-legend1">
   <li><img src="{FOLDER_IMG}" alt="{L_FOLDER_IMG}" /> {L_FOLDER_IMG}</li>
   <li><img src="{FOLDER_HOT_IMG}" alt="{L_FOLDER_HOT_IMG}" /> {L_FOLDER_HOT_IMG}</li>
   <li><img src="{FOLDER_LOCKED_IMG}" alt="{L_FOLDER_LOCKED_IMG}" /> {L_FOLDER_LOCKED_IMG}</li>
</ul>
<ul class="pun-legend1">
   <li><img src="{FOLDER_ANNOUNCE_IMG}" alt="{L_FOLDER_ANNOUNCE_IMG}" /> {L_FOLDER_ANNOUNCE_IMG}</li>
   <li><img src="{FOLDER_STICKY_IMG}" alt="{L_FOLDER_STICKY_IMG}" /> {L_FOLDER_STICKY_IMG}</li>
   <li><img src="{FOLDER_GLOBAL_ANNOUNCE_IMG}" alt="{L_FOLDER_GLOBAL_ANNOUNCE_IMG}" />&nbsp;{L_FOLDER_GLOBAL_ANNOUNCE_IMG}</li>
</ul>
<!-- END switch_legend -->

depois nós vamos á:

Painel de Controle Visualização Imagens e Cores Cores folha estilo CSS
adicionaremos o seguinte:

Código:

/*Legendas Perso By Victor*/
#pun-info2:hover {
background: #FAFFD7;
padding: 10px;
border: 3px double #009DD6;
border-radius: 5px;
-webkit-transition: 0.8s;
}
#pun-info2 {
background: #F7F7F7;
border: 3px double #CAC8C8;
border-radius: 5px;


}
.h33, h33 {
border-bottom: 1px solid #595959;
color: #595959;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 1.05em;
margin-bottom: 3px;
margin-top: 20px;
padding-bottom: 2px;
text-transform: uppercase;
}
ul#pun-legend1, ul.pun-legend1:hover{
background: #FAFFD7;
padding: 10px;
border: 3px double #009DD6;
border-radius: 5px;
-webkit-transition: 0.8s;
}
ul#pun-legend1, ul.pun-legend1{
float: left;
margin: 2px 10px;
background: #F7F7F7;
padding: 10px;
border: 3px double #CAC8C8;
border-radius: 5px;
  list-style: none;
width: 310px;

}
/*final do código by victor*/


lembre-se qualquer erro report aqui!

 Tutorial Aceite!

Muito bom  curti o efeito

que bom,ler isso obrigado!

Muito bom, obrigado.

 Se tivesse como fazer isso com as estatísticas *-*

 Obrigado victor +1

psicop escreveu:Muito bom, obrigado.

 Se tivesse como fazer isso com as estatísticas *-*

 Obrigado victor +1

 logo logo vou fazer o tutorial,talvez,obrigado pelo toque!!!

[guest]^.^[/guest]

Bom código amigo.

UsinaVirtual escreveu: Obrigado por compartilhar, mas há legenda que está aplicada a skin que utilizo é fantástica.

poderia passar o link dos eu forum!

ola
isso da para ocultar ?