Menu personalizado

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

Resolvido Menu personalizado

Mensagem por Sensei Animê em 25/05/13, 05:09 pm

Qual é minha questão:
Olá!


Bom, gostaria de saber como coloco Esse ( http://i.imgur.com/XnP909Y.jpg ) menu no meu Fórum.

A propósito, vi ele nesse Fórum: http://www.pokemonrpgfp.forumeiros.com/

Endereço do meu fórum:
http://www.foreverreborn.forumeiro.com

Versão do fórum:
PHPBB2


Última edição por Sensei Animê em 26/05/13, 07:26 pm, editado 1 vez(es)
avatar

Sensei Animê
Nível 8

Masculino
Inscrito dia : 04/07/2011
Mensagens : 129
Pontos Ativos : 195

Ver perfil do usuário http://foreverrebirth.forumeiros.com/

Resolvido Re: Menu personalizado

Mensagem por BrunoH. em 25/05/13, 06:21 pm

Olá!
Aceda a 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:
.navbar .linklist.navlinks {-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 10px 10px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset;background: url(http://i.imgur.com/1Gp3b.png) 0px 50% repeat-x;border-radius: 6px;box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 10px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset;float: right;padding: 6px 3px 6px 6px;text-shadow: rgb(0, 0, 0) 1px 1px 2px;}
ul.linklist li {display: inline;font-size: 1.1em;line-height: 2.2em;list-style-type: none;width: auto;}
.navbar ul.linklist.navlinks li a {border-radius: 4px;color: rgb(167, 167, 167);display: inline-block;font-size: 11px;height: 26px;line-height: 26px;outline: none;padding: 0px 8px;}
e Valide!

Até mais.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br
  • 0

Resolvido Re: Menu personalizado

Mensagem por MateusA em 25/05/13, 09:39 pm

Olá! Visto que o codigo de nosso amigo BrunoH. encontrava-se faltando algumas coisas peguei para você.

Aceda em:<br />
Painel de Controle Seta Visualização Seta Imagens & Cores Seta Cores Seta Folha de Estilo CSS

<br />
Código:
.navbar{background-color:#;clear:both;padding:0 10px}ul.navlinks{border-bottom:1px solid transparent;font-weight:700;text-align:right}ul.borderless{border-bottom:0}ul.linklist li{display:inline;font-size:1.1em;line-height:2.2em;list-style-type:none;width:auto}ul.linklist li a img{vertical-align:middle}
    .navbar ul.linklist.navlinks li a:hover{background:#373737 url(http://i.imgur.com/R1pjk.png) repeat-x 0 0;color:#fff}.navbar .linklist.navlinks{-moz-border-radius:6px;-moz-box-shadow:0 1px 10px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.2);-webkit-border-radius:6px;-webkit-box-shadow:0 10px 10px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.2);background:url(http://i.imgur.com/1Gp3b.png) repeat-x 0 50%;border-radius:6px;box-shadow:0 1px 10px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.2);float:right;padding:6px 3px 6px 6px;text-shadow:1px 1px 2px #000}.navbar ul.linklist.navlinks li a{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#A7A7A7;display:inline-block;font-size:11px;height:26px;line-height:26px;outline:none;padding:0 8px}#search-box #keywords{-moz-border-radius:3px;background:url(http://i.imgur.com/2soQM.png) repeat;background-image:-moz-linear-gradient(top,rgba(255,255,255,0.09) 0%, transparent 100%);border:1px solid #525252;border-radius:5px 0 0 5px;border-width:1px 0 1px 1px !important;box-shadow:0 0 10px 5px #2E2E2E inset;min-width:150px;padding:10px 10px 9px 20px}#search-box .nomargin .button2{background-color:#222!important;background-image:url(http://i.imgur.com/dvGoE.png);background-position:center;background-repeat:no-repeat;border:1px solid #555!important;border-radius:0 5px 5px 0;border-width:1px 1px 1px 0 !important;font-size:0!important;padding:16px}
.navbar{background-color:#;clear:both;padding:0 10px}ul.navlinks{border-bottom:1px solid transparent;font-weight:700;text-align:right}ul.borderless{border-bottom:0}ul.linklist li{display:inline;font-size:1.1em;line-height:2.2em;list-style-type:none;width:auto}ul.linklist li a img{vertical-align:middle}.search-box{float:left;margin-left:5px;margin-top:3px}#search-box{float:right;margin-right:5px;margin-top:10px;white-space:nowrap}* html #search-box{margin-right:35px}#search-box #keywords{background-color:#;width:95px},#search-box input{border:1px solid #BCBCBC}#search-box input.button1{padding:1px 5px}input.search{background:url(http://illiweb.com/fa/sprite_prosilver_navbar.png) no-repeat top left;background-position:0 -701px;padding-left:17px}ul.linklist li.rightside{float:right}ul.linklist li.footer-home{float:left}p.rightside{float:right;margin-right:5px}dl.codebox{background-color:#FFF;border:1px solid #C9D2D8;font-size:1em;padding:3px}        .navbar .linklist.navlinks {-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 10px 10px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset;background: url(http://i.imgur.com/1Gp3b.png) 0px 50% repeat-x;border-radius: 6px;box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 10px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset;float: right;padding: 6px 3px 6px 6px;text-shadow: rgb(0, 0, 0) 1px 1px 2px;}
        ul.linklist li {display: inline;font-size: 1.1em;line-height: 2.2em;list-style-type: none;width: auto;}
        .navbar ul.linklist.navlinks li a {border-radius: 4px;color: rgb(167, 167, 167);display: inline-block;font-size: 11px;height: 26px;line-height: 26px;outline: none;padding: 0px 8px;}


Valide.


Até mais.

avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Menu personalizado

Mensagem por Sensei Animê em 26/05/13, 05:11 pm

Seu código foi funcional para Phbb3, Crazy, mas ele fica com a barra do "buscar", teria como retirá-la?

A propósito, como mudo a Fonte e a cor?


Obs.: Estou fazendo o teste nesse Fórum: http://pokemon-dynasty.forumeiros.com/
avatar

Sensei Animê
Nível 8

Masculino
Inscrito dia : 04/07/2011
Mensagens : 129
Pontos Ativos : 195

Ver perfil do usuário http://foreverrebirth.forumeiros.com/
  • 0

Resolvido Re: Menu personalizado

Mensagem por MateusA em 26/05/13, 06:21 pm

Olá!

Ja retirei o buscar,quanto a personalização para mudar de fonte

Código:

        .navbar{font-family: serif;background-color:#;clear:both;padding:0 10px}ul.navlinks{border-bottom:1px solid transparent;font-weight:700;text-align:right}ul.borderless{border-bottom:0}ul.linklist li{display:inline;font-size:1.1em;line-height:2.2em;list-style-type:none;width:auto}ul.linklist li a img{vertical-align:middle}
            .navbar ul.linklist.navlinks li a:hover{background:#373737 url(http://i.imgur.com/R1pjk.png) repeat-x 0 0;color:#fff}.navbar .linklist.navlinks{-moz-border-radius:6px;-moz-box-shadow:0 1px 10px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.2);-webkit-border-radius:6px;-webkit-box-shadow:0 10px 10px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.2);background:url(http://i.imgur.com/1Gp3b.png) repeat-x 0 50%;border-radius:6px;box-shadow:0 1px 10px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.2);float:right;padding:6px 3px 6px 6px;text-shadow:1px 1px 2px #000}.navbar ul.linklist.navlinks li a{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;color:#A7A7A7;display:inline-block;font-size:11px;height:26px;line-height:26px;outline:none;padding:0 8px}#search-box #keywords{display: none !important;-moz-border-radius:3px;background:url(http://i.imgur.com/2soQM.png) repeat;background-image:-moz-linear-gradient(top,rgba(255,255,255,0.09) 0%, transparent 100%);border:1px solid #525252;border-radius:5px 0 0 5px;border-width:1px 0 1px 1px !important;box-shadow:0 0 10px 5px #2E2E2E inset;min-width:150px;padding:10px 10px 9px 20px}#search-box .nomargin .button2{display: none !important;background-color:#222!important;background-image:url(http://i.imgur.com/dvGoE.png);background-position:center;background-repeat:no-repeat;border:1px solid #555!important;border-radius:0 5px 5px 0;border-width:1px 1px 1px 0 !important;font-size:0!important;padding:16px}
        .navbar{background-color:#;clear:both;padding:0 10px}ul.navlinks{border-bottom:1px solid transparent;font-weight:700;text-align:right}ul.borderless{border-bottom:0}ul.linklist li{display:inline;font-size:1.1em;line-height:2.2em;list-style-type:none;width:auto}ul.linklist li a img{vertical-align:middle}.search-box{float:left;margin-left:5px;margin-top:3px}#search-box{float:right;margin-right:5px;margin-top:10px;white-space:nowrap}* html #search-box{margin-right:35px}#search-box #keywords{background-color:#;width:95px},#search-box input{border:1px solid #BCBCBC}#search-box input.button1{padding:1px 5px}input.search{background:url(http://illiweb.com/fa/sprite_prosilver_navbar.png) no-repeat top left;background-position:0 -701px;padding-left:17px}ul.linklist li.rightside{float:right}ul.linklist li.footer-home{float:left}p.rightside{float:right;margin-right:5px}dl.codebox{background-color:#FFF;border:1px solid #C9D2D8;font-size:1em;padding:3px}        .navbar .linklist.navlinks {-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 10px 10px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset;background: url(http://i.imgur.com/1Gp3b.png) 0px 50% repeat-x;border-radius: 6px;box-shadow: rgba(0, 0, 0, 0.8) 0px 1px 10px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset;float: right;padding: 6px 3px 6px 6px;text-shadow: rgb(0, 0, 0) 1px 1px 2px;}
                ul.linklist li {display: inline;font-size: 1.1em;line-height: 2.2em;list-style-type: none;width: auto;}
                .navbar ul.linklist.navlinks li a {border-radius: 4px;color: rgb(167, 167, 167);display: inline-block;font-size: 11px;height: 26px;line-height: 26px;outline: none;padding: 0px 8px;}






Procure por

Código:
.navbar{font-family: serif;

em serif troque pelo nome da fonte.

No codigo procure por

Código:
color: rgb(167, 167, 167);

Altere o rgb(167, 167, 167) pelo nome da cor em inglês não esquece de deixar o ; não mexa nele se não vai afetar o codigo completamente.

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Menu personalizado

Mensagem por Sensei Animê em 26/05/13, 07:25 pm

Muito obrigado, pode fechar!
avatar

Sensei Animê
Nível 8

Masculino
Inscrito dia : 04/07/2011
Mensagens : 129
Pontos Ativos : 195

Ver perfil do usuário http://foreverrebirth.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