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

Esqueci minha senha

Últimos assuntos
» ChatBox estilo FDF
Hoje à(s) 06:49 pm por Luiz

» Logo com descrição/título
Hoje à(s) 05:32 pm por Luiz

» Configurar topici't
Hoje à(s) 05:32 pm por Luiz

» Pretendo favorecer o usuários registados e fazer com que os visitantes se registam.
Hoje à(s) 05:31 pm por Luiz

» Configuração da segurança
Hoje à(s) 04:02 pm por Gaaratsu

» Ícones flutuantes
Hoje à(s) 03:36 pm por Gaaratsu

» Como mudar a cor e imagem desta caixinha?
Hoje à(s) 02:22 pm por Ketholy123

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Luiz
 
Ketholy123
 
iScroll
 
Fou-Lu
 
Matt Shultz
 
Shek
 
Harleen
 
ranzatti
 
APOllO
 
zHugh
 

Quem está conectado
205 usuários online :: 12 usuários cadastrados, 1 Invisível e 192 Visitantes :: 2 Motores de busca

ALF007, DustyRhodes, Fraise, Guzonaro, iScroll, João Victor Aguiar, Ketholy123, Lost154, Luiz, Pedxz, soldado, xDominiC_.

[ Ver toda a lista ]


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

Como fazer notificação 'efeito arrow'?

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

Resolvido Como fazer notificação 'efeito arrow'?

Mensagem por Jean Lucas em 31/12/16, 07:49 pm

Detalhes da questão


Endereço do fórum: http://forum.techlandia.com.br
Versão do fórum: PunBB

Descrição


Gostaria de saber como se faz esse efeito >>> http://prnt.sc/dq5v8p
Está nas notificações/welcome do FDF, mas também já vi efeito parecido em outros lugares. Acredito que não seja muito difícil fazer usando CSS.
avatar

Jean Lucas
Nível 3

Masculino
Inscrito dia : 17/10/2016
Mensagens : 22
Pontos Ativos : 45

Ver perfil do usuário http://forum.techlandia.com.br
  • 0

Resolvido Re: Como fazer notificação 'efeito arrow'?

Mensagem por Harleen em 01/01/17, 08:13 pm

Olá adicione em sua folha CSS o seguinte código

Código:
    #fa_notifications {
        background-color: transparent!important;
        border: 1px solid #fff!important;
        border-radius: 3px!important;
        font-size: 11px!important;
        font-weight: 700!important;
        line-height: 22px!important;
        margin-top: 3px!important;
        padding: 0 6px!important;
        text-decoration: none!important;
        transition: all 200ms ease 0;
    }

    #fa_notifications:hover, #fa_right a.rightHeaderLink:hover > #fa_right.notification > #fa_notifications {
        background-color: #000!important;
        border-color: #fff!important;
        color: #FFF!important;
    }
    #fa_toolbar #fa_right #notif_list {
        background: #FFF none repeat scroll 0 0!important;
        border: 1px solid #DDD!important;
        border-radius: 3px;
        box-shadow: 0 6px 12px rgba(0,0,0,0.176);
        margin-top: 18px!important;
    }
    #fa_toolbar #fa_right #notif_list::before {
        content: url("http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png");
        position: absolute;
        right: 10%;
        top: -10px;
    }

Caso queira personalizar toda a barra leia esses tópicos

Seta http://ajuda.forumeiros.com/t105532-
Seta http://ajuda.forumeiros.com/t105711-

Até e bom 2017 Muito feliz
avatar

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1522
Pontos Ativos : 1972

Ver perfil do usuário https://soulfulbrmusic.forumeiros.com/

Resolvido Re: Como fazer notificação 'efeito arrow'?

Mensagem por Jean Lucas em 02/01/17, 01:23 pm

Muito bom, Harleen. Mas o efeito está apenas na aba NOTIFICAÇÕES. Gostaria que ficasse no WELCOME, LOGIN e REGISTRE-SE também.

Também houve um pequeno probleminha. Quando tiro o mouse da notificação aberta, o background volta a ser transparente, apenas a fonte se mantém. >> http://prnt.sc/dqnbml
avatar

Jean Lucas
Nível 3

Masculino
Inscrito dia : 17/10/2016
Mensagens : 22
Pontos Ativos : 45

Ver perfil do usuário http://forum.techlandia.com.br
  • 0

Resolvido Re: Como fazer notificação 'efeito arrow'?

Mensagem por Harleen em 02/01/17, 06:52 pm

Olá é que eu achei que era só a notificação Envergonhado

Troque o código por esse
Código:
    #fa_right #fa_menu #fa_welcome, #fa_right #fa_notifications, #fa_right a.rightHeaderLink {
        background-color: transparent!important;
        border: 1px solid #0099d9!important;
        border-radius: 3px!important;
        font-size: 11px!important;
        font-weight: 700!important;
        line-height: 22px!important;
        margin-top: 3px!important;
        padding: 0 6px!important;
        text-decoration: none!important;
        transition: all 200ms ease 0;
    }
 
    #fa_right #fa_menu #fa_welcome:hover, #fa_right #fa_notifications:hover, #fa_right a.rightHeaderLink:hover, #fa_right.welcome #fa_menu #fa_welcome, #fa_toolbar > #fa_right.notification > #fa_notifications {
        background-color: #fff!important;
        border-color: #0099d9!important;
        color: #0099d9!important;
    }
    #fa_menulist, #fa_toolbar #fa_right #notif_list {
        background: #FFF none repeat scroll 0 0!important;
        border: 1px solid #0099d9!important;
        border-radius: 3px;
        box-shadow: 0 6px 12px rgba(0,0,0,0.176);
        margin-top: 18px!important;
    }
    #fa_menulist::before, #fa_toolbar #fa_right #notif_list::before {
        content: url("http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png");
        position: absolute;
        right: 10%;
        top: -10px;
    }

Eu usei a cor da barra de busca do seu fórum...

Resultado nos meus testes

http://prntscr.com/dqr3tr
http://prntscr.com/dqr35y
http://prntscr.com/dqr3lq

Até mais
avatar

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1522
Pontos Ativos : 1972

Ver perfil do usuário https://soulfulbrmusic.forumeiros.com/
  • 0

Resolvido Re: Como fazer notificação 'efeito arrow'?

Mensagem por Jean Lucas em 02/01/17, 07:57 pm

Caramba Harleen, fez muito mais do que eu esperava. Muito obrigado mesmo. Só coloquei um espaçamento de 10px entre o WELCOME e o NOTIFICATIONS, pois eles estavam colados. Agora está perfeito. Obrigado mesmo!!

Podem fechar.
avatar

Jean Lucas
Nível 3

Masculino
Inscrito dia : 17/10/2016
Mensagens : 22
Pontos Ativos : 45

Ver perfil do usuário http://forum.techlandia.com.br

Resolvido Re: Como fazer notificação 'efeito arrow'?

Mensagem por Kyo Panda em 02/01/17, 08:40 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".


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4490
Pontos Ativos : 5785

Ver perfil do usuário http://ajuda.forumeiros.com

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