[TUTORIAL CSS] Menu personalizado - ESTILO DEXTER

Olá pessoal então eu decidi criar um menu também, só que do meu estilo.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
1º - Código CSS

Aceda em :

Painel de Controle Visualização Imagens e Cores Folha de estilo CSS

Código:

    /* MENU ESTILO DEXTER */
    ul.navlinks {
      border-bottom: 1px solid transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.1);
    font-weight: 700;
    height: 40px;
    left: 0;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 999;
    background-image: linear-gradient(bottom, rgb(0,128,2) 10%, rgb(114,194,127) 97%);
    background-image: -o-linear-gradient(bottom, rgb(0,128,2) 10%, rgb(114,194,127) 97%);
    background-image: -moz-linear-gradient(bottom, rgb(0,128,2) 10%, rgb(114,194,127) 97%);
    background-image: -webkit-linear-gradient(bottom, rgb(0,128,2) 10%, rgb(114,194,127) 97%);
    background-image: -ms-linear-gradient(bottom, rgb(0,128,2) 10%, rgb(114,194,127) 97%);

    background-image: -webkit-gradient(
      linear,
      right bottom,
      right top,
      color-stop(0.1, rgb(0,128,2)),
      color-stop(0.97, rgb(114,194,127))
    );
    }
    ul.linklist li {
    line-height: 40px;
    }
    ul.linklist.navlinks li a{
    transition: background, color 1.0s;
            -moz-transition: background,color 1.0s;
            -o-transition: background, color 1.0s;
            -webkit-transition: background, color 1.0s;
            -htm-transition: background, color 1.0s;
    padding: 15px 10px 15px 10px;color: #bfbfbf;}
    ul.linklist.navlinks li a:hover{
    transition: background, color 1.0s;
            -moz-transition: background,color 1.0s;
            -o-transition: background, color 1.0s;
            -webkit-transition: background, color 1.0s;
            -htm-transition: background, color 1.0s;
    box-shadow:0px 0px 1px grey;
      text-decoration:none;
      border-radius:5px;
      color:#034F06;
      background-image: linear-gradient(bottom, rgb(64,148,64) 10%, rgb(134,235,147) 97%);
    background-image: -o-linear-gradient(bottom, rgb(64,148,64) 10%, rgb(134,235,147) 97%);
    background-image: -moz-linear-gradient(bottom, rgb(64,148,64) 10%, rgb(134,235,147) 97%);
    background-image: -webkit-linear-gradient(bottom, rgb(64,148,64) 10%, rgb(134,235,147) 97%);
    background-image: -ms-linear-gradient(bottom, rgb(64,148,64) 10%, rgb(134,235,147) 97%);

    background-image: -webkit-gradient(
      linear,
      right bottom,
      right top,
      color-stop(0.1, rgb(64,148,64)),
      color-stop(0.97, rgb(134,235,147))
    );
    }
    ul.linklist.navlinks li a{
      text-shadow: 0px 0px 2px #07800D;
    color: #AFDEB1;
    }
    /* www.rmbr.forumeiros.com */

Se quiser que a caixa de pesquisa fique dentro do menu (olhe a segunda imagem no "resultado"), adicione na sua folha css (primeiro adicione o primeiro codigo acima, salve e adicione este. O código já muda o estilo da caixa de pesquisa para igual o da imagem):

Código:

    #search-box {
      opacity: 0.7;
        filter: alpha(opacity=70);
        transition: opacity 1s;
        -moz-transition: opacity 1s;
        -o-transition: opacity 1s;
        -webkit-transition: opacity 1s;
        -htm-transition: opacity 1s;
        margin-top:-48px;
        margin-right: -2px;
      }
    #search-box:hover{
      opacity: 1;
            -moz-opacity: 1;
            filter: alpha(opacity=100);
            transition: opacity 0.5s;
            -moz-transition: opacity 0.5s;
            -o-transition: opacity 0.5s;
            -webkit-transition: opacity 0.5s;
            -htm-transition: opacity 0.5s;
    }
    #search-box input.button2{transition: background, color 1.0s;
            -moz-transition: background,color 1.0s;
            -o-transition: background, color 1.0s;
            -webkit-transition: background, color 1.0s;
            -htm-transition: background, color 1.0s;-webkit-border-radius:2px;-webkit-user-select:none;background-color:#f5f5f5;background-image:-o-linear-gradient(top,whiteSmoke,#F1F1F1);border:1px solid rgba(0,0,0,0.1);border-radius:2px;color:#666;cursor:pointer;font-size:11px;font-weight:700;height:29px;line-height:18px;margin:11px 6px;min-width:54px;padding:0 8px;text-align:center}#search-box input{border-radius: 5px 0px 0px 5px;-moz-box-sizing:content-box;background:#fff;border:1px solid #D9D9D9;border-width:1px;color:#000;height:23px}
    #search-box input.button2 {
      border-radius: 0px 5px 5px 0px;
      font-size: 11px !important;
    }
    #search-box input.button2:hover {
    transition: background, color 1.0s;
            -moz-transition: background,color 1.0s;
            -o-transition: background, color 1.0s;
            -webkit-transition: background, color 1.0s;
            -htm-transition: background, color 1.0s;
      box-shadow:0px 0px 1px grey;
      text-decoration:none;
      border-radius:5px;
      color:#034F06;
      background-image: linear-gradient(bottom, rgb(64,148,64) 10%, rgb(134,235,147) 97%);
    background-image: -o-linear-gradient(bottom, rgb(64,148,64) 10%, rgb(134,235,147) 97%);
    background-image: -moz-linear-gradient(bottom, rgb(64,148,64) 10%, rgb(134,235,147) 97%);
    background-image: -webkit-linear-gradient(bottom, rgb(64,148,64) 10%, rgb(134,235,147) 97%);
    background-image: -ms-linear-gradient(bottom, rgb(64,148,64) 10%, rgb(134,235,147) 97%);

    background-image: -webkit-gradient(
      linear,
      right bottom,
      right top,
      color-stop(0.1, rgb(64,148,64)),
      color-stop(0.97, rgb(134,235,147))
    );
    }

VALIDE E SALVE!

2º - Finalizando
Vá em:

Painel de Controle Visualização Página Inicial Cabeçalho e Navegação

Procure por: "Exibir apenas as imagens no menu de navegação" marque Não
SALVE!

Após isso, faça um backup das imgs do seu menu, depois delete todas (para ficar como na imagem abaixo).

Painel de Controle Visualização Imagens e Cores Gestão das Imagens Modo Avançado Geral/Navegação

Se quiser permanecer as imagens, outro modo é deixa-las como ícones.

3º - Resultado
Sem a Caixa de pesquisa em cima :

Spoiler:

Com a caixa de pesquisa em cima :

Spoiler:

° Posso mudar as cores?
Sim, e se tiver dúvidam crie um tópico referente ao mesmo.

° Funciona em quais versões?
PHPBB3

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]