![[TUTORIAL] Quem está conectado com Avatar Empty](https://2img.net/i/empty.gif)
![[TUTORIAL] Quem está conectado com Avatar X5tP37h](https://i.imgur.com/x5tP37h.png)
Quem está conectado com Avatar
Com um pequeno código de JavaScrit e CSS vamos colocar em vez do nome do usuário no "Quem está conectado?" vai aparecer o seu próprio Avatar.
--> Versão <--
Phpbb3
Phpbb3
1º) Criar uma página de JavaScritp:
Primeiro terá que criar uma página de JavaScritp, Painel de Controlo » Módulos » HTML e JavaScritp » Criar uma página JavaScritp, no Investimento marque a opção Índice e coloque o código:
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();});});});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;
}![[TUTORIAL] Quem está conectado com Avatar Result10](https://i.servimg.com/u/f57/16/63/75/54/result10.jpg)
[infos=] Texto: SuporteDesign.net ; Código e Imagem: Shiftactif [/infos]
