[TUTORIAL] Avatar do autor de um tópico no título

Os títulos de tópicos são fundamentais para o entendimento primário do conteúdo que vamos ler em um tópico, e podemos atribuir mais opções para este espaço adicionando mais detalhes na versão PhpBB3 e PunBB.

--> Tutoriais, dicas e astúcias <--
Avatar do autor de um tópico no título

1º - Conhecendo o código:
Os códigos para as versões PhpBB3 e PunBB. No segundo passo, ensinaremos como aplicar o código em vossos fóruns.

PHPBB 3

Código:

jQuery(document).ready(function(){jQuery('.page-title').after('<div class="inicio_topico"></div>');jQuery('#main-content .page-title:first').removeClass('page-title').addClass('informacao_sis');jQuery('.postprofile dl dt a:first').clone().prependTo('.inicio_topico');jQuery('.inicio_topico a img').addClass('left');
    jQuery('.informacao_sis').appendTo('.inicio_topico');jQuery('.inicio_topico').append('<div class="postitulo_infos"></div>');jQuery('.author:first').clone().appendTo('.postitulo_infos');
    });jQuery(document).ready(function(){var x=jQuery('.postitulo_infos .author')[0];if(x){x.innerHTML=x.innerHTML.replace(/Postitaja/,'Alustas');}});jQuery(document).ready(function(){var x=jQuery('.postitulo_infos .author')[0];if(x){x.innerHTML=x.innerHTML.replace(/topic/,' - ');}});
jQuery(function() {if (document.getElementById('primeiro-topico-br')) document.getElementById('primeiro-topico-br').previousSibling.style.display = "none";});

PUNBB

Código:

jQuery(document).ready(function() {
  var url=jQuery('.post:first .postmain .postbody .user .user-ident .user-basic-info a img').attr('src');
  jQuery('.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);
});

2º - Noção básica da função:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções: No índice : O código será aplicado ao índice do fórum. No portal : O código será aplicado ao Portal do fórum. Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns. Sobre os temas : O código será aplicado aos tópicos do fórum. Na galeria : O código será aplicado na sua Galeria de imagens. Em todas as páginas : O código será aplicado em todas as páginas do fórum.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

3º - Conhecendo o código CSS:
Este código CSS deverá ser aplicado na versão PhpBB3 quanto para PunBB, em ambas versões.

.inicio_topico {
border: 1px solid #CADCEB;
background: #E1EBF2;
border-radius: 6px;
padding: 3px;}

.inicio_topico a img {
padding-right: 7px;
max-width: 45px;
max-height: 45px;}

#primeiro-topico-br {
display: none;
}

Mude o valor Vermelho e Azul para as dimensões do avatar do autor no título do tópico para o tamanho desejado.


4º - Modificando o template:
Acesse o template em Painel de Controle > Visualização > Templates > viewtopic_body > e procure por:

Código:

{postrow.displayed.POST_DATE_NEW}

em seguida, substitua por:

Código:

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

Em cima de <div class="main paged"> adicione este código:

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><div class="socialetopic"><div align="center" id="FM_widget_share"><script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true">{lang: 'pt-BR'}</script></div></div></dd></div>

Aceda a Folha de Estilo CSS novamente, e juntamente com o CSS anterior adicione o seguinte código:

Código:

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

• Resultado:
  
  

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Avatar do autor de um tópico no título