Mudar barra de navegação

Detalhes da dúvida

Versão do fórum : phpBB3
Nível de acesso : Membro
Navegador usado : Mozilla Firefox
Imagem :

Imagem da minha dúvida:

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

Descrição do problema

Boa tarde,

Precisava de ajuda para mudar a minha barra de navegação.

Gostava de colocar a barra de navegação igual à do FdF e ao mesmo tempo quero tirar a cor por baixo da barra. Ou seja, a parte que esta demarcada a vermelho como mostra a imagem .

Obrigado

Olá amigo!

Acho que nenhum tipo de "código" utilizado na fdf, é permitido em outros fóruns.

Até mais,
Reset.

Usar o código do Fórum dos Fóruns, igual, acho que não é possível, mas você quer tirar o verde de onde está marcado? Poderia explicar melhor?

LucaS [],

Reset escreveu:Olá amigo!

Acho que nenhum tipo de "código" utilizado na fdf, é permitido em outros fóruns.

Até mais,
Reset.

Olá, você disse acha.Isso significa que não tem certeza.

Agora eu digo que está errada. Eu já pedi e nunca me foi negado.
Eu estou pedindo...

Exemplos - https://ajuda.forumeiros.com/t89035-como-personalizar-os-widgets-do-forum

https://ajuda.forumeiros.com/t93111-mensagens-de-boas-vindas

https://ajuda.forumeiros.com/t95618-codigo-da-apresentacao-do-staff

Como vês estás errada.

Mas obrigado pela tua sugestão.

Todavia fico a aguardar ajuda.

Tente isto:

Código:

ul.linklist.navlinks > li > a {
display: inline-block;
line-height: 35px;
}
ul.linklist.navlinks a {
color: #FFF;
padding: 0 10px;
text-decoration: none;
}
a:visited {
color: #0372be;
text-decoration: none;
}
a:link {
color: #0372be;
text-decoration: none;
}
a {
text-decoration: none!important;
}
* {
margin: 0;
padding: 0;
}
user agent stylesheeta:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
Inherited from li
ul.linklist li {
display: inline;
font-size: 1.1em;
line-height: 2.2em;
list-style-type: none;
width: auto;
}
user agent stylesheetli {
display: list-item;
text-align: -webkit-match-parent;
}
Inherited from ul.linklist.navlinks
ul.navlinks {
-moz-border-radius: 0 0 6px 6px;
-o-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
background: url(http://2img.net/i/fa/fdf3/bg_cat.png) repeat-x #1675BC;
border-color: #4ca0ce #155d98 #155d98;
border-image: none;
border-radius: 0 0 6px 6px;
border-style: none none solid;
border-width: 0 0 4px;
bottom: 9px;
font-family: 'Oxygen Mono',Tahoma,Trebuchet MS,sans-serif;
font-size: 12px;
position: relative;
text-align: center;
}

Ou este:

Código:

#page-header .navbar ul.navlinks {
border-top: 1px solid #155d98;
height: auto;
margin-left: 0;
width: auto;
}
.inner .linklist.navlinks {
padding-right: 9px!important;
}
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist.navlinks {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top-left-radius: 0;
height: 23px;
margin-left: -10px;
margin-top: -9px;
width: 100.4%;
}
ul.navlinks {
-moz-border-radius: 0 0 6px 6px;
-o-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
background: url(http://2img.net/i/fa/fdf3/bg_cat.png) repeat-x #1675BC;
border-color: #4ca0ce #155d98 #155d98;
border-image: none;
border-radius: 0 0 6px 6px;
border-style: none none solid;
border-width: 0 0 4px;
bottom: 9px;
font-family: 'Oxygen Mono',Tahoma,Trebuchet MS,sans-serif;
font-size: 12px;
position: relative;
text-align: center;
}
ul.navlinks {
border-bottom: 1px solid #fff;
font-weight: 700;
text-align: center;
}
ul {
list-style-type: none;
}

LucaS [],

Obrigado Lucas mas nenhum funcionou.

O primeiro aumenta aquela barra vermelha em tamanho. Fica quase o dobro.

O segundo código coloca uma barra azul idêntica à do FdF deslocada, mas a forma de trabalhar é a mesma.

O que eu pretendo é quando se coloca o mouse por cima do Portal por exemplo em vez de mudar de cor, como está atualmente eu quero eu uma sombra como acontece em muitos fóruns incluindo o FdF

Adicione mais isto:

Código:

ul.linklist.navlinks li.active > a, ul.linklist.navlinks li:hover > a {
background: none repeat scroll 0 0 #155d98;
color: #FFF;
}

LucaS [],

Olá!

Adicione este código junto ao do Lucas.

Código:

#page-header .navbar ul.navlinks {
border-top: 1px solid #155d98;
height: auto;
margin-left: 0;
width: auto;
}

Até!

Já se faz alguma luz.

Estive a fazer algumas experiências.

Por favor entrem aqui - http://testemunhasdejeova.forumeiros.com.pt/?change_temp=3

Que é um tema temporário onde já está implementado as minhas experiências no barra. Ao passarem o mouse verificam uma sombra, mas eu quero a sombra maior, ou seja, eu quero da largura da barra do FdF.

Penso que me fiz compreender.

editado------------

Para facilitar este é o código que está lá no endereço que dei

Código:

div.mes-txt {
   background: #DFF5BC;
   padding: 3px;
   border-radius: 11px;
   }    

#page-header .navbar ul.navlinks li a{
       color:#FAFCFA;
       position: relative;
       bottom: -2px !important;
       margin: 5px;
       font-family: arial;
       font-size: 14px;
       text-shadow: 1px 1px 1px black;}

      ul.linklist.navlinks li.active > a, ul.linklist.navlinks li:hover > a {
   background: none repeat scroll 0 0 #155d98;
   color: #FFF;
   }

Apague todos os códigos passados e adicione isto:

Código:

ul.linklist.navlinks li.active > a, ul.linklist.navlinks li:hover > a {
background: none repeat scroll 0 0 #155d98;
color: #FFF;
}

ul.linklist.navlinks > li > a {
display: inline-block;
line-height: 35px;
}

LucaS [],

Prefeito agora só falta mudar as cores e isso eu faço.

Quanto à segunda pergunta. É possível retirar a parte que está sinalizada da barra

Imagem da minha dúvida:

ellipsis escreveu:Prefeito agora só falta mudar as cores e isso eu faço.

Quanto à segunda pergunta. É possível retirar a parte que está sinalizada da barra

Imagem da minha dúvida:

Tirar a parte verde? Se for use isto:

Código:

.navbar {
background-color: transparent;
clear: both;
padding: 0 10px;
}

Lucas eu não quero que saia tudo. Eu quero só onde eu tenho o quadrado na imagem. onde estão as letras eu quero a cor.

Consegui assim mas agora vamos ter que arrumar um código pra por o anuncio pra baixo, já tento fazer isto, só aguarde um pouco.

Código:

.navbar {
background-color: #98eb12;
clear: both;
padding: 0 10px;
height: 33px;
border-radius: 5px;
}

Lucas eu consegui de outra forma.

Foi a cores e retirei a cor do fundo 3 e coloquei parte dum código que você me havia dado e fiz mudanças nas cores.

O código é este...

Código:

ul.navlinks {
-moz-border-radius: 0 0 6px 6px;
-o-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
background: url() repeat-x #f5d1cc;
border-color: #f5d1cc #f5d1cc #EB1224;
border-image: none;
border-radius: 0 0 6px 6px;
border-style: none none solid;
border-width: 0 0 4px;
bottom: 9px;
font-family: 'Oxygen Mono',Tahoma,Trebuchet MS,sans-serif;
font-size: 12px;
position: relative;
text-align: center;
}

Veja como fica - http://testemunhasdejeova.forumeiros.com.pt/?change_temp=3

Só há um pequeno se não. A barra não está do tamanho do logo.
Como faço para que ela cresça um pouquinho de cada lado?

Olá, tente este código:

Código:

.headerbar {
background-repeat: repeat-x;
padding: 0px 0px;
margin: 12px;
}

LucaS [],

Lucas esse código mexe no logo. Eu não quero que mexa no logo.

Eu quero que a barra de navegação cresça em vez de encolher o logo.

Então tente este:

Código:

ul.navlinks {
margin: -10px;
}

LucaS [],

Prefeito Lucas.

Para resumir o trabalho feito.

Visualização - Cores - cores de fundo - E colocar uma cor suave ao nosso gosto

Depois colocar este código

Código:

div.mes-txt {
  background: #DFF5BC;
  padding: 3px;
  border-radius: 11px;
  }   

#page-header .navbar ul.navlinks li a{
      color:#FAFCFA;
      position: relative;
      bottom: -2px !important;
      margin: 5px;
      font-family: arial;
      font-size: 14px;
      text-shadow: 1px 1px 1px black;}

  ul.linklist.navlinks li.active > a, ul.linklist.navlinks li:hover > a {
    background: none repeat scroll 0 0 #EB1224;
    color: #FFF;
    }

    ul.linklist.navlinks > li > a {
    display: inline-block;
    line-height: 30px;
    }

ul.navlinks {
-moz-border-radius: 0 0 6px 6px;
-o-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
background: url() repeat-x #f5d1cc;
border-color: #f5d1cc #f5d1cc #EB1224;
border-image: none;
border-radius: 0 0 6px 6px;
border-style: none none solid;
border-width: 0 0 4px;
bottom: 9px;
font-family: 'Oxygen Mono',Tahoma,Trebuchet MS,sans-serif;
font-size: 12px;
position: relative;
text-align: center;
}

    ul.navlinks {
    margin: -10px;

Tudo isto está feito aqui - http://testemunhasdejeova.forumeiros.com.pt/?change_temp=3

E vou implementar nos outros temas.

Obrigado Lucas pela ajuda.

UM Forte abraço

Ola Tenta Utilizar esse Code

Visualizações Cores Folhas De Estilo Css

Código:

.navbar {
    background-color: rgba(252, 252, 252, 0.98);
    clear: both;
    padding: 0px 10px;
}