1 [TUTORIAL CSS] Menu personalizado - ESTILO DEXTER 07/10/12, 12:07 pm
HenRyqUéè
Administrador
Avaliador
Helper
[Tens de ter uma conta e sessão iniciada para poderes visualizar 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
[TUTORIAL CSS] Menu personalizado - ESTILO DEXTER
1º - 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 */
- 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))
);
}
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 */
2º - Finalizando
Vá em:
Procure por: "Exibir apenas as imagens no menu de navegação" marque Não.PAINEL DE CONTROLE>>VISUALIZAÇÃO>>CABEÇALHO E NAVEGAÇÃO
SALVE!
Após isso, faça um backup das imgs do seu menu, depois delete todas (para ficar como na imagem abaixo).
Se quiser permanecer as imagens, outro modo é deixa-las como ícones.PAINEL DE CONTROLE>>VISUALIZAÇÃO>>IMAGENS E CORES>>GESTÃO DAS IMAGENS>>MODO AVANÇADO>>GERAL/NAVEGAÇÃO
3º - Resultado
SEM A CAIXA DE PESQUISA EM CIMA:
- CLIQUE PARA ABRIR:
- (a qualidade da img está baixa porque converti para gif)
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
- CLIQUE PARA ABRIR:
[Tens de ter uma conta e sessão iniciada para poderes visualizar 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