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
Os membros mais ativos da semana
Shek Crowley
 
Kyo Panda
 
Yeshua
 
Fou-Lu
 
Kyou
 
Smoke.xX
 
Holkis
 
CharlesIE1H
 
TZero
 
kakakoro
 

Quem está conectado
251 usuários online :: 9 usuários cadastrados, Nenhum Invisível e 242 Visitantes :: 1 Motor de busca

Connor R., Daemon, Draconian, Hidan HZ, Luiz~, Shek Crowley, TZero, vitorsali, xBreninho_.

[ Ver toda a lista ]


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

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 Sab 31 Dez 2016 - 21:49

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.

Jean Lucas
Nível 3

Masculino
Inscrito dia : 17/10/2016
Mensagens : 20
Pontos Ativos : 166

http://forum.techlandia.com.br
  • 0

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

Mensagem por Harleen em Dom 1 Jan 2017 - 22:13

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

Harleen
Usuário destaque

Feminino
Inscrito dia : 09/07/2012
Mensagens : 631
Pontos Ativos : 2675

http://antenadogames.forumeiros.com/

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

Mensagem por Jean Lucas em Seg 2 Jan 2017 - 15:23

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

Jean Lucas
Nível 3

Masculino
Inscrito dia : 17/10/2016
Mensagens : 20
Pontos Ativos : 166

http://forum.techlandia.com.br
  • 0

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

Mensagem por Harleen em Seg 2 Jan 2017 - 20:52

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

Harleen
Usuário destaque

Feminino
Inscrito dia : 09/07/2012
Mensagens : 631
Pontos Ativos : 2675

http://antenadogames.forumeiros.com/
  • 0

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

Mensagem por Jean Lucas em Seg 2 Jan 2017 - 21:57

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.

Jean Lucas
Nível 3

Masculino
Inscrito dia : 17/10/2016
Mensagens : 20
Pontos Ativos : 166

http://forum.techlandia.com.br

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

Mensagem por Kyo Panda em Seg 2 Jan 2017 - 22:40

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".

Kyo Panda
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2247
Pontos Ativos : 5150

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