ShiftActif fórum

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

Participe da melhor comunidade sobre fóruns!

Bem vindo Avatar do usuário na função "Quem está conectado?" (PHPBB3) 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!!! Avatar do usuário na função "Quem está conectado?" (PHPBB3) 1660898911

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

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

  • 0

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

Mensagem por Shek em Ter 29 Out - 0:48


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

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:
Avatar do usuário na função "Quem está conectado?" (PHPBB3) Result10




© ShiftActif


Avatar do usuário na função "Quem está conectado?" (PHPBB3) Faq10 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?"
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