Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
283 usuários online :: 8 usuários cadastrados, 1 Invisível e 274 Visitantes :: 1 Motor de busca

Connor R., Daniel Z, Fou-Lu, Harleen, Luiz~, Solaria Magnum, Stewart, William_iHarDz

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

como fazer aparecer um quadro ao passar o mouse

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

Resolvido como fazer aparecer um quadro ao passar o mouse

Mensagem por Vitor-Vicente em Sab 28 Mar 2015 - 4:59

Detalhes da dúvida


Versão do fórum : phpBB3
Nível de acesso : Administrador
Navegador usado : Opera
Membros afetados : Todos os membros do fórum
Endereço do fórum : http://mastergz.forumbrasil.net

Descrição do problema

ola , como fazer esse efeito

http://prntscr.com/6maa99

Vitor-Vicente
Usuário destaque

Masculino
Inscrito dia : 19/02/2015
Mensagens : 552
Pontos Ativos : 1515

http://mastergz.forumbrasil.net

Resolvido Re: como fazer aparecer um quadro ao passar o mouse

Mensagem por Gaaratsu em Sab 28 Mar 2015 - 5:03

Saudações!

Seria isto: :seta2: [TUTORIAL] Visualizar o perfil em modo hover

Se não, me mande o endereço do fórum que viu tal efeito!

Até! Feliz

Gaaratsu
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5541
Pontos Ativos : 9333

http://narutongo.forumeiros.com/

Resolvido Re: como fazer aparecer um quadro ao passar o mouse

Mensagem por Vitor-Vicente em Sab 28 Mar 2015 - 5:13

http://invitesexpress.omeuforum.net/forum

Vitor-Vicente
Usuário destaque

Masculino
Inscrito dia : 19/02/2015
Mensagens : 552
Pontos Ativos : 1515

http://mastergz.forumbrasil.net

Resolvido Re: como fazer aparecer um quadro ao passar o mouse

Mensagem por Gaaratsu em Sab 28 Mar 2015 - 5:55

Faça assim, aceda à: CPainel >> Módulos >> HTML & JAVASCRIPT >>> Gestão dos códigos JavaScript > Adicionar Criar um novo JavaScript
Com o investimento "No índice", coloque este código no conteúdo:
Código:
jQuery(document).ready(function() {
    $('dd.lastpost a[href*="/u"]').mouseover(function() {
        $(this).parents('span').css('position', 'absolute');
        $('.cp_geral').remove();
        $(this).parents('dd.lastpost').css('overflow', 'visible');
        $(this).before('<style>@import url("https://googledrive.com/host/0B3OkiMRv7LXpRTRTS01mLXJVRXc#icones-elegantes-Cepheus.css");</style><a href="' + $(this).attr('href') + '"><div class="cp_geral" style="position:absolute;"><div class="cp_box"> <div class="cp_capa"> <div class="cp_capa-avatar"><img src="http://i.imgur.com/1rHWZUQ.gif" /></div> <div class="cp_capa-nick"> <strong>' + $(this).html() + '</strong> <span class="span_capa-nick"></span> </div> </div> <div class="cp_info"> <div class="cp_info-botoes"> <div class="cp_info-botoes-post"><strong></strong><span>posts</span></div> <div class="cp_info-botoes-rep"><strong></strong><span>reputação</span></div> <div class="cp_info-botoes-data"><strong></strong><span>cadastro</span></div> </div> </div> <div class="cp_icones"> <div class="cp_mp"><a href="/privmsg?mode=post&u=' + $(this).attr('href').replace('/u', '') + '">MP</a></div> <div class="cp_perfil"><a href="' + $(this).attr('href') + '">PERFIL</a></div> </div></div> </div></a>');
        $.get($(this).attr('href'), function(cps) {
            $('.span_capa-nick').html($('#profile-advanced-right .module div[style^="text-align:center;"]:eq(0)', cps).html());
            $('.cp_capa-avatar').html($('#profile-advanced-right .module div[style^="text-align:center;"]:eq(0)', cps).html());
            $('.cp_info-botoes-data strong').html($('#field_id-4 dd div', cps).html());
            $('.cp_info-botoes-post strong').html($('#field_id-6 dd div', cps).html());
            $('.cp_info-botoes-rep strong').html($('#field_id-14 dd div', cps).html());

        });

        $('.cp_geral').mouseleave(function() {
            $(this).remove();
        });



    });
});

Depois em: [i]CPainel >> Visualização >> Imagens e Cores > Cores >>> Folha de estilo CSS

Cole no início este código:
Código:
.cp_geral { width:340px; padding-top:50px; transition:all 150ms linear; } .cp_box { width:340px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:1px 1px 12px 0 rgba(50,50,50,0.27); -moz-box-shadow:1px 1px 12px 0 rgba(50,50,50,0.27); box-shadow:1px 1px 12px 0 rgba(50,50,50,0.27); left:-120px; top:-13px; background:#fff; z-index:999; position:absolute; transition:all 150ms linear; margin:50px; } .cp_capa { background:#263340 url(http://i.imgur.com/6AnKAdN.png) right no-repeat; height:105px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border-top-left-radius:10px; border-top-right-radius:10px; padding:5px 5px 0; } .cp_capa:before { content:""; display:inline-block; vertical-align:middle; margin-left:74px; width:0; height:0; position:absolute; top:-15px; border-left:15px solid transparent; border-right:15px solid transparent; border-bottom:15px solid #263340; } .cp_capa-avatar { -moz-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; border:1px solid #d8d8d8; height:75px; width:75px; text-align:center; float:left; font-size:0; padding:7px; } .cp_capa-avatar img { -moz-border-radius:100%; -webkit-border-radius:100%; border:0 solid #d8d8d8; border-radius:100%; height:75px; width:75px; }.cp_capa-avatar img:nth-of-type(2){display:none} .cp_capa-nick { width:215px; height:75px; float:left; padding:25px 0 0 15px; } .cp_capa-nick strong { color:#fff!important; font-size:25px; font-weight:400!important; display:block; } .cp_info { text-align:center; padding:10px; } .cp_info-botoes { height:60px; width:320px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; text-decoration:none; } .cp_info-botoes a { text-decoration:none; } .cp_info-botoes-post { background:#ecf0f1; width:85px; height:53px; -webkit-border-top-left-radius:10px; -webkit-border-bottom-left-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-bottomleft:10px; border-top-left-radius:10px; border-bottom-left-radius:10px; text-transform:uppercase; border-bottom:7px solid #bec3c7; float:left; } .cp_info-botoes-rep { background:#6bbd21; width:110px; height:53px; text-transform:uppercase; border-bottom:7px solid #68a72f; float:left; } .cp_info-botoes-rep strong { padding-top:8px; color:#fff; display:block; font-size:20px; } .cp_info-botoes-rep span { color:#fff; font-size:12px; } .cp_info-botoes-data strong { padding-top:8px; color:#666; display:block; font-size:15px; } .cp_info-botoes-data { background:#ecf0f1; width:125px; height:53px; -webkit-border-top-right-radius:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topright:10px; -moz-border-radius-bottomright:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; text-transform:uppercase; border-bottom:7px solid #bec3c7; float:left; } .cp_info-botoes-post,.cp_info-botoes-rep,.cp_info-botoes-data { transition:all 150ms linear; } .cp_info-botoes-post:hover,.cp_info-botoes-rep:hover,.cp_info-botoes-data:hover { opacity:0.65; -moz-opacity:0.65; filter:alpha(opacity=65); } .cp_icones { background:#ecf0f1; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; color:#bec3c7; height:20px; padding:5px; } .cp_icones a { font-size:12px; text-decoration:none; color:#666; } .cp_mp,.cp_perfil { float:left; padding-left:10px; transition:all 150ms linear; } .cp_mp:hover { float:left; padding-left:10px; color:#c1392b; } .cp_mp:before { content:"\f003"; font-family:FontAwesome; padding:0 4px; } .cp_perfil:before { content:"\f007"; font-family:FontAwesome; padding:0 4px; } .cp_perfil:hover { padding-left:10px; color:#6bbd21; } .cp_mais { width:100%; } .cp_capa-avatar br,.span_capa-nick img,.span_capa-nick br { display:none; } .cp_capa-nick span,.span_capa-nick { color:#fff!important; font-size:12px; line-height:22px; font-weight:400!important; float:none!important} .cp_info-botoes-post strong { padding-top:8px; color:#666; display:block; font-size:20px; } .cp_info-botoes-post span,.cp_info-botoes-data span { color:#868585; font-size:11px; }

Até! Feliz

Gaaratsu
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5541
Pontos Ativos : 9333

http://narutongo.forumeiros.com/

Resolvido Re: como fazer aparecer um quadro ao passar o mouse

Mensagem por Vitor-Vicente em Sab 28 Mar 2015 - 6:02

ta quase bom, ele ficou meio transparente e o quadro ficou cortado nao apareceu o quadro todo pra fora

http://prntscr.com/6maoo2

eu percebir ele ta atraz dos retangulos das catergorias, o ultimo ate funciona melhor pq fica de fora do retangulo

http://prntscr.com/6masp9


Vitor-Vicente
Usuário destaque

Masculino
Inscrito dia : 19/02/2015
Mensagens : 552
Pontos Ativos : 1515

http://mastergz.forumbrasil.net

Resolvido Re: como fazer aparecer um quadro ao passar o mouse

Mensagem por Vitor-Vicente em Dom 29 Mar 2015 - 23:22

up

um amigo me passou o codigo pra versao PunBB que o quadro vem pra frente, pq tbm nao vinha mas agora foi ajeitada

sera que ajuda , pra adaptar na versao PhpBB3 pro quadro vim pra frente.

Vitor-Vicente
Usuário destaque

Masculino
Inscrito dia : 19/02/2015
Mensagens : 552
Pontos Ativos : 1515

http://mastergz.forumbrasil.net
  • 0

Resolvido Re: como fazer aparecer um quadro ao passar o mouse

Mensagem por Shek Crowley em Ter 31 Mar 2015 - 20:41

Olá!

Poderia ser mais específico em relação ao "vem pra frente" que citou? O código mencionado não é o mesmo do que "seu amigo lhe passou"? O código acima lhe ajuda a sanar a dúvida? Qual é o problema causado?

Atenciosamente,
Shek



Shek Crowley
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 15652
Pontos Ativos : 23100

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: como fazer aparecer um quadro ao passar o mouse

Mensagem por Vitor-Vicente em Ter 31 Mar 2015 - 20:49

ja conseguir resolver esse problema , vlw

Vitor-Vicente
Usuário destaque

Masculino
Inscrito dia : 19/02/2015
Mensagens : 552
Pontos Ativos : 1515

http://mastergz.forumbrasil.net

Resolvido Re: como fazer aparecer um quadro ao passar o mouse

Mensagem por Shek Crowley em Ter 31 Mar 2015 - 20:57

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.



Shek Crowley
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 15652
Pontos Ativos : 23100

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

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