Rpg Maker BRasil
RPG Maker Brasil - RMBR

Seja Bem vindo ao Forúm! Faça seu cadastro e desfrute sobre o mundo do RPG Maker!
P.S.: PARA MELHOR VIZUALIZAÇÃO DO FORUM SEM BUGS, RECOMENDO QUE USEM O MOZILLA FIREFOX OU O GOOGLE CHROME!
Rpg Maker BRasil

Evoluindo cada vez mais!


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

HenRyqUéè

avatar
Administrador
Avaliador
Helper

[Você precisa estar registrado e conectado para ver esta imagem.]
[TUTORIAL CSS] Menu personalizado - ESTILO DEXTER

Fala pessoal, hoje irei mostrar a como editar o seu menu e deixa-lo bem elegante.
O código foi criado inteiramente por DexTer, se for utilizar em outros foruns, favor deixe os créditos finais.


> Tutoriais, dicas e astúcias <
[TUTORIAL CSS] Menu personalizado - ESTILO DEXTER



- Código CSS
PHPBB3:
ACEDA EM:
PAINEL DE CONTROLE>>VISUALIZAÇÃO>>IMAGENS E CORES>>CORES>>FOLHA DE ESTILO CSS
CLIQUE AQUI PARA ABRIR:

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):

CLIQUE PARA ABRIR:
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!

PUNBB
Clique para abrir:
Código:
            /* MENU ESTILO DEXTER */
                #pun-navlinks ul {
                        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(47,130,122) 0%, rgb(120,227,227) 89%);
            background-image: -o-linear-gradient(bottom, rgb(47,130,122) 0%, rgb(120,227,227) 89%);
            background-image: -moz-linear-gradient(bottom, rgb(47,130,122) 0%, rgb(120,227,227) 89%);
            background-image: -webkit-linear-gradient(bottom, rgb(47,130,122) 0%, rgb(120,227,227) 89%);
            background-image: -ms-linear-gradient(bottom, rgb(47,130,122) 0%, rgb(120,227,227) 89%);

            background-image: -webkit-gradient(
              linear,
              left bottom,
              left top,
              color-stop(0, rgb(47,130,122)),
              color-stop(0.89, rgb(120,227,227))
            );
                }
                #pun-navlinks a:hover{
      text-decoration:none!Important;}
                #pun-navlinks ul li {
                line-height: 40px;
                }
                #pun-navlinks ul 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;}
                #pun-navlinks li a:hover{
                  box-shadow:0px 0px 1px grey;
                  text-decoration:none;
                  border-radius:5px;
                  color:#0E70E8;
                  background-image: linear-gradient(bottom, rgb(79,158,150) 0%, rgb(173,250,250) 89%);
            background-image: -o-linear-gradient(bottom, rgb(79,158,150) 0%, rgb(173,250,250) 89%);
            background-image: -moz-linear-gradient(bottom, rgb(79,158,150) 0%, rgb(173,250,250) 89%);
            background-image: -webkit-linear-gradient(bottom, rgb(79,158,150) 0%, rgb(173,250,250) 89%);
            background-image: -ms-linear-gradient(bottom, rgb(79,158,150) 0%, rgb(173,250,250) 89%);

            background-image: -webkit-gradient(
              linear,
              left bottom,
              left top,
              color-stop(0, rgb(79,158,150)),
              color-stop(0.89, rgb(173,250,250))
            );
              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;
                }
                #pun-navlinks, #pun-navlinks ul li a{
                  text-decoration:none;
                  text-shadow: 0px 0px 2px #7FAEE8;
                color: #E5EFFC;
                }
                #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{-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(79,158,150) 0%, rgb(173,250,250) 89%);
            background-image: -o-linear-gradient(bottom, rgb(79,158,150) 0%, rgb(173,250,250) 89%);
            background-image: -moz-linear-gradient(bottom, rgb(79,158,150) 0%, rgb(173,250,250) 89%);
            background-image: -webkit-linear-gradient(bottom, rgb(79,158,150) 0%, rgb(173,250,250) 89%);
            background-image: -ms-linear-gradient(bottom, rgb(79,158,150) 0%, rgb(173,250,250) 89%);

            background-image: -webkit-gradient(
              linear,
              left bottom,
              left top,
              color-stop(0, rgb(79,158,150)),
              color-stop(0.89, rgb(173,250,250))
            );
                }
                /* www.rmbr.forumeiros.com */
VALIDE E SALVE!

- Finalizando
Vá em:
PAINEL DE CONTROLE>>VISUALIZAÇÃO>>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.

- Resultado

SEM A CAIXA DE PESQUISA EM CIMA:
CLIQUE PARA ABRIR:

(a qualidade da img está baixa porque converti para gif)
[Você precisa estar registrado e conectado para ver esta imagem.]
COM A CAIXA DE PESQUISA EM CIMA:
CLIQUE PARA ABRIR:


[Você precisa estar registrado e conectado para ver esta imagem.]

Perguntas frequentes:

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


  • Funciona em quais versões?
    PHPBB3 e PUNBB (lembrando: a versão punBB não funciona a caixa de pesquisa, e a cor do fundo dela é azul!).





DexTer & © RMBR


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[DÚVIDA!!] - [TUTORIAL CSS] Menu personalizado - ESTILO DEXTER

http://rmbr.forumeiros.com/

GALDE

avatar
Iniciante
Muito Bom o Menu é o Tutorial Parabéns Mas como faço pra mudar a cor do fundo ?Muito feliz

RMBR

avatar
Administrador
Olá, pessa suporte aqui:
[Você precisa estar registrado e conectado para ver este link.]

http://rmbr.forumeiros.com

-Naruto

avatar
Administrador
Publicitário
Helper
Movido Para Tutoriais Aceitos.

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum