1![[tutorial] modificando as categorias no estilo rmbr Empty](https://2img.net/i/empty.gif)
[tutorial] modificando as categorias no estilo rmbr 12/11/12, 03:51 pm
RMBR
Administrador
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | [TUTORIAL] Modificando as categorias no estilo RMBR |
Olá pessoal, as categorias do punBB básicas são bem "feinhas" então decidi fzr uma edição dessas categorias pro meu forum, e como algumas pessoas já me pediram por MP para passar o código dela, estarei fazendo este tutorial....
| [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] |
|
--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Modificando as categorias no estilo RMBR
[TUTORIAL] Modificando as categorias no estilo RMBR
1º - Editando o Template...
Vá em:
Painel de Controle [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Visualização [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Templates [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Geral [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] index_box
Delete todo o código da folha, e troque por este:
- CLIQUE AQUI PARA ABRIR:
- Código:
<div class="pun-crumbs">
<p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="boxfmvi">
<div class="main-head">
<div class="page-title">{catrow.tablehead.L_FORUM}</div>
</div>
<div class="main-content">
<table cellspacing="0" class="table">
<tbody class="statused">
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<tr>
<td class="tc2">
<span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</span>
</td>
<td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
<h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
<br />
<p class="reppost" style="width:auto;"><span> » Tópicos: <span style="color:#FF0145;font-size:12px;">{catrow.forumrow.TOPICS}</span></span> <span> » Posts: <span style="color:#0790FF;font-size:12px">{catrow.forumrow.POSTS}</span></span></p>
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
</td>
<td class="tcr">
<span>
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
<br />
{catrow.forumrow.USER_LAST_POST}
</span>
</td>
</tr>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</tbody>
</table>
</div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->
</div>
<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
<ul>
<li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
<li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
<li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
</ul>
<!-- BEGIN switch_delete_cookies -->
<p class="right">
<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
</p>
<!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->
Salve e Publique o Template!
2º - Inserindo o código CSS...
Vá em:
Painel de Controle [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Visualização [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Imagens e Cores [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Cores [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Folha de Estilo CSS
Adicione o seguinte código à folha:
- CLIQUE AQUI PARA ABRIR:
- Código:
/*categorias*/
#profile-advanced-details .autobot, .main-head .h2, .main-head .h3, .main-head h1, .main-head h2, .main-head h3 {
color:
white;
font-family: Trebuchet MS;
font-size: 17px!important;
font-variant: small-caps;
font-weight: 600!important;
text-shadow: 1px 1px 1px
black;
}
.pun h2, .pun h3, .pun input, .pun select, .pun th {
font-family: Verdana,Arial,sans-serif;
font-size: 1em;
font-style: normal;
font-variant: normal;
font-weight: normal;
}
.main .main-head .page-title {
font-size: 12px;
font-weight: 400;
}
/*.main .main-foot, .main .main-head {
background: url(http://i48.servimg.com/u/f48/16/58/89/73/backgr16.jpg) repeat scroll 0 0
black;
background-attachment: fixed;
background-position: right right;
background-repeat: no-repeat;
border: 1px solid
#DDD!important;
margin: 1px;
position: center;
}*/
.boxfmvi {
/*border: 1px solid
#DDD!important;*/
margin: 30px 0!important;
}
.pun .main, .pun .main-category {
/*border: 1px solid
#DDD;*/
}
.pun .main, .pun .main-category {
margin: 1em 0;
}
.pun .main table td.tc2, .pun .main table td.tc3 {
background-color:
#F4F4F4;
}
.pun .table .tc2, .pun .table .tc3 {
text-align: center;
width: 10%;
}
.pun table.table td {
background-color:
#FBFBFB;
/*border-color:
#DDD;
border-style: solid none none solid;
border-width: 1px;
line-height: 130%;*/
padding: .6em 0 .7em;
}
#pun-about, .boxfmvi .tc2, .boxfmvi .tcr {
background: url(http://i48.servimg.com/u/f48/16/58/89/73/alt210.gif) repeat scroll 0 0
#F4F4F4!important;
}
.boxfmvi .tc2 {
margin: 0!important;
padding: 0!important;
position: inherit!important;
width: 70px!important;
}
.boxfmvi td {
border: 1px solid
#DDD!important;
padding: 10px!important;
}
.reppost {
margin-bottom:3px!Important;
margin: 10px 5px 10px 0;
text-align: left;
width:auto;
color:grey;
}
.pun {
background-color:
white;
margin: 25px auto 0!important;
min-width: 931px!important;
padding: 12px;
width: 931px;
}
.pun tbody.statused span.status {
position: absolute;
}
.boxfmvi .status {
position: inherit!important;
}
/* acesse para ver mais tutoriais: www.rmbr.forumeiros.com */
Valide o CSS!
3º - Resultado...
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
P.S.: A BARRA VERDE EM CIMA NÃO ESTÁ INCLUSA.
P.S.: A BARRA VERDE EM CIMA NÃO ESTÁ INCLUSA.
- Funciona em quais versões?
PUNBB e talvez PHPBB2 (talvez, pq eu nao testei nele ainda).
© RMBR
| [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [TUTORIAL] Modificando as categorias no estilo RMBR |
Destaque do Fórum