ZoneToony - Playstation 4, Xbox 720, Windows 8, Smartphones, Android, Divulgue seu Servidor, Gam
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.


Você não está conectado. Conecte-se ou registre-se

ZoneToony - Playstation 4, Xbox 720, Windows 8, Smartphones, Android, Divulgue seu Servidor, Gam » Forumeiros » Tutorias e Dicas » [TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB)

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

T-LordT-Lord
Admin

[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) Ssss10
Informações de um membro em balão

Com base neste tutorial podemos adicionar um código que permite mostrar as informações de um membro em forma de um balão.



--> Tutoriais, dicas e astúcias <--
Informações de um membro em balão (Phpbb3 e PunBB)



1º - Noção básica da função:
As
páginas javascript ativas em seu fórum possibilita inserir scripts e
jquery para personalizar seu fórum, contudo é importante saber que
qualquer script encontrado na internet acabam por não surgir efeito nos
fóruns.

Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts ->


Expandir esta imagem Ver em tamanho real
[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) Painel13
[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) 110111[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) 398853 Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) 110210[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) 398853 Investimento- São
destinados os devidos locais para onde você aplicará os efeitos do
JavaScript nos fóruns. Neste tutorial é obrigado a marcamos a opção "Em
todas as páginas" para que o mesmo resulte.
[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) 110310[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) 398853 Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) 110410[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) 398853 Habilitar o gerenciamento dos códigos JavaScript Ao
selecionar a opção sim, estará ativando a função páginas Javascript no
seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.


2º - Explorando o código:
Há códigos JavaScript que aprendemos no 1º passo disponíveis para versão PunBB e PhpBB3:

[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) Logo phpBB3
Código:
        jQuery(document).ready(function(){
        jQuery('.lastpost a[href*="/u"]').mouseover(function(){

        jQuery(this).parents('strong').css('position', 'relative');
        jQuery('.perfilInfo').remove();
        jQuery(this).parents('.tcr').css('overflow', 'visible');
        jQuery(this).before('
        <div class="perfilInfo" style="position:absolute;">
        <span class="setPerfil">
        <span>
        <img class="PerfilInfoImg" src="http://forum.teamspeak.com.br/public/style_images/master/profile/default_large.png" />
        <h2>'+jQuery(this).html()+'</h2>

        <p><b>Reputação:</b><span></span></p>
        <p><b>Posts:</b><span></span></p>
        <p><b>Cadastrado:</b><span></span></p>
        <p><b>Pontos:</b><span></span></p>
        <span class="linkPrf"><a href="/privmsg?mode=post&u='+jQuery(this).attr('href').replace('/u', '')+'">Enviar MP</a></span>
        <span class="linkPrf"><a href="'+jQuery(this).attr('href')+'">Ver perfil</a></span>
        </span>

        </span>
        </span>
        </div>
        ');

        jQuery.get(jQuery(this).attr('href'), function(retornoMembro){
        var avtPrf = jQuery('#profile-advanced-right img:first', retornoMembro).attr('src');
        jQuery('.PerfilInfoImg').attr('src', avtPrf);

        var perfil_rank = jQuery('#field_id-14 dd .field_uneditable', retornoMembro).html();
        var perfil_post = jQuery('#field_id-6 dd .field_uneditable', retornoMembro).html();
        var perfil_cad = jQuery('#field_id-4 dd .field_uneditable', retornoMembro).html();
        var perfil_lastV = jQuery('#field_id-13 dd .field_uneditable', retornoMembro).html();

        jQuery('.setPerfil p:eq(0) span').html(perfil_rank);
        jQuery('.setPerfil p:eq(1) span').html(perfil_post);
        jQuery('.setPerfil p:eq(2) span').html(perfil_cad);
        jQuery('.setPerfil p:eq(3) span').html(perfil_lastV);

        });
        //get

        jQuery('.perfilInfo').mouseleave(function(){
        jQuery(this).remove();
        });//mouseleave



        });
        //mouseover



        });

[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) Logo PunBB

Código:
        jQuery(document).ready(function(){
        jQuery('.tcr a[href*="/u"]').mouseover(function(){

        jQuery(this).parents('strong').css('position', 'relative');
        jQuery('.perfilInfo').remove();
        jQuery(this).parents('.tcr').css('overflow', 'visible');
        jQuery(this).before('
        <div class="perfilInfo" style="position:absolute;">
        <span class="setPerfil">
        <span>
        <img class="PerfilInfoImg" src="http://forum.teamspeak.com.br/public/style_images/master/profile/default_large.png" />
        <h2>'+jQuery(this).html()+'</h2>

        <p><b>Rank:</b><span></span></p>
        <p><b>Posts:</b><span></span></p>
        <p><b>Cadastrado:</b><span></span></p>
        <p><b>Pontos:</b><span></span></p>
        <span class="linkPrf"><a href="/privmsg?mode=post&u='+jQuery(this).attr('href').replace('/u', '')+'">Enviar MP</a></span>
        <span class="linkPrf"><a href="'+jQuery(this).attr('href')+'">Ver perfil</a></span>
        </span>

        </span>
        </span>
        </div>
        ');

        jQuery.get(jQuery(this).attr('href'), function(retornoMembro){
        var avtPrf = jQuery('#profile-advanced-right img:first', retornoMembro).attr('src');
        jQuery('.PerfilInfoImg').attr('src', avtPrf);

        var perfil_rank = jQuery('#profile-advanced-right .module .main-content img:eq(1)', retornoMembro).attr('alt');
        var perfil_post = jQuery('#field_id-6 dd', retornoMembro).html();
        var perfil_cad = jQuery('#field_id-4 dd', retornoMembro).html();
        var perfil_lastV = jQuery('#field_id-13 dd', retornoMembro).html();

        jQuery('.setPerfil p:eq(0) span').html(perfil_rank);
        jQuery('.setPerfil p:eq(1) span').html(perfil_post);
        jQuery('.setPerfil p:eq(2) span').html(perfil_cad);
        jQuery('.setPerfil p:eq(3) span').html(perfil_lastV);

        });
        //get

        jQuery('.perfilInfo').mouseleave(function(){
        jQuery(this).remove();
        });//mouseleave



        });
        //mouseover
        });


3º - Código CSS a ser utilizado:
[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) Logo phpBB3
Código:
        .postbody dl.codebox dd{overflow-y:auto;overflow-x:auto;max-height:200px}.postbody dl.codebox pre{display:block;float:left;font-size:12px;line-height:15.199999809265137px;padding:5px;border-right:3px solid #6CE26C;margin-top:2px;color:#A8A5A5;margin-right:5px;font-family:Consolas,'Bitstream Vera Sans Mono','Courier New';padding-right:8px}.postbody dl.codebox code{overflow-y:hidden;overflow-x:hidden;max-height:none;font-family:Consolas,'Bitstream Vera Sans Mono','Courier New';background:url(http://i.imgur.com/eHvfR.png) repeat 0px 0px;padding-top:0px;margin-top:7px}
        .perfilInfo {
        background: url(http://forum.teamspeak.com.br/public/style_images/master/stems/bottomleft.png) no-repeat 98% 0%;
        float: left;
        height: 14.8em;
        left: -38em;
        padding: 16px 0px 20px 5px;
        top: 13px;
        width: 510px;
        z-index: 999;
        }
        .avatar-index img {
        height: 70px;
        float: left;
        margin: 0 4px;
        }
        .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;
        bottom: 4px;
        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: 21.7em;
        position:relative;
        margin: 2px;
        padding: 5px;
        text-align: center;
        text-decoration: none!important;
        transition: all .2s ease-in-out;
        width: 8em;
        }
        .linkPrf:hover{color: #4C4C4C;
        border-color: #9A9A9A;}
        .linkPrf:hover a{color: #4C4C4C;}
        .linkPrf a{color:#616161 !important; font:normal 12px; text-decoration:none;}
        .setPerfil {
        background: rgba(0, 0, 0, 0.3);
        display: block;
        height: 100%;
        padding: 5px;
        padding-bottom: 10px;
        border-radius: 3px;
        }
        .setPerfil > span {
        background: #f9f9f9;
        border-radius: 3px;
        display: block;
        height: 100%;
        padding: 3px;
        border: 1px solid #999;
        }
        .setPerfil .PerfilInfoImg {
        width: 94px;
        height: 166px;
        float: left;
        display: table;
        background: #E1E1E1;
        padding: 3px;
        box-shadow: 1px 1px 0 #CCC;
        }
        .setPerfil p div, .setPerfil span p  span{
        display: inline;
        }

        .setPerfil h2 {
        float: left;
        font: bold 19px "Trebuchet MS";
        display: block;
        background: #E1E1E1;
        width: 380px;
        color:#333;
        padding: 5px;
        text-shadow: 1px 1px 0 white;
        border-radius: 0 10px 0px 0;
        box-shadow: 1px 1px 0 #CCC;
        margin:0 0 10px;
        }
        .setPerfil p {
        margin: 2px 5px;
        float: right;
        display: block;
        background: #F1F1F1;
        width: 350px;
        text-align: left;
        padding: 5px;
        box-shadow: 1px 1px 0 #CCC;
        font-weight: normal;
        border-left: 3px solid #333;
        border-top: 1px solid #333;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        }
        .setPerfil p:hover {
        box-shadow: 1px 1px 0 #9A9A9A;
        }
        .setPerfil p span{display:initial;}

PunBB

Código:
        .perfilInfo {
        background: url(http://forum.teamspeak.com.br/public/style_images/master/stems/bottomleft.png) no-repeat 98% 0%;
        float: left;
        height: 14em;
        left: -38em;
        padding: 16px 0px 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;
        bottom: -14px;
        border-top:none;
        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: 5px;
        text-align: center;
        text-decoration: none!important;
        transition: all .2s ease-in-out;
        width: 8em;
        }
        .linkPrf:hover{color: #4C4C4C;
        border-color: #9A9A9A;}
        .linkPrf:hover a{color: #4C4C4C;}
        .linkPrf a{color:#616161 !important; font:normal 12px; text-decoration:none;}
        .setPerfil {
        background: rgba(0, 0, 0, 0.3);
        display: block;
        height: 100%;
        padding: 5px;
        padding-bottom: 10px;
        border-radius: 3px;
        }
        .setPerfil > span {
        background: #f9f9f9;
        border-radius: 3px;
        display: block;
        height: 100%;
        padding: 3px;
        border: 1px solid #999;
        }
        .setPerfil .PerfilInfoImg {
        width: 94px;
        height: 160px;
        float: left;
        display: table;
        background: #E1E1E1;
        padding: 3px;
        box-shadow: 1px 1px 0 #CCC;
        }
        .setPerfil p div{
        display: inline;
        }
        .setPerfil h2 {
        float: left;
        font: bold 19px "Trebuchet MS";
        display: block;
        background: #E1E1E1;
        width: 382px;
        padding: 5px;
        text-shadow: 1px 1px 0 white;
        border-radius: 0 10px 0px 0;
        box-shadow: 1px 1px 0 #CCC;
        margin-bottom:10px;
        }
        .setPerfil p {
        margin: 2px 5px;
        float: right;
        display: block;
        background: #F1F1F1;
        width: 350px;
        text-align: left;
        padding: 5px;
        box-shadow: 1px 1px 0 #CCC;
        font-weight: normal;
        border-left: 3px solid #333;
        border-top: 1px solid #333;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        }
        .setPerfil p:hover {
        box-shadow: 1px 1px 0 #9A9A9A;
        }
4º - Aplicando o código CSS:
Agora deverá seguir um esquema de onde o código deverá ser adicionado:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS


(carregue na imagem para aumentar)
[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) 1114

Resultado:

(carregue na imagem para aumentar)


[TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB) 2mzh5sn

http://www.zonetoony.net

Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

ZoneToony - Playstation 4, Xbox 720, Windows 8, Smartphones, Android, Divulgue seu Servidor, Gam » Forumeiros » Tutorias e Dicas » [TUTORIAL] Informações de um membro em balão (PhpBB3 e PunBB)

Permissões neste sub-fórum
Não podes responder a tópicos