Personalizar menu

5 participantes

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

Tópico resolvido Personalizar menu

Mensagem por Faeel 16.03.15 1:11

Detalhes da dúvida


Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Mozilla Firefox
Imagem :
Imagem da minha dúvida:

Membros afetados : Todos os membros do fórum
Endereço do fórum : http://teste98.forumeiros.com

Descrição do problema

Olá!

gostaria do efeito da imagem no menu do meu fórum, o efeito esta no site da Forumeiros.

Link de onde vi https://www.forumeiros.com/#tab-1

Até mais!
avatar

Faeel
*****

Membro desde : 27/03/2014
Mensagens : 400
Pontos : 606

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Reset 16.03.15 1:53

Saudações,

Aceda à sua Folha de Estilo CSS:
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de Estilo CSS
Código:
Código:
a.mainmenu {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border-bottom: 0px solid rgba(255, 255, 255, 0.6);
padding-bottom: 10px;
margin-top: 0;
color: white;
}

Coloque no inicio de teu CSS.

Até mais.
Reset

Reset
Super Membro

Membro desde : 30/09/2014
Mensagens : 1098
Pontos : 1476

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Faeel 16.03.15 21:34

Olá!

ficou legal, quero mais uma alteração, que a barra vermelha do hover aparecesse na parte de baixo do menu.
http://prntscr.com/6ho1ve
Até mais!
avatar

Faeel
*****

Membro desde : 27/03/2014
Mensagens : 400
Pontos : 606

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Hancki 16.03.15 21:58

Olá!

Adicione mais este CSS:
Código:
#pun-navlinks a:hover {
      border-top: 0px!important;
      border-bottom: 3px solid red !important;
}
#pun-navlinks {
    padding-bottom: 10px !important;
}
Resultado: http://prntscr.com/6hofzd

Hancki
Hancki

Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Faeel 16.03.15 22:20

Olá!

o senhor poderia deixar tipo a imagem? alargar o hover um pouco (pouca coisa) e deixar a barra vermelha daquele tipo da imagem abaixo, e na parte marcada em amarelo deixar por completo em cima o hover.
Imagem: http://prntscr.com/6hor49
Espero que entenda.... Até mais!
avatar

Faeel
*****

Membro desde : 27/03/2014
Mensagens : 400
Pontos : 606

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Hancki 16.03.15 22:21

Então use apenas este trecho do código que já tinha dado:
Código:
#pun-navlinks a:hover {
      border-top: 0px!important;
      border-bottom: 3px solid red !important;
}

Hancki
Hancki

Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Faeel 16.03.15 22:27

Olá!

a parte do hover marcada por amarelo quero que fique por inteira.

Até mais!
avatar

Faeel
*****

Membro desde : 27/03/2014
Mensagens : 400
Pontos : 606

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Hancki 16.03.15 22:35

Agora entendi Feliz

Use mais este:
Código:
#pun-navlinks a {
        padding-top: 18px !important;
}
Resultado: http://prntscr.com/6hoyx9

Hancki
Hancki

Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Faeel 16.03.15 22:38

Olá!


Sim ficou perfeito, mas meio estranho ficou meu menu, poderia adicionar figamos uma pequena linha no meio dos menus ali? ex: http://prntscr.com/6hp075
Ah, e destacar um pouco mais a letra, tipo Assim
Até mais!
avatar

Faeel
*****

Membro desde : 27/03/2014
Mensagens : 400
Pontos : 606

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Hancki 16.03.15 23:08

Com mais este código fica bem bonito até!
Código:
#pun-navlinks a {
        font-weight: bold;
        margin-left: 20px !important;
}
#pun-navlinks li {
        border-right: 1px solid white;
        padding-bottom: 8px !important;
}
Resultado: http://prntscr.com/6hpeg8

Hancki
Hancki

Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Faeel 16.03.15 23:16

Olá!

aqui não ficou muito perfeito, o menu ficou mais para a esquerda das barras, teria como deixar ele centralizado nas barras, e o hover inteiro?
avatar

Faeel
*****

Membro desde : 27/03/2014
Mensagens : 400
Pontos : 606

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Hancki 16.03.15 23:16

Pode mostrar por print como deseja? É mais fácil!
Hancki

Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Faeel 16.03.15 23:23

Assim: http://prntscr.com/6hpkcl
o hover do menu por inteiro como na imagem acima, e o texto dos menus centralizado no seu local.
avatar

Faeel
*****

Membro desde : 27/03/2014
Mensagens : 400
Pontos : 606

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Hancki 17.03.15 0:33

Não consegui fazer com que o fundo ficasse totalmente preenchido até à borda... mas consegui centrar!

Código:
#pun-navlinks li a.mainmenu {
        margin-left: 20px !important;
}

Resultado:
Personalizar menu 8vHdHsO

Hancki
Hancki

Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Faeel 17.03.15 0:57

Utilizei um código para retirar alguns menus, e deu erro, pode arrumar? http://prntscr.com/6hqk8n
avatar

Faeel
*****

Membro desde : 27/03/2014
Mensagens : 400
Pontos : 606

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalizar menu

Mensagem por Sennior 17.03.15 6:51

Saudações! Muito feliz

Adicione o código abaixo no INICIO de teu CSS, creio que terá que retirar o outro que esta com a função hover:
Vá em:
Painel de controle  Seta curta Visualização  Seta curta Cores Seta curta "Aba" Folha CSS.

Adicione no conteúdo:
Código:
#pun-navlinks li:hover {border-bottom: 3px solid #1582C6!important;background: #525151!important;padding-bottom: 19px!important;padding-top: 13px!important;position: relative!important;
}

Salve e Visualize seu fórum. Piscada
Melhores cumprimentos,
Sennior. De bem com a vida
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Faeel 17.03.15 22:33

Quando eu passo o mouse ele não apresenta o hover, mas quando eu clico no hover ele aparece deste modo, http://prntscr.com/6i3fo3
avatar

Faeel
*****

Membro desde : 27/03/2014
Mensagens : 400
Pontos : 606

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Hancki 17.03.15 22:52

Olá!

Vi que parece corrigido: http://prntscr.com/6i3ook
Já não quer mais nenhuma modificação?

Hancki
Hancki

Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Faeel 17.03.15 22:59

Não amigo, nada resolvido, veja aqui o mouse esta fora do link lá http://prntscr.com/6i3r1w e aqui ele esta em cima, eu gostaria que ele ficasse todo como esta imagem http://prntscr.com/6i3r5e.

Espero que entenda... é meio confuso mesmo..

Até!
avatar

Faeel
*****

Membro desde : 27/03/2014
Mensagens : 400
Pontos : 606

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Hancki 17.03.15 23:08

Será assim: http://prntscr.com/6i3vxc ?
Se sim, remova o código dado acima pelo Sennior e coloque este:
Código:
#pun-navlinks li a.mainmenu {
  border: 0px !important;
  background: none !important;
}
#pun-navlinks li:hover {
  cursor:pointer;
  border-left: 1px solid white;
  margin-left: -1px !important;
  background: #525151!important;
  border-bottom: 3px solid red!important;
  padding-bottom: 19px!important;
  padding-top: 13px!important;
  position: relative!important;
}

É isso?

Hancki
Hancki

Hancki
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8195
Pontos : 12250

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Personalizar menu

Mensagem por Sennior 19.03.15 6:13

Ou então... Envergonhado Pode ir no seu CSSe tirar este código e tentar com o meu... Feliz
Código:
#pun-navlinks a:hover {
  background: none repeat scroll 0 0 #4D4D4D;
  border-bottom: 3px solid red!important;
  border-top: 0!important;
  color: #fff!important;
  padding-bottom: 11px!important;
}

Até mais.
Sennior

Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Faeel 19.03.15 21:43

não é oque quero...
avatar

Faeel
*****

Membro desde : 27/03/2014
Mensagens : 400
Pontos : 606

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Personalizar menu

Mensagem por Konai 28.03.15 16:23

Segundo o regulamento do setor de suporte, tópicos com mais de 7 dias devem ser arquivados por abandono do próprio autor. Você poderá obter mais informações lendo este tópico:
Regras para a postagem de dúvidas

Caso ainda tenha dúvidas, aconselhamos que crie um novo tópico no setor de suporte, tendo em vista que este não deve ficar na seção por mais de 7 dias.
Konai

Konai
Membro Entusiasta

Membro desde : 07/08/2010
Mensagens : 6045
Pontos : 7550

http://narutongo.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos