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
Conectar-se

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Shek
 
Sennior
 
YouTube3
 

Quem está conectado
232 usuários online :: 2 usuários cadastrados, Nenhum Invisível e 230 Visitantes :: 1 Motor de busca

Luiz~, Sennior

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

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 28/03/15, 01:59 am

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
avatar

Vitor-Vicente
Usuário destaque

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

http://mastergz.forumbrasil.net

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

Mensagem por Gaaratsu em 28/03/15, 02:03 am

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
avatar

Gaaratsu
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5542
Pontos Ativos : 6937

http://narutongo.forumeiros.com/

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

Mensagem por Vitor-Vicente em 28/03/15, 02:13 am

http://invitesexpress.omeuforum.net/forum
avatar

Vitor-Vicente
Usuário destaque

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

http://mastergz.forumbrasil.net

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

Mensagem por Gaaratsu em 28/03/15, 02:55 am

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
avatar

Gaaratsu
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/08/2010
Mensagens : 5542
Pontos Ativos : 6937

http://narutongo.forumeiros.com/

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

Mensagem por Vitor-Vicente em 28/03/15, 03:02 am

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

avatar

Vitor-Vicente
Usuário destaque

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

http://mastergz.forumbrasil.net

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

Mensagem por Vitor-Vicente em 29/03/15, 07:22 pm

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.
avatar

Vitor-Vicente
Usuário destaque

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

http://mastergz.forumbrasil.net
  • 0

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

Mensagem por Shek em 31/03/15, 04:41 pm

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


ShekAdmineiro - Fórum dos Fóruns
Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16310
Pontos Ativos : 20809

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 31/03/15, 04:49 pm

ja conseguir resolver esse problema , vlw
avatar

Vitor-Vicente
Usuário destaque

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

http://mastergz.forumbrasil.net

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

Mensagem por Shek em 31/03/15, 04:57 pm

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


ShekAdmineiro - Fórum dos Fóruns
Clicar no botão ou no OBRIGADO não mata ninguém!
avatar

Shek
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16310
Pontos Ativos : 20809

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