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
» Página HTML
Hoje à(s) 21:34 por Kyo Panda

» Colocar pagina da web no Portal:
Hoje à(s) 20:44 por Kyo Panda

» Tela de Login
Hoje à(s) 20:00 por Luiz~

» Banner do fórum
Hoje à(s) 19:54 por Kyo Panda

» Alinhamento e virgulas dos sub fóruns
Hoje à(s) 19:02 por Kyo Panda

» Lista de imagens com múltiplas escolhas
Hoje à(s) 17:07 por Luiz~

» Ativar certificado SSL
Hoje à(s) 17:07 por Kyo Panda

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
217 usuários online :: 6 usuários cadastrados, 1 Invisível e 210 Visitantes :: 1 Motor de busca

Br_SP_Rodrigo, Danilo Costa, Holkis, Kyo Panda, Luiz~, Roger_Crazzy

[ Ver toda a lista ]


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

Menu Estilo ao do FdF

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

Resolvido Menu Estilo ao do FdF

Mensagem por ShaDownS em Dom 4 Out 2015 - 16:02

Detalhes da questão


Endereço do fórum: http://fairytailcelestial.forumeiros.com
Versão do fórum: PhpBB3

Descrição


Oi pessoal,

Gostaria de um menu no estilo ao do FdF.
Porém, com a fonte Sans-serif se possível.

Obrigado pela atenção, abraços o/
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues
  • 0

Resolvido Re: Menu Estilo ao do FdF

Mensagem por Fraise em Dom 4 Out 2015 - 16:05

Olá!

Adicione à sua folha de estilos:
Código:
#page-header .navbar .linklist {
    background: #2D3134;
    border: none;
    margin: -9px -10px 0;
}
ul.navlinks {
    border-bottom: 1px solid #fff;
    font-weight: 700;
    text-align: center;
}
ul.linklist li {
    display: inline;
    font-size: 1.1em;
    line-height: 2.2em;
    list-style-type: none;
    width: auto;
}
#page-header .navbar .linklist:hover {
border-bottom:1px solid #369FCF;
}

Até mais.

avatar

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4977
Pontos Ativos : 6632

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

Resolvido Re: Menu Estilo ao do FdF

Mensagem por ShaDownS em Dom 4 Out 2015 - 16:19

O menu ficou com a altura pequena e os links estão vermelhos.
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Menu Estilo ao do FdF

Mensagem por Sennior em Dom 4 Out 2015 - 16:27

Saudações!

Adicione mais este código CSS:
Código:
a.mainmenu {
    background: url(http://i18.servimg.com/u/f18/18/45/41/65/nav10.png) repeat-x 0 45px;
    color: #FFF;
    display: inline-block;
    font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    padding: 0 12px;
    transition: 250ms;
}

Até mais.
Sennior
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16261
Pontos Ativos : 20762

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Menu Estilo ao do FdF

Mensagem por ShaDownS em Dom 4 Out 2015 - 16:47

Ótimo!

Mas tem aquela borda azul espessa que aparece abaixo de cada menu ao clicar aqui no FdF.
No meu fórum ela fica estreita e também, em todo o menu em vez de apena abaixo do link do menu.

Abraços o/
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Menu Estilo ao do FdF

Mensagem por Sennior em Dom 4 Out 2015 - 16:52

Adicione mais este código:
Código:
a.mainmenu:hover {
    border-bottom: 4px solid #0372be;
}

Resulta?
Abraços.
Sennior
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16261
Pontos Ativos : 20762

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Menu Estilo ao do FdF

Mensagem por ShaDownS em Dom 4 Out 2015 - 17:19

Perfeito!
Muito bom mesmo.

Ei, eu percebi uma diferença. O menu da FdF, ele vai de uma ponta do quadro intermediário até a outra.
Consegue um código pra fazer isso?
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Menu Estilo ao do FdF

Mensagem por Sennior em Dom 4 Out 2015 - 17:21

Saudações!

Acima de todos os códigos CSS, adicione este:
Código:
#page-header .navbar .linklist {margin: -9px -16px 0!important;}

Salve e visualize.
Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16261
Pontos Ativos : 20762

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Menu Estilo ao do FdF

Mensagem por ShaDownS em Dom 4 Out 2015 - 17:27

O menu sumiu Em choque
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Menu Estilo ao do FdF

Mensagem por Sennior em Dom 4 Out 2015 - 17:30

Boas,

Normal Rindo , Mande-nos o teu CSS e retire o código que eu mandei você pôr.
Até mais.
Sennior
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16261
Pontos Ativos : 20762

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Menu Estilo ao do FdF

Mensagem por ShaDownS em Dom 4 Out 2015 - 17:38

Está aqui.

Código:
#search-box {
  display: none;
}
 
#chatbox_header {
background: #dd6666;
border-top: 1.5px solid lightgray;
border-left: 1.5px solid lightgray;
border-right: 1.5px solid lightgray;
}
 
h2.chatbox-title a.chat-title {
text-align: center;
text-transform: uppercase;
font-family: Trebuchet MS;
}
 
#chatbox_main_options a {
border: 1.5px solid lightgray;
background: #cc3333;
color: white;
font-family: Trebuchet MS;
padding: 3px;
}
 
#chatbox_footer  {
background:#dd6666;
border-bottom: 1.5px solid lightgray;
border-right: 1.5px solid lightgray;
border-left: 1.5px solid lightgray;
}
 
#wrap {
border: 1.5px solid lightgray;
width: 96%;
}
 
#left .module .h3 {
    background: #DD6666;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.247) inset, 0 1px 3px rgba(0,0,0,0.298), 0 2px 0 rgba(255,255,255,0.2) inset;
    color: #FFF!important;
    cursor: default!important;
    font-family: Arial;
    font-size: 10px;
    font-style: normal;
    font-variant: normal;
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Menu Estilo ao do FdF

Mensagem por ShaDownS em Dom 4 Out 2015 - 17:40

Aqui está o resto.
Código:

#left .module {
  border: 1.5px solid lightgray;
  background: #FAFAFA;
}
 
.forabg {
padding-left: 0px;
padding-right: 0px;
padding-bottom: -10pxx;
border: 1.5px solid lightgray;
background: #dd6666;
}
 
li.row {
border-bottom: 1.5px solid lightgray;
border-top: 1.5px solid lightgray;
border-left: none;
border-right: none;
background: #fafafa;
}
 
ul.navlinks {
    border-bottom: 1px solid #fff;
    font-weight: 700;
    text-align: center;
}
 
ul.linklist li {
    display: inline;
    font-size: 1.1em;
    line-height: 2.2em;


Desculpe mas estou usando celular  Rindo
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Menu Estilo ao do FdF

Mensagem por Sennior em Dom 4 Out 2015 - 18:24

Saudações!

Altere por este:
Código:
.navbar {
    background-color: #2D3134!important;

}
.navbar {
    width: auto!important;
    margin-left: -6px!important;
    margin-right: -6px!important;
    left: 0!important;
    right: 0!important;
}
ul.navlinks {
    border-bottom: transparent!important;
    font-weight: 700;
    text-align: center;
}
#search-box {
  display: none;
}
 
#chatbox_header {
background: #dd6666;
border-top: 1.5px solid lightgray;
border-left: 1.5px solid lightgray;
border-right: 1.5px solid lightgray;
}
 
h2.chatbox-title a.chat-title {
text-align: center;
text-transform: uppercase;
font-family: Trebuchet MS;
}
 
#chatbox_main_options a {
border: 1.5px solid lightgray;
background: #cc3333;
color: white;
font-family: Trebuchet MS;
padding: 3px;
}
 
#chatbox_footer  {
background:#dd6666;
border-bottom: 1.5px solid lightgray;
border-right: 1.5px solid lightgray;
border-left: 1.5px solid lightgray;
}
 
#wrap {
border: 1.5px solid lightgray;
width: 96%;
}
 
#left .module .h3 {
    background: #DD6666;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.247) inset, 0 1px 3px rgba(0,0,0,0.298), 0 2px 0 rgba(255,255,255,0.2) inset;
    color: #FFF!important;
    cursor: default!important;
    font-family: Arial;
    font-size: 10px;
    font-style: normal;
    font-variant: normal;

#left .module {
  border: 1.5px solid lightgray;
  background: #FAFAFA;
}
 
.forabg {
padding-left: 0px;
padding-right: 0px;
padding-bottom: -10pxx;
border: 1.5px solid lightgray;
background: #dd6666;
}
 
li.row {
border-bottom: 1.5px solid lightgray;
border-top: 1.5px solid lightgray;
border-left: none;
border-right: none;
background: #fafafa;
}
 
ul.navlinks {
    border-bottom: 1px solid #fff;
    font-weight: 700;
    text-align: center;
}
 
ul.linklist li {
    display: inline;
    font-size: 1.1em;
    line-height: 2.2em;

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16261
Pontos Ativos : 20762

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Menu Estilo ao do FdF

Mensagem por ShaDownS em Dom 4 Out 2015 - 18:57

O CSS nao está funcionando.
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Menu Estilo ao do FdF

Mensagem por Sennior em Dom 4 Out 2015 - 19:00

Saudações!

Amigo, esta pelo celular? Seria bom se fizesse essas alterações no computador.
Altere novamente o código:
Código:
.navbar {
    background-color: #2D3134!important;

}
a.mainmenu:hover {
    border-bottom: 4px solid #0372be;
}
a.mainmenu {
    background: url(http://i18.servimg.com/u/f18/18/45/41/65/nav10.png) repeat-x 0 45px;
    color: #FFF;
    display: inline-block;
    font-family: "Trebuchet MS", Arial, Verdana, Sans-serif;
    font-size: 13px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    padding: 0 12px;
    transition: 250ms;
}
.navbar {
    width: auto!important;
    margin-left: -6px!important;
    margin-right: -6px!important;
    left: 0!important;
    right: 0!important;
}
ul.navlinks {
    border-bottom: transparent!important;
    font-weight: 700;
    text-align: center;
}
#search-box {
  display: none;
}
 
#chatbox_header {
background: #dd6666;
border-top: 1.5px solid lightgray;
border-left: 1.5px solid lightgray;
border-right: 1.5px solid lightgray;
}
 
h2.chatbox-title a.chat-title {
text-align: center;
text-transform: uppercase;
font-family: Trebuchet MS;
}
 
#chatbox_main_options a {
border: 1.5px solid lightgray;
background: #cc3333;
color: white;
font-family: Trebuchet MS;
padding: 3px;
}
 
#chatbox_footer  {
background:#dd6666;
border-bottom: 1.5px solid lightgray;
border-right: 1.5px solid lightgray;
border-left: 1.5px solid lightgray;
}
 
#wrap {
border: 1.5px solid lightgray;
width: 96%;
}
 
#left .module .h3 {
    background: #DD6666;
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.247) inset, 0 1px 3px rgba(0,0,0,0.298), 0 2px 0 rgba(255,255,255,0.2) inset;
    color: #FFF!important;
    cursor: default!important;
    font-family: Arial;
    font-size: 10px;
    font-style: normal;
    font-variant: normal;

#left .module {
  border: 1.5px solid lightgray;
  background: #FAFAFA;
}
 
.forabg {
padding-left: 0px;
padding-right: 0px;
padding-bottom: -10pxx;
border: 1.5px solid lightgray;
background: #dd6666;
}
 
li.row {
border-bottom: 1.5px solid lightgray;
border-top: 1.5px solid lightgray;
border-left: none;
border-right: none;
background: #fafafa;
}
 
ul.navlinks {
    border-bottom: 1px solid #fff;
    font-weight: 700;
    text-align: center;
}
 
ul.linklist li {
    display: inline;
    font-size: 1.1em;
    line-height: 2.2em;

Abraços.
Sennior
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16261
Pontos Ativos : 20762

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Menu Estilo ao do FdF

Mensagem por ShaDownS em Dom 4 Out 2015 - 19:03

Desculpe, mas eu utilizo apenas celular atualmente. 
Aí fica difícil.


Última edição por Cloud' em Dom 4 Out 2015 - 19:12, editado 1 vez(es)
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Menu Estilo ao do FdF

Mensagem por Sennior em Dom 4 Out 2015 - 19:07

Saudações,

Alterou o código CSS como eu pedi?
Houve alterações?

Até mais.
Sennior
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16261
Pontos Ativos : 20762

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Menu Estilo ao do FdF

Mensagem por ShaDownS em Dom 4 Out 2015 - 19:50

Ótimo!!!

Mas também personalizou os links do rodapé huh
Porém a cor dos links estão vermelhos.
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Menu Estilo ao do FdF

Mensagem por Sennior em Dom 4 Out 2015 - 20:28

Coloque o código abaixo no inicio de teu CSS:
Código:
ul.linklist.clearfix a {
    color: white;
}

Até mais.
Sennior
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16261
Pontos Ativos : 20762

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Menu Estilo ao do FdF

Mensagem por ShaDownS em Seg 5 Out 2015 - 3:25

Perfeito!
Pó de fechar o tópico Positivo
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Menu Estilo ao do FdF

Mensagem por Sennior em Seg 5 Out 2015 - 18:16

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

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16261
Pontos Ativos : 20762

http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

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