ShiftActif fórum


Participe da melhor comunidade sobre fóruns!

Bem vindo 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!!!

Avatar do usuário na função "Quem está conectado?" (PHPBB3)

Ir em baixo

Avatar do usuário na função "Quem está conectado?" (PHPBB3)

Mensagem por Shek em Ter 29 Out - 0:48


 

Quem está conectado com avatar


Avatar em quem está conectado para a versão PhpBB3? Isto é incrível mesmo! Neste tutorial vamos aplicar um efeito em JS para fazer com que o avatar do usuário apareça no lugar do nome do mesmo.


--> Tutoriais <--
Avatar do usuário na função "Quem está conectado?"


- Criação da página JS:
Antes de tudo, crie uma página JavaScript em PA > Módulos > HTML e JS > Criar uma página JS > e em Investimento aplique o código no "Índice":
Código:
jQuery(function () {jQuery("#main p ").addClass("listonline");jQuery("#main p.page-bottom").removeClass("listonline")});
jQuery(document).on('ready', function () {
    jQuery('#page-body .listonline a[href*="/u"]') .each(function () {
        var userdata =  jQuery(this).attr('href');var username =   jQuery(this).text();
 jQuery(this).load(userdata + '#main-content #profile-advanced-right img:eq(0) ', function() {this.className = 't_avatar';  jQuery(this).children('img').before('<datatip>'+username+'</datatip>');
}); jQuery(this).hover(function(){ jQuery(this).find('datatip').show();},function(){
 jQuery(this).find('datatip').hide();});});});
Após isso, vamos adicionar o código CSS.

Acesse Visualização > imagens e Cores > Cores > Folha de estilo CSS > e cole este código CSS:
Código:
datatip {
position: absolute;
background: #e6e6e6;
padding: 4px 9px;
border-radius: 3px;
margin-top: -25px;
margin-left: -20px;
display: none;
 color: #FF6600;
font-weight: 800;
}
.t_avatar img {
height: 30px;
margin: 0 5px;
padding: 1px;
width: 30px;
padding: 2px;
margin: 0 5px;
 border: 1px solid #105289;
}
Adoraria ver o resultado? Veja abaixo a imagem:




© ShiftActif


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Avatar do usuário na função "Quem está conectado?"
avatar
Shek
Adminactif
Adminactif

Masculino
Idade : 24
PointActif's : 5060
ReputActifs : 97
Mensagens : 2711
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%

Ver perfil do usuário http://www.shiftactif.com/

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

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