Personalização no Tópico

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.






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

2º - Aplicação do código:
Na opção Investimento, marque 'Nso tópicos' e nomeie como desejar.

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";});

Feito isso, basta adicionar em Painel de Controle > Visualização > Imagens e Cores > Cores > Folha de estilos CSS > este CSS:

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

Para usuários com a versão PUNBB:
JS com o Investimento Nos tópicos

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

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>

Em seguida, adicione o seguinte código CSS:

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

Salve.

• 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: [Dúvida] Avatar do autor de um tópico no título