As versões PunBB e phpBB2, permitem uma personalização total do fórum, pela modificação dos templates. Já que temos possibilidades quase infinitas de personalização, mas hoje, o tutorial é apenas para PunBB; veremos como podemos colocar uma box com descrição do tópico, ou seja, quando o mesmo foi criado, o link do mesmo, o título do mesmo, o avatar do criador, e etc.

--> Tutoriais e astúcias <--
Box descritiva do tópico completa

Para que possamos prosseguir com o tutorial, é preciso que tenha noção sobre a edição dos templates, que serão necessárias para a continuação deste tutorial.

PunBB

1º - Acessar o template:
Terá de acessar a gestão dos templates para efetuar as mudanças. Aceda à:
Painel de Controle -> Visualização -> Templates -> Geral -> viewtopic_body



2º - Adicionando o código:
Para podermos colocar a box, JavaScript não poderá ser usado, então, será por edição de template .
Para encontrar o código a ser modificado, prescione as teclas CTRL + F e localize esta linha:

Código:

<div class="pun-crumbs noprint">

Já encontrado, podemos começar a modificação.
Acima da linha encontrada, coloque isto:

Código:

<div class="titlebox"><dd> <dava><div class="avatarredet"><a class="teste2" href="#"><img class="teste" alt="" src="http://r25.imgfast.net/users/2517/28/07/20/avatars/1-10.jpg"></a></div></dava><div itemscope="" itemtype="http://schema.org/Article" class="ipsBox_withphoto"><h1 itemprop="name" class="ipsType_pagetitle"><a href="{TOPIC_URL}" id="topictitletop">{TOPIC_TITLE}</a></h1><div class="desc lighter blend_links"><dts>Iniciado por: </dts><span itemprop="creator"></span> <span itemprop="data_post"></span></div></div></dd></div>

3º - Configurando certa parte código:
Teremos de configurar certa parte do código acima, então, ainda no template viewtopic_body localize:

Código:

{postrow.displayed.POST_DATE_NEW}

E substitua para:

Código:

<span class="data-post">{postrow.displayed.POST_DATE_NEW}</span>

Não se esqueça de Publicar o template.

4º - Adicionando o CSS:
Aceda á:
Painel de Controle -> Visualização -> Imagens & Cores -> Cores -> Folha de Estilo CSS

E adicione isto:

Código:

/*---------------- INÍCIO BOX DESCRIÇÃO DO TÓPICO BY [F]LAMES -------------------*/
.titlebox {
-moz-border-radius: 3px;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 4px;
-webkit-border-radius: 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 4px;
background: #EFEFEF;
border: 1px solid #CCC;
border-radius: 3px;
box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 4px;
overflow: hidden;
padding: 10px;
text-shadow: white 0 1px 0;
margin-bottom: 10px;
}
.titlebox dd {
display: block;
}
.titlebox dava {
float: left;
}
.titlebox dava a img {
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
background: white;
border: 1px solid #D5D5D5;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
float: left;
height: 50px!important;
padding: 1px;
width: 50px!important;
}
.ipsBox_withphoto {
float: left;
margin-left: 10px;
}
.ipsType_pagetitle {
color: #323232;
display: block;
font-family: Helvetica,Arial,sans-serif;
font-size: 26px;
font-style: normal;
font-variant: normal;
font-weight: 300;
line-height: 1.4;
outline-style: none;
overflow: hidden;
text-align: left;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: 650px;
}
.ipsType_pagetitle a {
font-size: 23px;
z-index: 999;
}
a:link {
text-decoration: none!important;
}
.desc.lighter.blend_links {
color: #777;
float: left;
font-size: 11px;
}
.ipbfs_titlebox {
background: #EDEFF1 url("http://www.ipbforumskins.com/skindemo/public/style_images/marble34x/noise.png") repeat;
color: #768089;
text-shadow: rgba(255, 255, 255, 0.9) 0px 1px 0px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset #B3BAC1 0px 1px 3px;
-moz-box-shadow: inset #b3bac1 0px 1px 3px;
box-shadow: inset #B3BAC1 0px 1px 3px;
padding: 10px;
overflow: hidden;
}
.ipsBox_withphoto{
float:left;
margin-left:10px;
}
.desc.lighter.blend_links{
color:#777;
float:left;
font-size:11px;
}
.ipbType_pagetitle{
color:#323232;
display:block;
font-family:Helvetica,Arial,sans-serif;
font-size:21px;
font-style:normal;
font-variant:normal;
font-weight:300;
line-height:1.4;
outline-style:none;
overflow:hidden;
text-align:left;
text-decoration:none;
text-overflow:ellipsis;
white-space:nowrap;
width:650px;
}
.socialetopic{
float:right;
position:relative;
}
.titlebox {
-moz-border-radius: 3px;
-moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 4px;
-webkit-border-radius: 3px;
-webkit-box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 4px;
background: #EFEFEF;
border: 1px solid #CCC;
border-radius: 3px;
box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 4px;
overflow: hidden;
padding: 10px;
text-shadow: white 0 1px 0;
}
.titlebox dd {
display: block;
}
.titlebox dava {
float: left;
}
.ipsBox_withphoto {
float: left;
margin-left: 10px;
}
.ipsType_pagetitle {
color: #323232;
display: block;
font-family: Helvetica,Arial,sans-serif;
font-size: 26px;
font-style: normal;
font-variant: normal;
font-weight: 300;
line-height: 1.4;
outline-style: none;
overflow: hidden;
text-align: left;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: 650px;
}
.ipsType_pagetitle a {
font-size: 23px;
z-index: 999;
}
.desc.lighter.blend_links {
color: #777;
float: left;
font-size: 11px;
}
.socialetopic {
float: right; position: relative;
}
.titlebox dava a img {
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
background: white;
border: 1px solid #D5D5D5;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
float: left;
height: 50px!important;
padding: 1px;
width: 50px!important;
}
/*-------------------- FIM BOX DESCRIÇÃO DO TÓPICO BY [F]LAMES --------------------*/

Salve.


5º - Adicionando o Javascript necessário:
Aceda á:
Painel de Controle -> Módulos -> HTML & JAVASCRIPT -> Gestão dos código JavaScript

Clique em 'Criar um novo JavaScript':

Título *: Á sua escolha.
Investimento: Em todas as páginas.
Código JS *:

Código:

jQuery(document).ready(function() {
  var url=$('.post:first .postmain .postbody .user .user-ident .user-basic-info a img').attr('src');
  $('.teste').attr('src',url);
  var url2=jQuery('.post:first .postmain .postbody .user .user-ident .user-basic-info a').attr('href');
  jQuery('.teste2').attr('href',url2);
  var url3=jQuery('.post:first .postmain .postbody .user .user-ident .username').html();
  jQuery('span[itemprop="creator"]').html(url3);
  var url5=jQuery('span.data-post').html();
  jQuery('span[itemprop="data_post"]').html(url5);
});

Salve.

6º - Resultado final:


(clique na imagem para poder visualizá-la melhor)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

7º - Perguntas frequentes:

• Funciona em quais versões ?
  O código é funcional apenas para a versão PunBB.


• O título do tópico vou ter que ficar mudando toda hora ?
  Não, o template tem essa configuração automática.


• O avatar do criador do tópico vai ficar muito grande ?
  Não, graças as CSS adicionado o avatar vai sempre ter as proporções de 50 x 50.


• Os nick's dos usuários vão ficar com a minha cor ?
  Não, graças ao Javascript adicionado, o nick vai ter o link do usuário, e a cor normal do mesmo, mesmo se houver alguma prefixo anterior ao nick.


• A data de criação vai ser fixa ?
  Não, vai ser de acordo com a criação do tópico, não será fixa.

---

© SH-Skins | 15-Tronos

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Box descritiva do tópico completa