Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 Diskete

avatar
Membro
Informações do usuário no lastpostCom este código conseguiremos fazer com que as informações dos usuários apareçam no lastpost.
Versões de funcionamento: Todas as versões.

1º Passo - Instalando o JavaScript
Vamos até o gestor de códigos JavaScript e adicionar o código abaixo Admin PC > Módulos > HTML & JavaScript > Gestão dos códigos JavaScript >> Criar um novo JavaScript.
Título * : Escolha um nome para o JavaScript
Investimento : Em todas as Páginas
Código : Adicione o código abaixo.

Código:
$(document).ready(function () {

  /* TUTORIAL = http://staffergroupbr.stuning.net/t1037- */

  $('.tcr a[href*="/u"]').mouseover(function () {
    $(this).parents('strong').CSS('position', 'relative');
    $('.perfilInfo').remove();
    $(this).parents('.tcr').CSS('overflow', 'visible');
    $(this).before('<div class="perfilInfo"style="position:absolute;"><span class="setPerfil"><span><img class="PerfilInfoImg"src="http://r25.imgfast.net/users/2517/28/07/20/avatars/1-82.png"/><h2>' + $(this).HTML() + '</h2><p><b>Cargo:</b> <span></span></p><p><b>Posts:</b> <span></span></p><p><b>Registro:</b> <span></span></p><p><b>Pontos:</b> <span></span></p><span class="linkPrf"><a href="/privmsg?mode=post&u=' + $(this).attr('href').replace('/u', '') + '">Enviar MP</a></span><span class="linkPrf"><a href="' + $(this).attr('href') + '">Ver perfil</a></span></span></span></span></div>');
    $.get($(this).attr('href'), function (retornoMembro) {
      var avtPrf = $('#profile-advanced-right img:first', retornoMembro).attr('src');
      $('.PerfilInfoImg').attr('src', avtPrf);
      var perfil_rank = $('#profile-advanced-right .module .main-content img:eq(1)', retornoMembro).attr('alt');
      var perfil_post = $('#field_id-6 dd', retornoMembro).HTML();
      var perfil_cad = $('#field_id-4 dd', retornoMembro).HTML();
      var perfil_lastV = $('#field_id-13 dd', retornoMembro).HTML();
      $('.setPerfil p:eq(0) span').HTML(perfil_rank);
      $('.setPerfil p:eq(1) span').HTML(perfil_post);
      $('.setPerfil p:eq(2) span').HTML(perfil_cad);
      $('.setPerfil p:eq(3) span').HTML(perfil_lastV)
    });
    $('.perfilInfo').mouseleave(function () {
      $(this).remove()
    })
  })
});
O código pode ser modificado em certas áreas.

2º Passo - Instalando o CSS
Agora vamos adicionar o CSS para que o código funcione perfeitamente, vá até Admin PC > Visualização > Imagens e Cores > Cores >> Folha de estilo CSS.
Adicionaremos o código abaixo:
Código:
/*- Informações do usuário no lastpost  -*/
.perfilInfo {
    background:url(http://i56.servimg.com/u/f56/17/71/75/73/bottom10.png) no-repeat 98% 0;
    float:left;
    height:167px;
    left:-43em;
    padding:16px 0 38px 5px;
    top:13px;
    width:510px;
    z-index:999
}
.linkPrf {
    -moz-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
    background:#F6F6F6;
    border:1px solid #DBDBDB;
    border-radius:0 0 4px 4px;
    border-top:none;
    bottom:-7px;
    box-shadow:0 1px 0 rgba(255,255,255,1) inset, 0 1px 0 rgba(0,0,0,0.3);
    color:#616161;
    float:left;
    height:14px;
    left:13.8em;
    margin:2px;
    padding:2px;
    text-align:center;
    text-decoration:none!important;
    transition:all .2s ease-in-out;
    width:8em
}
.linkPrf:hover {
    border-color:#9A9A9A;
    color:#4C4C4C
}
.linkPrf:hover a {
    color:#4C4C4C
}
.linkPrf a {
    color:#616161!important;
    font-size:12px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    text-decoration:none
}
.setPerfil {
    background:rgba(0,0,0,0.3);
    border-radius:3px;
    display:block;
    height:100%;
    padding:5px 5px 10px
}
span {
    background:#f9f9f9;
    border:1px solid #999;
    border-radius:3px;
    display:block;
    height:100%;
    padding:3px
}
.setPerfil .PerfilInfoImg {
    -moz-box-shadow:0 2px 2px rgba(0,0,0,0.1);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.1);
    background:#fff;
    border:1px solid #D5D5D5;
    box-shadow:0 2px 2px rgba(0,0,0,0.1);
    display:table;
    float:left;
    height:91px;
    padding:1px;
    width:91px
}
.setPerfil .PerfilInfoImg:hover {
    -moz-box-shadow:0 2px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.2);
    border-color:#A1A1A1;
    box-shadow:0 2px 2px rgba(0,0,0,0.2)
}
.setPerfil p div {
    display:inline
}
.setPerfil h2 {
    background:#E1E1E1;
    border-radius:0 10px 0 0;
    box-shadow:1px 1px 0 #CCC;
    display:block;
    float:left;
    font-family:"Trebuchet MS";
    font-size:19px;
    font-style:normal;
    font-variant:normal;
    font-weight:bold;
    margin-bottom:10px;
    padding:5px;
    text-shadow:1px 1px 0 #fff;
    width:382px
}
.setPerfil p {
    -moz-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
    background:#F1F1F1;
    border-left:3px solid #333;
    border-top:1px solid #333;
    box-shadow:1px 1px 0 #CCC;
    display:block;
    float:right;
    font-weight:400;
    margin:2px 5px;
    padding:5px;
    text-align:left;
    width:350px
}
.setPerfil p:hover {
    box-shadow:1px 1px 0 #9A9A9A
}
/* TUTORIAL = http://staffergroupbr.stuning.net/t1037- */


  • Resultado Final






© Staffer Group BR™
PRECISA DE SUPORTE?

Criador: SPDesign
Site: http://staffergroupbr.stuning.net/t1037-tutorial-informacoes-do-usuario-no-lastpost

Assinatura:


+ Watch no Devianart !
Ver perfil do usuário

#2
 Bookmarlucas654

avatar
Membro
INFORMAÇÃO!
Lembrando que neste código, é necessário que os cargos NÃO tenham imagens. Caso contrário, a parte 'Cargo' poderá bugar, ou todo o efeito!



Meus parabéns por publicar este tutorial, estarei colocando agora mesmo em meu fórum! =)

Testado e aprovado para a versão PunBB .

Ver perfil do usuário

#3
 ~[B]art

avatar
Membro
Efeito manajdo!
Todo mundo ja tem!
Mas veleu o tutorial!
Ver perfil do usuário

#4
 Vargas

avatar
Moderador
Aceito: Movido para o local correspondente.


Assinatura:
Esse é o Meu, Esse é o Seu, Esse é o Nosso Brasil!
Ver perfil do usuário

#5
 'Fusion

avatar
Membro
gostei mt vlw tava caçando

Assinatura:
Ver perfil do usuário samuca_akira@hotmail.com

#6
 Master Publicitario

avatar
Membro
Vou testar obrigado.
Ver perfil do usuário

#7
 Stark'

avatar
Membro
Legalzinho
Ver perfil do usuário

#8
 Mr.GamingPT

avatar
Membro
Obrigado
Ver perfil do usuário

#9
 JQuery

avatar
Membro
e pa lindo
Ver perfil do usuário

#10
 Master Publicitario

avatar
Membro
Muito Bom!
Ver perfil do usuário

#11
 Conteúdo patrocinado