Fórum iBlue
[TUTORIAL] Box descritiva do tópico completa Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Fórum iBlue
[TUTORIAL] Box descritiva do tópico completa Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Somos ÚNICOS, somos o SEU fórum


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

Cʀɑzy

1[TUTORIAL] Box descritiva do tópico completa Empty [TUTORIAL] Box descritiva do tópico completa Sex 1 Mar 2013 - 6:58

Cʀɑzy
Membro Avançado
[TUTORIAL] Box descritiva do tópico completa Templates Edição de templates


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


[TUTORIAL] Box descritiva do tópico completa Warning 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.

[TUTORIAL] Box descritiva do tópico completa Logo PunBB

- 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

(clique na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]


- 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>

- 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.

- 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.


- 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.

- Resultado final:


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


- 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


[TUTORIAL] Box descritiva do tópico completa Act_bottom 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

T-Lord
Administrador
Obrigado por compartilhar Very Happy

http://www.zonetoony.net/

Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos