The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Around The Avatar

View previous topic View next topic Go down

Solved Around The Avatar

Post by MasterSly on December 12th 2012, 2:52 pm

Hello
How to do around the Avatar a picture like this


I use phpbb2 Smile

MasterSly
Forumember

Male Posts : 114
Reputation : 5

http://greekfmsupport.forumgreek.com/

Back to top Go down

Solved Re: Around The Avatar

Post by MasterSly on December 13th 2012, 12:59 pm

Here
Code:
http://www.greek-visions.com/forum

MasterSly
Forumember

Male Posts : 114
Reputation : 5

http://greekfmsupport.forumgreek.com/

Back to top Go down

Solved Re: Around The Avatar

Post by MasterSly on December 14th 2012, 1:12 pm

Bump

MasterSly
Forumember

Male Posts : 114
Reputation : 5

http://greekfmsupport.forumgreek.com/

Back to top Go down

Solved Re: Around The Avatar

Post by Sozinho on December 14th 2012, 1:40 pm

I think it's a work of editing template nor css doings.

Sozinho
Forumember

Male Posts : 172
Reputation : 4
Language : English
Location : Philippines

http://appzxor.omgforum.net

Back to top Go down

Solved Re: Around The Avatar

Post by MasterSly on December 16th 2012, 11:54 am

Bump,Bump

MasterSly
Forumember

Male Posts : 114
Reputation : 5

http://greekfmsupport.forumgreek.com/

Back to top Go down

Solved Re: Around The Avatar

Post by MasterSly on December 17th 2012, 3:08 pm

Bump

MasterSly
Forumember

Male Posts : 114
Reputation : 5

http://greekfmsupport.forumgreek.com/

Back to top Go down

Solved Re: Around The Avatar

Post by Shek on December 17th 2012, 5:04 pm

Hello! Very Happy

I got the result. However, I wonder if you have a custom template. The view_topic_body. Exclamation

Shek
Active Poster

Male Posts : 1084
Reputation : 31
Language : Portuguese and English
Location : Brazil

http://www.shiftactif.com/

Back to top Go down

Solved Re: Around The Avatar

Post by MasterSly on December 18th 2012, 12:10 pm

What must change in view_topic_body?

MasterSly
Forumember

Male Posts : 114
Reputation : 5

http://greekfmsupport.forumgreek.com/

Back to top Go down

Solved Re: Around The Avatar

Post by !_NICK_! on December 18th 2012, 12:20 pm

I'd like to know how to do this as well.

!_NICK_!
Active Poster

Male Posts : 1505
Reputation : 69
Language : English, HTML, and CSS
Location : In the middle of no return.

Back to top Go down

Solved Re: Around The Avatar

Post by MasterSly on December 18th 2012, 12:28 pm

Can you tell me how? Very Happy

MasterSly
Forumember

Male Posts : 114
Reputation : 5

http://greekfmsupport.forumgreek.com/

Back to top Go down

Solved Re: Around The Avatar

Post by Shek on December 18th 2012, 12:56 pm

Hello! Hello

Sure I can! Very Happy So I created a tutorial on this, is bad because is Portuguese. But I will teach them here. thumright

Pa > Display > General > view_topic_body template
and search by:
Code:
    {postrow.displayed.POSTER_AVATAR}
Ok? Now, replace with this code
Code:
    <center> <div class="tgeavatar">{postrow.displayed.ONLINE_IMG}</div><span class="avatartge"> {postrow.displayed.POSTER_AVATAR}</span><br /></center>
Do not post the theme yet. You should see the variables that are repeated in templates, and remove them. The variable that is repeated is {postrow.displayed.ONLINE_IMG}. search for the second code and delete it. Very Happy

Now, apply this CSS code:
Code:
.avatartge img {
width: 134px;
height: 134px;
margin: -143px 5px 12px;
}

.tgeavatar {
display:block;
position: relative;
width: 150px;
height: 150px;
background: transparent url("http://i47.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;
}
In PA > Display > Images and colors > Managing images > Advanced mode > Buttons > Online change the current image for this address: http://i15.servimg.com/u/f15/17/34/84/29/00410110.png

If you prefer, I did the tutorial, you only have to use Google to translate or understand the language, to read.
Tutorial in spoiler:
Spoiler:


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


- 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("http://i47.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:
Code:
avatar
Assim que digitar, você vai ser indicado para o código abaixo:
Code:
{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:
Code:
<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:
Code:
<div class="user-basic-info">
E abaixo dele temos a variável do avatar
Code:
{postrow.displayed.POSTER_AVATAR}
Basta selecioná-la e modificá-la para a mesma da variável de PHPBB2. Ou seja:
Code:
<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.


  • Meus avatares são enormes, e agora?:
    Aconselhamos que leia o conteúdo do seguinte tutorial: http://ajuda.forumeiros.com/-t15419.htm Você deve ter os avatares redimensionados para o tamanho da imagem de fundo.

  • Resultado esperado:







© Forumotion Staff and ShiftActif


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

Did you succeed? santa

Regards,
thumright

Shek
Active Poster

Male Posts : 1084
Reputation : 31
Language : Portuguese and English
Location : Brazil

http://www.shiftactif.com/

Back to top Go down

Solved Re: Around The Avatar

Post by MasterSly on December 18th 2012, 2:42 pm

Thank youuuuuuu Very Happy Very Happy Very Happy
Solved

MasterSly
Forumember

Male Posts : 114
Reputation : 5

http://greekfmsupport.forumgreek.com/

Back to top Go down

Solved Re: Around The Avatar

Post by Shek on December 18th 2012, 3:40 pm

erikhacker wrote:Thank youuuuuuu Very Happy Very Happy Very Happy
Solved
Whoopee! Ok, more and !_NICK_!? Solved to you !_NICK_!? What the fuck ?!?

Shek
Active Poster

Male Posts : 1084
Reputation : 31
Language : Portuguese and English
Location : Brazil

http://www.shiftactif.com/

Back to top Go down

Solved Re: Around The Avatar

Post by Sanket on December 20th 2012, 4:56 am

!_NICK_!, if it isn't solved for you yet please make another thread. : )
Topic Solved & Locked

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum