Alterar o menu de navegação do fórum!

[Brunelli]

Detalhes da questão

Endereço do fórum: http://brunelli-mateus.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Eu quero trocar o menu do fórum na parte de cima, esse aqui: http://prntscr.com/j504eo , gostaria muito de deixar assim: http://prntscr.com/j504lm porém preto.

[Fraise]

Olá!

Antes de prosseguirmos, por gentileza aceda a Painel de Controle Visualização Cabeçalho & Navegação e em "Exibir apenas as imagens no menu de navegação" marque a opção Não.

Atenciosamente,
Fraise.

Tópico movido de 'Questões sobre o painel de administração' para 'Questões sobre a aparência do fórum'.

[Brunelli]

Olá!

Antes de prosseguirmos, por gentileza aceda a Painel de Controle Visualização Cabeçalho & Navegação e em "Exibir apenas as imagens no menu de navegação" marque a opção Não.

Feito!

[Fraise]

Ok! Adicione em sua folha de estilos:

Código:

ul.linklist.navlinks {
    background: #000!important;
    border: 0 solid #000;
    border-bottom: 4px solid #000;
    border-radius: 0!important;
    height: 40px;
    margin-left: -16px;
    padding: 0 16px;
    width: 100%;
    text-align: center !important;
    overflow: inherit!important;
    padding-top: 0;
}

.navbar .linklist.navlinks a {
    background: transparent;
    color: #FFF;
    font-family: Trebuchet MS!important;
    font-size: 15px!important;
    padding: 7px!important;
    text-shadow: 1px 1px 0 #242424;
}

Atenciosamente,
Fraise.

[Brunelli]

Consegui adicionar aqui, porém ficou meio "parado" tipo olha a barra de menu desse fórum aqui: http://gsf-nwd.forumeiros.com/ (que é meu kk) tem como deixar igual o dela com esse efeito ao passar o mouse em cima? quando põe o mouse em cima o nome fica preto aí poderia por um azul claro, mas tem como fazer parecido com a barra de menu desse meu fórum?

[Fraise]

Complemente com este código:

Código:

.navbar .linklist.navlinks a:hover {
    background-color: transparent!important;
    border-top: 0 solid transparent;
    color: blue!important;
    font-family: Trebuchet MS!important;
    font-size: 20px!important;
}

Atenciosamente,
Fraise.

[Brunelli]

Isso, ficou mais ou menos como eu queria, está bem bom assim.
Você consegue fazer as opções tipo: "Inicio" e etc ... descerem um pouco? pra centralizar com a barra do menu, pra ficar mais bonito?!

[RafaelS.]

Olá!

Deixo aqui a minha sugestão:

Código:

.navbar {
    background-color: #fff;
    clear: both;
    padding: 0 10px;
}
#page-header ul.linklist.navlinks {
    color: white;
    background-color: #000;
    border: 0 solid #000;
    border-bottom: 4px solid #007eff;
    height: 40px;
    margin-left: -16px;
    padding: 0 16px;
    width: 100%;
    text-align: center;
}
.navbar ul.linklist li {
    line-height: 40px;
    padding: 15px 7px;
}
.navbar .linklist.navlinks a {
    background: transparent;
    color: #FFF;
    font-family: Trebuchet MS;
    font-size: 15px;
    padding: 7px;
    text-shadow: 1px 1px 0 #242424;
}
.navbar .linklist.navlinks a:hover {
    background-color: transparent;
    border-top: 0 solid transparent;
    color: #007eff;
    font-family: Trebuchet MS;
    font-size: 20px;
}

Até mais.

PS: Para funcionar corretamente deve substituir pelos códigos já passados.

[Fraise]

Certo. Assim?

Código:

ul.linklist.navlinks { height: auto !important; }

Atenciosamente,
Fraise.

[Brunelli]

Olá!

Deixo aqui a minha sugestão:

Código:

.navbar {
    background-color: #fff;
    clear: both;
    padding: 0 10px;
}
#page-header ul.linklist.navlinks {
    color: white;
    background-color: #000;
    border: 0 solid #000;
    border-bottom: 4px solid #007eff;
    height: 40px;
    margin-left: -16px;
    padding: 0 16px;
    width: 100%;
    text-align: center;
}
.navbar ul.linklist li {
    line-height: 40px;
    padding: 15px 7px;
}
.navbar .linklist.navlinks a {
    background: transparent;
    color: #FFF;
    font-family: Trebuchet MS;
    font-size: 15px;
    padding: 7px;
    text-shadow: 1px 1px 0 #242424;
}
.navbar .linklist.navlinks a:hover {
    background-color: transparent;
    border-top: 0 solid transparent;
    color: #007eff;
    font-family: Trebuchet MS;
    font-size: 20px;
}

Até mais.

PS: Para funcionar corretamente deve substituir pelos códigos já passados.

Nossa mano! ficou perfeito do jeito que eu queria, agradeço demais a você e o Fraise que me ajudaram DEMAIS <3 !! RESOLVIDO.

[Fraise]

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas.