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
» (PEDIDO) logo
Hoje à(s) 02:33 pm por APOllO

» MP para administradores
Hoje à(s) 02:31 pm por Pedxz

» Como trasnferir um site do wix para forumeiros?
Hoje à(s) 02:18 pm por iScroll

» Como fazer sub entrada?
Hoje à(s) 02:04 pm por Czins

» Como ocultar iframe de um tópico para visitantes
Hoje à(s) 01:46 pm por Luiz

» Caixa de Login
Hoje à(s) 01:20 pm por iScroll

» Personalizar cabeçalho
Hoje à(s) 01:12 pm por iScroll

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Harleen
 
Kyo Panda
 
APOllO
 
odelgado
 
Kyko
 
mrvisible
 
iScroll
 
Shek
 
Luiz
 
rlmac
 

Quem está conectado
281 usuários online :: 6 usuários cadastrados, Nenhum Invisível e 275 Visitantes :: 3 Motores de busca

APOllO, Czins, iScroll, Luiz, Pedxz, Shek

[ Ver toda a lista ]


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

Informações do usuário em modo hover

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

Resolvido Informações do usuário em modo hover

Mensagem por YouTube3 em 24/02/16, 07:31 pm

Detalhes da questão


Endereço do fórum: http://white.forumeiros.com/
Versão do fórum: PunBB

Descrição


Olá, Queria saber se e Possivel botar um MouseFlat nesse Estilo em meu fórum

EXEMPLO: http://i.imgur.com/dYNljDI.png

Fórum onde vi: http://ipsfocus.net/4x/


Última edição por Zeek_Krieger em 01/03/16, 10:24 pm, editado 1 vez(es)
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1080
Pontos Ativos : 1543

http://Ajuda.Forumeiros.com
  • 0

Resolvido Re: Informações do usuário em modo hover

Mensagem por Fraise em 24/02/16, 08:10 pm

Olá @Zeek_Krieger!

Aceda a Painel de Controle Seta Módulos Seta Gestão dos códigos JavaScript e crie um novo javascript investido 'Em todas as páginas' utilizando o seguinte código:
Código:
jQuery(document).ready(function() {
    $('.tcr a[href*="/u"]').mouseover(function() {
        $(this).parents('strong').css('position', 'left');
        $('.cp_geral').remove();
        $(this).parents('.tcr').css('overflow', 'visible');
        $(this).before('<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 .main-content.clearfix.center:eq(0)', cps).html());
            $('.cp_capa-avatar').html($('#profile-advanced-right .main-content.clearfix.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();
        });



    });
});

Em seguida, aceda a Painel de Controle Seta Visualização Seta Cores Seta Folha de estilo CSS e cole lá o seguinte 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; }

Abraços.
Fraise

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4979
Pontos Ativos : 6634

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Informações do usuário em modo hover

Mensagem por YouTube3 em 24/02/16, 08:39 pm

Olá, @Fraise então ficou outro estilo queria saber se tem como ficar exatamente como está na imagem ?

como ficou: http://i.imgur.com/LqHPGmD.png

como eu quero: http://i.imgur.com/OCjPPfh.png
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1080
Pontos Ativos : 1543

http://Ajuda.Forumeiros.com

Resolvido Re: Informações do usuário em modo hover

Mensagem por YouTube3 em 26/02/16, 08:48 pm

avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1080
Pontos Ativos : 1543

http://Ajuda.Forumeiros.com

Resolvido Re: Informações do usuário em modo hover

Mensagem por YouTube3 em 28/02/16, 08:29 pm

avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1080
Pontos Ativos : 1543

http://Ajuda.Forumeiros.com

Resolvido Re: Informações do usuário em modo hover

Mensagem por j.lcm66 em 28/02/16, 10:41 pm

Boa questão.
avatar

j.lcm66
Novo membro

Masculino
Inscrito dia : 28/02/2016
Mensagens : 1
Pontos Ativos : 1

http://www.clubedotempradf.com
  • 0

Resolvido Re: Informações do usuário em modo hover

Mensagem por Fraise em 29/02/16, 09:00 pm

@j.lcm66 escreveu:Boa questão.
Olá!

Seja bem-vindo ao nosso fórum de Suporte! Como acabou de se inscrever, veja aqui alguns links importantes a saber:

Por gentileza, aconselho que você leia o regulamento do FdF:
Seta http://ajuda.forumeiros.com/t82-regras-do-forum-dos-foruns-fdf

Acabou de infrigir a regra 1.7, por favor, tome mais atenção da próxima vez. Envergonhado Muito feliz



Autor, quanto à sua questão, isso é demasiado complexo para mim, vamos esperar para ver se alguém assume o seu tópico. Muito feliz
@RafaelS. @MateusAnjosV

Abraços.
Fraise
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4979
Pontos Ativos : 6634

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Resolvido Re: Informações do usuário em modo hover

Mensagem por YouTube3 em 29/02/16, 11:18 pm

Olá! Amigo @Fraise sem problemas obrigado, pela sua ajuda
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1080
Pontos Ativos : 1543

http://Ajuda.Forumeiros.com

Resolvido Re: Informações do usuário em modo hover

Mensagem por YouTube3 em 01/03/16, 09:15 pm

Pode fechar este tópico @Fraise !
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1080
Pontos Ativos : 1543

http://Ajuda.Forumeiros.com

Resolvido Re: Informações do usuário em modo hover

Mensagem por Noiadofuk em 01/03/16, 10:33 pm

Topico está marcado como resolvido, se foi resolvido mesmo, pode me passar o codigo? estava interessado em saber, algo bem complexo pelo que eu vi, parecido com a usada da plataforma ipb
avatar

Noiadofuk
Nível 7

Masculino
Inscrito dia : 07/01/2016
Mensagens : 90
Pontos Ativos : 137

http://brasilplaylife-samp.forumeiros.com/

Resolvido Re: Informações do usuário em modo hover

Mensagem por YouTube3 em 01/03/16, 11:22 pm

Olá! @Noiadofuk eu desisti do MouseFlat Estilo IPS

Abraços.
Zeek
avatar

YouTube3
Membro do Fórum

Masculino
Inscrito dia : 04/01/2015
Mensagens : 1080
Pontos Ativos : 1543

http://Ajuda.Forumeiros.com

Resolvido Re: Informações do usuário em modo hover

Mensagem por Fraise em 02/03/16, 06:54 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".
avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4979
Pontos Ativos : 6634

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

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