Humor Nota 10!

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

[TUTORIAL] BARRA DE NAVEGAÇÃO ESTILO (SPUBLICIDADE)

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

TheLord

avatar
Administrador
Administrador
Barra de navegação estilo (SPublicidade)

Neste Tutorial,Iremos adicionar um código css para deixar o menu de navegação com o estilo da SPublicidade!


--> Tutoriais, dicas e astúcias <--
Barra de navegação estilo (SPublicidade)

1º - Conhecendo o código à ser utilizado
PUNBB

Código:
#pun-intro #pun-logo img{max-height: 130px;}
#pun-head{position: relative;height: 40px;margin: 0px !important;margin-bottom: 30px;clear: none !important;background:#00A0F0 url(http://i43.servimg.com/u/f43/17/53/84/25/sem_ta10.png) repeat-x;}
#pun-foot{background-image: -moz-linear-gradient(#00A0F0, #00C8F0 10%, #00A0F0);
background-image: -webkit-gradient(linear, 0% 0%, 0% 10% 100%, from(#00A0F0), to(#00C8F0), to(#00A0F0));
background-image: -webkit-linear-gradient(#00A0F0,#00C8F0 10%, #00A0F0);
background-image: -o-linear-gradient(#00A0F0, #00C8F0 10%, #00A0F0);}
#pun-navlinks {padding-top: 12px !important;background:none !important;}
#pun-navlinks #search_box{width: 190px;border: 0;float: right;margin-top: -24px;height:31px !important;}
#pun-navlinks #search_box .inputbox{margin: 5px;height: 20px;background: none;border: none;}
#pun-navlinks #search_box #searchbutton{display: none;}
#pun-navlinks #search_box .inputbox {width: 140px;}
#search_box #searchbutton{float: left;cursor: pointer;
margin: 7px 0px 0px 5px;padding: 13px;border: 0;font-size: 0;display: inline !important;
background: transparent url(http://i46.servimg.com/u/f46/14/56/85/28/sin_ta12.png) no-repeat 50% 0%;}
#pun-navlinks ul[class="clearfix"]{border: 0 !important;width: 90%;}
#pun-navlinks ul li{padding: 11px 8px 12px 8px}
#pun-navlinks ul li:hover{
background: rgba(255, 255, 255, .30);
-webkit-box-shadow: inset 0px 2px 2px #008A96;
-moz-box-shadow: inset 0px 2px 2px #727272;
box-shadow: inset 0px 2px 2px #008A96;}
#pun-navlinks li a, #pun-foot a{margin: 0;font-weight: 700;color:#ededed;font-size:12px;font-family:Trebuchet MS,"Lucida Grande",Verdana,Helvetica,Arial,sans-serif;}

2º - Aplicando o código CSS
Agora deverá seguir um esquema de onde o código deverá ser adicionado:
Painel de Controle >> Visualização >> Imagens e Cores >> Cores >> Folha de estilo CSS



3º - Resultado Final

http://humor-nota10.olympicweb.net

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