[TUTORIAL] Usuário para publicidade
Página 1 de 1 • Compartilhe
[TUTORIAL] Usuário para publicidade
Usuário para publicidade |
Sabemos que a publicidade é um dos fatores mais importantes em nossos fóruns. E para melhorar esse fator, veremos neste tópico como criar um pseudo-usuário que ficará no final de cada tópico presente no fórum, anunciando o conteúdo que desejar.
--> Tutoriais, Dicas e Astúcias <--
Usuário para publicidade
Usuário para publicidade
PunBB |
1º - Localizar e editar o template:
Painel de Controle Visualização Templates Geral viewtopic_body ()
Localize:
- Código:
<!-- END postrow -->
</div>
Logo abaixo da tag "</div>", adicione o código abaixo:
<div class="main-content topic">
<div class="post"{postrow.displayed.THANK_BGCOLOR}>
<a name="{postrow.displayed.U_POST_ID}"></a>
<div class="postmain"{postrow.displayed.THANK_BGCOLOR}>
<div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>
</div>
<div class="postbody"{postrow.displayed.THANK_BGCOLOR}>
<div class="user">
<div class="user-ident">
<h4 class="username">
<br/>Publicidade</h4>
<div class="user-basic-info">
<br/><img src="Link do avatar" />
</div>
</div>
<div class="user-info">
Rank: Publicitário
</div>
</div>
<div class="post-entry">
<div class="entry-content">
<div>
<div><strong>
Sua publicidade aqui!
</strong></div>
<div class="clear"></div>
</div>
<p>
{postrow.displayed.EDITED_MESSAGE}
</p>
</div>
</div>
</div>
<div class="postfoot">
<div class="user-contact">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</div>
<div class="post-options">
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
<hr id="first-post-br" />
<div class="main-content topic">
<p class="p-hidden">{postrow.hidden.MESSAGE}</p>
</div>
Atenção para o que está em:
Vermelho: Nome do usuário.
Laranja: Link do Avatar do membro. Padrão: https://i.imgur.com/wbIOt.png
Azul: Informações adicionais sobre o usuário (opcional).
Verde: Conteúdo da Publicidade.
Por fim, clique em Salvar e depois em Publicar () para validar as alterações realizadas no template.
PhpBB2 |
1º - Localizar e editar o template:
Painel de Controle Visualização Templates Geral viewtopic_body ()
Localize:
- Código:
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
Substitua por:
- Código:
<div class="adds48"> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>
Localize e apague:
- Código:
<tr align="right">
<td class="catBottom" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint"> </td>
<td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
<td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
</table>
E então, embaixo de:
- Código:
<!-- END no_post -->
Adicione:
<tr class="post">
<tr>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
</tr>
<tr>
<td class="row1" align="left" valign="middle" >
<div class="robot-contet">
Assunto: Re: <h1 class="cattitle">{TOPIC_TITLE}</h1>
<img class="sprite-icon_miniposted" src="https://2img.net/i/fa/empty.gif" /><Br/><br/>
Sua publicidade aqui!</div>
<div class="robot"><strong>Publicidade</strong><Br/>
<Br/><br/>
<img src="Link do avatar" width="100px" /><br/><br/><br/>
<strong>Rank: Publicitário</strong><Br/><br/>
</div>
</td>
</tr>
</tr>
<tr align="left">
<td class="row1" colspan="3" height="28">
<div class="robot-scroll-img">
<a href="#top">{L_BACK_TO_TOP}</a>
<a href="#bottom">{L_GOTO_DOWN}</a></div>
<span class="genmed">{no_post.L_NO_POST}</span>
</td></tr>
Atenção para o que está em:
Vermelho: Nome do usuário.
Laranja: Link do Avatar do membro. Padrão: https://i.imgur.com/wbIOt.png
Azul: Informações adicionais sobre o usuário (opcional).
Verde: Conteúdo da Publicidade.
Por fim, clique em Salvar e depois em Publicar () para validar as alterações realizadas no template.
2º - Adicionar o CSS:
Painel de Controle Visualização Imagens e Cores Cores Folha de estilos CSS
Adicione o seguinte código e Salve:
- Código:
.robot{
position: relative;
left: 8px;
font-size: 11px;
border-right: solid 1px #000;
width: 170px;
height: 250px;
}
.cattitle{
color: #000;
font-weight: normal;
font-size: 10px;
}
.robot-contet{
height: 0px;
position: relative;
left: 200px;
width: 80%;
font-size: 11px;
}
.robot-scroll-img{
border-right: solid 1px #000;
position: relative;
left: 70px;
height: 28px;
width: 108px;
}
.adds48{
width: 175px;
}
Para editar a cor da linha que divide o perfil da mensagem, edite o seguinte CSS, sendo o que está em vermelho, a cor desejada.:
border-right: solid 1px #000;
PhpBB 3 & Invision |
1º - Estudando o código:
jQuery(document).ready(function(){var n='NOME';var p='CONTEUDO';var i='IMAGEM';var f='INFORMAÇÕESADICIONAIS';if(jQuery('#wrap').length){var o='<div class="post row1 online" style="margin:10px 0px 10px 0px"><span class=corners-top><span></span></span><div class=postbody><div class=content>'+p+'</div></div><div class=postprofile><dl><dt><img src='+i+'><br><b style=font-size:1.2em>'+n+'</b></dt><br><dd>'+f+'</dd></dl></div><span class=corners-bottom><span></span></span></div>'}else{var o='<div class="post online" style="margin:10px 0px 10px 0px"><div class=post-container><div class="postbody clearfix"><div class=postprofile><dl class="postprofile-details postdetails"><dt><img src="'+i+'"><br><b>'+n+'</b></dt><dd><br>'+f+'</dd></dl></div><div class="postbody-head postdetails post-header"></div><div class=post-entry>'+p+'</div></div></div></div>'};jQuery('.post:eq(0)').after(o)});
Vermelho: Nome do usuário.
Laranja: Link do Avatar do membro. Padrão: https://i.imgur.com/wbIOt.png
Azul: Informações adicionais sobre o usuário (opcional).
Verde: Conteúdo da Publicidade.
2º - Adicionando código .JS:
Para podermos adicionar tal efeito, primeiro teremos que usar um codigo .JS, para isso aceda ao seu Painel de controle -> Modulos -> HTML e Java Script -> Gestão dos codigos Java Script -> criar um novo Java Script.
Titulo -> O que desejar.
Investimento -> Em todas as páginas
Código JavaScript -> Seu código que estudamos no passo anterior
Resultado final:
© Fórum dos Fóruns, Heisenburg & MateusV.
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Usuário para publicidade |
Tópicos semelhantes
» Usuário para publicidade
» Usuário para publicidade ModernBB
» Usuário para publicidade, ajuda
» [TUTORIAL] Criar um gestor de temas para escolha do usuário
» Publicidade no usuario
» Usuário para publicidade ModernBB
» Usuário para publicidade, ajuda
» [TUTORIAL] Criar um gestor de temas para escolha do usuário
» Publicidade no usuario
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos