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!!!
Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Adminactif
Adminactif
Masculino
Idade : 23
PointActif's : 4813
ReputActifs : 97
Mensagens : 2707
Inscrição : 13/04/2011

Localização : Vilhena - RO
100%
Ver perfil do usuáriohttp://www.shiftactif.com/

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

em Ter 29 Out - 0:48
Reputação da mensagem: 100% (1 votos)

 

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?"
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum