ShiftActif fórum

[TUTORIAL] Quadro online e offline no perfil do usuário Homepg10

Participe da melhor comunidade sobre fóruns!

Bem vindo [TUTORIAL] Quadro online e offline no perfil do usuário 405374159 ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!! [TUTORIAL] Quadro online e offline no perfil do usuário 1660898911

[TUTORIAL] Quadro online e offline no perfil do usuário

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

[TUTORIAL] Quadro online e offline no perfil do usuário Empty [TUTORIAL] Quadro online e offline no perfil do usuário

Mensagem por Shek em Seg 17 Dez - 17:52


[TUTORIAL] Quadro online e offline no perfil do usuário Templa10

Edição de template


Edição de templates é algo inovador porque sempre nos surpreende assim que você encontra um resultado maravilhoso. Neste tutorial vamos adicionar um quadro em volta do avatar do usuário que está online, e um quadro para usuários offline.


--> Tutoriais <--
Quadro online e offiline na frente do avatar do usuário



- Modificar os templates da versão PhpBB2 e PhpBB3:
Através da modificação das páginas dos templates, poderá fazer várias modificações na estrutura do Fórum, podendo criar novos efeitos para o tema, e poderá

ainda incluir novos conteúdos nas páginas, mesmo em locais, que não são possíveis através das funções normais do Fórum.

Antes de continuar, é importante que você leia atentamente o seguinte tutorial: http://ajuda.forumeiros.com/t16827-


Painel de controle -> Visualização -> Templates ->
[TUTORIAL] Quadro online e offline no perfil do usuário Templa10


- Código CSS de personalização:
Vamos adicionar o código CSS antes de tudo. Então acesse o seu PA > Visualização > Imagens e Cores > Cores > Folha de estilo CSS > e adicionar

o seguinte código CSS:
.avatartge img {
width: 134px;
height: 134px;
margin: -143px 5px 12px;
}

.tgeavatar {
display:block;
position: relative;
width: 150px;
height: 150px;
background: transparent url("https://i.servimg.com/u/f47/16/67/92/35/tge10.png") no-repeat;
}

.tgeavatar img {
display:block;
position: relative;
}

#i_icon_online {
display:block;
position: relative;
}

Agora, basta salvar. O código CSS está disponível para todas as versões, logo você não precisa modificar.



- Template a ser modificado:
Acesse o seu PA > Visualização > Templates > Geral > view_topic_body > e vamos modificar o trecho que fala sobre o avatar. Alguns usuários tem a

função da alteração da ordem do rank e avartar e isso pode causar dificuldades visto que o template foi modificado. Contudo, você só precisa ter atenção com

as modificações do modelo.

PHPBB2
Na caixa Buscar procure por:
Código:
avatar
Assim que digitar, você vai ser indicado para o código abaixo:
Código:
{postrow.displayed.POSTER_AVATAR}
Essa é a variável da imagem do usuário nas mensagens. Agora, precisamos saber que, além dela há outras variáveis importantes. Antes da variável acima, você precisa adicionar as DIV com o atributo CLASS que vai copiar o CSS que adicionamos. Delete a variável {postrow.displayed.POSTER_AVATAR} e substitua por esse código:
Código:
<center> <div class="tgeavatar">{postrow.displayed.ONLINE_IMG}</div><span class="avatartge"> {postrow.displayed.POSTER_AVATAR}</span><br /></center>
Você deve ter notado a presença de uma variável dentro de código DIV. Ela é a variável da imagem do ONLINE, denominada de {postrow.displayed.ONLINE_IMG}. Agora que temos o código feito, você precisa deletar a segunda variável {postrow.displayed.ONLINE_IMG} do modelo. Na caixa buscar procure-a novamente, e delete-a até que fique somente a do código acima.

Feito isso, salve e publique o template.

PUNBB:
Na caixa Buscar procure por:
Código:
<div class="user-basic-info">
E abaixo dele temos a variável do avatar
Código:
{postrow.displayed.POSTER_AVATAR}
Basta selecioná-la e modificá-la para a mesma da variável de PHPBB2. Ou seja:
Código:
<center> <div class="tgeavatar">{postrow.displayed.ONLINE_IMG}</div><span class="avatartge"> {postrow.displayed.POSTER_AVATAR}</span><br /></center>
Procure e exclua a variável repetida {postrow.displayed.ONLINE_IMG}.

Salve e publique o template

Contudo, ainda não vai ter funcionado porque falta a imagem do ONLINE. Em PA > Visualização > Imagens e Cores > Modo avançado > Botões > Conectado > Modifique a URL para este:
Salve.








© ShiftActif


[TUTORIAL] Quadro online e offline no perfil do usuário Faq10 Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Quadro online e offiline na frente do avatar do usuário
Shek

Shek
Administrador

Masculino
Idade : 25
PointActif's : 5670
ReputActifs : 97
Mensagens : 2715
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%

http://www.shiftactif.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