Como coloco este tipo de efeito no meu fórum?

Neste tutorial, utilizaremos dos códigos CSS para implementar o menu de navegação de seu fórum. Através deste tutorial, poderemos manipular o menu de forma fácil, como tamanho da fonte, o espaço entre os links, cores e muito mais!

--> Tutoriais, dicas e astúcias <--
Gerenciando o menu do fórum com CSS

1º - O código:

a.mainmenu img {
PROPRIEDADES
}

O código é um CSS simples e que funciona em qualquer versão dos fóruns Forumeiros. Em vermelho, aplicaremos as propriedades que o menu terá, e será descrito no próximo passo do tutorial.

2º - Modificando o código:

O código pode ser modificado com propriedades CSS. Não listaremos todas, mas algumas que podem vir a ser uteis.

Caso deseje utilizar outras propriedades CSS, utilizem deste tutorial.

• Aumentar ou diminuir o espaço entre links e imagens do menu:
  

Para reduzir o espaçamento no menu, utilizaremos do seguinte código:

a.mainmenu img {
margin-left: -20px;
}

Para aumentarmos o espaçamento no menu, utilizaremos do seguinte código:

a.mainmenu img {
margin-left: 20px;
}

Negrito >> Ajuste pela quantidade de pixels que desejar.

• Alterar o tamanho da fonte dos links do menu:
  

Para alterarmos a fonte dos links do menu, utilize do seguinte código:

a.mainmenu {
font-size: 10px;
}

Negrito >> Ajuste pelo tamanho em pt da fonte que desejar.

• Alterar a fonte dos links do menu:
  

a.mainmenu {
font-family: Verdana;
}

Negrito >> Altere para a fonte que desejar. Para adicionar opções de novas fontes, adicione-as entre vírgulas.

3º - 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


4º - Resultado:

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Gerenciando o menu do fórum com CSS