[DICA] Menu em CSS
Enviado: 15 Ago 2011, 12:28
URL do Fórum: http://www.shihtzuforum.com.br/index.php
Oi pessoal!
Eu precisava de um menu para:
- integrar o Blog Wordpress com o Fórum
- Os links das mods não cabiam mais na navbar
Andei estudando, com base em auxílio do _Vinny_ e cheguei a um resultado que serviu para mim, e como pode servir para mais alguém, vou compartilhar. (Tem este Tutorial kb.php?a=42 mas não deu no meu estilo porque ele usa tabs internas do prosilver, cuja cor é diferente do tema)
1 - Baixe o arquivo zipado em anexo e descompacte em seu computador
2 - Envie as imagens da pasta images para a pasta images do seu fórum.
(Essas imagens devem ser alteradas para combinar com seu estilo, mas estão presentes para você saber exatamente as dimensões.)
3 - Envie o arquivo meumenu.css para a pasta styles/prosilver/theme/
4 - Abra styles/prosilver/template/overall_header.html
LOCALIZE
ADICIONE ANTES
5 - LOCALIZE
ADICIONE ANTES
6 - Abra o arquivo stylesheet.css
LOCALIZE:
ADICIONE DEPOIS
Atualize Template, Tema e Limpe o Cache.
Você deve substituir os links do passo 4 pelos links de seu interesse.
As imagens da pasta estão compatíveis com o tema Absolution, mas podem ser substituídas, claro, por imagens compatíveis com seu tema.
Caso alguém queira usar o Menu e tenha dificuldades com as imagens posso auxiliar.
Como fica o menu: (Se quiser ver o menu funcionando é só acessar o endereço no topo do post)
Oi pessoal!
Eu precisava de um menu para:
- integrar o Blog Wordpress com o Fórum
- Os links das mods não cabiam mais na navbar
Andei estudando, com base em auxílio do _Vinny_ e cheguei a um resultado que serviu para mim, e como pode servir para mais alguém, vou compartilhar. (Tem este Tutorial kb.php?a=42 mas não deu no meu estilo porque ele usa tabs internas do prosilver, cuja cor é diferente do tema)
1 - Baixe o arquivo zipado em anexo e descompacte em seu computador
2 - Envie as imagens da pasta images para a pasta images do seu fórum.
(Essas imagens devem ser alteradas para combinar com seu estilo, mas estão presentes para você saber exatamente as dimensões.)
3 - Envie o arquivo meumenu.css para a pasta styles/prosilver/theme/
4 - Abra styles/prosilver/template/overall_header.html
LOCALIZE
Código: Selecionar todos
<div class="navbar">
Código: Selecionar todos
<br />
<div id="menu" align="center">
<ul>
<li><a href="http://www.seuforum.com.br/portal.php"><b>PORTAL</b></a></li>
<li><a href="http://www.seuforum.com.br/index.php"><b>FÓRUM</b></a></li>
<li><a href="http://www.seuforum.com.br/"><b>BLOG</b></a></li>
<li><a href="http://www.seuforum.com.br/mchat.php#mChat"><b>CHAT</b></a></li>
<li><a href="http://www.seuforum.com.br/search.php"><b>PESQUISA</b></a></li>
<li><a href="http://www.seuforum.com.br/memberlist.php"><b>MEMBROS</b></a></li>
<li><a href="http://www.seuforum.com.br/thankslist.php"><b>RANK TOP 10</b></a></li>
<li><a href="http://www.seuforum.com.br/faq.php"><b>FAQ</b></a></li>
</ul>
</div>
<br />
Código: Selecionar todos
</head>
Código: Selecionar todos
<!--[if IE]>
<style type="text/css">
#menu ul {display:inline-block;}
#menu ul {display:inline;}
#menu ul li {float:left;}
#menu {text-align:center;}
</style>
<![endif]-->
LOCALIZE:
Código: Selecionar todos
@import url("colours.css");
Código: Selecionar todos
@import url("meumenu.css");
Você deve substituir os links do passo 4 pelos links de seu interesse.
As imagens da pasta estão compatíveis com o tema Absolution, mas podem ser substituídas, claro, por imagens compatíveis com seu tema.
Caso alguém queira usar o Menu e tenha dificuldades com as imagens posso auxiliar.
Como fica o menu: (Se quiser ver o menu funcionando é só acessar o endereço no topo do post)