Personalização no Tópico

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Personalização no Tópico

Mensagem por iPrompt em 21/08/14, 11:14 am

Olá,

Desejo este efeito

Spoiler:

Fórum aonde encontrei : http://webr.forumpro.in/t69-regras-gerais

Até


Última edição por Quakeline em 21/08/14, 11:35 am, editado 1 vez(es)
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Resolvido Re: Personalização no Tópico

Mensagem por Sennior em 21/08/14, 11:28 am

Saudações,

Seria meio que parecido com o conteúdo do SPOILER:
Spoiler:

 

Efeito em jQuery


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.



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



- 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 >>
Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta 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.
Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
Seta 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.
- 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

Abraços,
Sennior.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Personalização no Tópico

Mensagem por iPrompt em 21/08/14, 11:35 am

Olá,

Resultou pode fechar

Até
avatar

iPrompt
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5364
Pontos Ativos : 6851

Ver perfil do usuário http://webskins.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum