Como coloca assim o titulo do tópico

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

Resolvido Como coloca assim o titulo do tópico

Mensagem por James [B]. em 13/10/13, 09:38 pm

Qual é minha questão:
Queria deixar meu Titulo Assim como a imagem below



Obrigado Pela Atenção.

Endereço do meu fórum:
http://nxfatal.forumeiros.com

Versão do fórum:
PUNBB


Última edição por iPauliinhoO_. em 15/10/13, 10:16 pm, editado 1 vez(es)
avatar

James [B].
Nível 9

Masculino
Inscrito dia : 16/09/2012
Mensagens : 233
Pontos Ativos : 325

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

Resolvido Re: Como coloca assim o titulo do tópico

Mensagem por Jpjupa em 14/10/13, 07:27 am

Olá usuário,

Este procedimento será um pouco complicado e demorado, com vários passos, peço bastante atenção.

1) Adicione isto ao seu 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 #D6D6D6;
    border-radius:3px;
    box-shadow:inset rgba(0,0,0,0.1) 0 1px 4px;
    overflow:hidden;
    padding:10px;
    text-shadow:#fff 0 1px 0
}
.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:#fff;
    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
}
.titlebox dava a img:hover{
    -moz-box-shadow:0 2px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.2);
    border-color:#A1A1A1;
    box-shadow:0 2px 2px rgba(0,0,0,0.2)
}
.ipsType_pagetitle a{font-size:23px;z-index:999}
.desc.lighter.blend_links{color:#a4a4a4;float:left;font-size:11px}
.desc.lighter,.desc.lighter.blend_links a{color:#A4A4A4}
.desc,.desc.blend_links a,p.posted_info{color:#777;font-size:12px}
.conect{display:inline-block;padding-left:5px}
2) Crie um javascript com investimento "Nos tópicos", com o seguinte código:
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 .user-basic-info .user-name').html();
  jQuery('span[itemprop="creator"]').html(url3);
  var url5=jQuery('span.data-post').html();
  jQuery('span[itemprop="data_post"]').html(url5);
});
3) Vá no seu template viewtopic_body, e procure por:
Código:
 {postrow.displayed.POST_DATE_NEW}
Acima deste código, adicione o seguinte código:
Código:

<div class="titlebox">
  <dd> <dava><div class="avatarredet"><a class="teste2" href="#">
    <img class="teste" alt="" src="http://r26.imgfast.net/users/2617/31/90/74/avatars/1-40.png" /></a></div></dava>
    <div itemscope="" itemtype="http://schema.org/Article" class="ipsBox_withphoto">
      <h1 itemprop="name" class="ipsType_pagetitle">{TOPIC_TITLE}</h1>
      <div class="desc lighter blend_links">
        <dts>Iniciado por </dts><span itemprop="creator"></span>, <span itemprop="data_post"></span></div></div>
    <script>jQuery(document).ready(function(){jQuery('.ipbfs_titlebox').append('<span style="width: 80%;"><br /><span style="margin-left: 10px">Postado por '+jQuery('.main-content.topic .posthead h2 div#ppf_sb_branco a[href^="/u"]').eq(0).text()+','+jQuery('.main-content.topic .posthead h2 span.data-post').eq(0).text().replace('Postado ', ' ')+' via PowerPixel Fórum </span></span>')});</script>    </div><script type="text/javascript">$(function(){$.get('/profile?mode=editprofile',function(d){$('#iframe_votacao').attr('src','http://v11.power-pixel.net/tpsys/?t=38296&u='+$(d).find('input[name="user_id"]').val());});});</script><div style="float: right;width: 300px;margin-top: 10px;"><iframe id="iframe_votacao" src="http://v11.power-pixel.net/tpsys/carregando.php" style="background: transparent;border: 0;width:300px;height:50px;" border="0"></iframe></div>
  </dd></div>
4) Ainda no template viewtopic_body, procure por:
Código:
{postrow.displayed.POST_DATE_NEW}
E substitua por:
Código:
<span class="data-post">{postrow.displayed.POST_DATE_NEW}</span>
Abraço.
Jpjupa. Feliz
avatar

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

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

Resolvido Re: Como coloca assim o titulo do tópico

Mensagem por James [B]. em 14/10/13, 09:35 am

Olhe como fico no meu forum fico todo esquezito
avatar

James [B].
Nível 9

Masculino
Inscrito dia : 16/09/2012
Mensagens : 233
Pontos Ativos : 325

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

Resolvido Re: Como coloca assim o titulo do tópico

Mensagem por Jpjupa em 14/10/13, 10:48 am

Amigo, recebi a informação agora, de um dos meus colegas da staff, que não podemos dar suporte á esse tipo de código, infelizmente.

Acho que não tenho permissão para ajudar nesse caso, pois é um código externo aos nossos tutoriais.

Abraço.
Jpjupa.
avatar

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

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

Resolvido Re: Como coloca assim o titulo do tópico

Mensagem por James [B]. em 14/10/13, 12:02 pm

afff mano pf ajuda ae
avatar

James [B].
Nível 9

Masculino
Inscrito dia : 16/09/2012
Mensagens : 233
Pontos Ativos : 325

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

Resolvido Re: Como coloca assim o titulo do tópico

Mensagem por James [B]. em 15/10/13, 09:36 am

UP
avatar

James [B].
Nível 9

Masculino
Inscrito dia : 16/09/2012
Mensagens : 233
Pontos Ativos : 325

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

Resolvido Re: Como coloca assim o titulo do tópico

Mensagem por Jpjupa em 15/10/13, 05:06 pm

Primeiramente, tenha mais paciência.

E não estou vendo as alterações no seu template viewtopic_body, acho que você adicionou no template errado, poderia checar por favor?

Abraço.
Jpjupa.
avatar

Jpjupa
Membro do Fórum

Masculino
Inscrito dia : 15/11/2010
Mensagens : 1369
Pontos Ativos : 1977

Ver perfil do usuário http://ajuda.forumeiros.com/
  • 0

Resolvido Re: Como coloca assim o titulo do tópico

Mensagem por Shek em 15/10/13, 08:24 pm

Boa noite!

Tente 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
Atenciosamente,
Shek


Shek CrowleyAdmineiro - Fórum dos Fóruns

Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 17165
Pontos Ativos : 21420

Ver perfil do usuário http://www.shiftactif.com https://go.topicit.net/ZosT/61pMt1mPsG https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Como coloca assim o titulo do tópico

Mensagem por James [B]. em 15/10/13, 10:16 pm

Obrigado Shek Certinho Aqui.
avatar

James [B].
Nível 9

Masculino
Inscrito dia : 16/09/2012
Mensagens : 233
Pontos Ativos : 325

Ver perfil do usuário http://skytemas.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