Mudar estrutura do menu

Detalhes da questão

Endereço do fórum: http://idmrpg.forumeiros.com/
Versão do fórum: phpBB2

Descrição

Boa tarde!

Gostaria de mudar a aparência do meu menu. Atualmente ele encontra-se assim, basicamente o padrão de uma das skins do Hitskin.

Agora eu queria deixá-lo dessa maneira, de modo que não precise me preocupar em fazer imagens para o menu. O efeito roxo é porque o mouse estava sobre aquela parte do menu, aí ele foi acentuado com essa cor. Gostaria de manter isso também, se possível.

Obrigada! Ah, e o exemplo é desse fórum.

Olá,
Aceda à:

Painel de Controle Visualização Imagens e Cores Cores Folha de Estilo CSS

E adicione na sua Folha de Estilo o seguinte código:

Código:

a.mainmenu {
  font-size: 8px;
  font-family: Calibri;
  letter-spacing: 1px;
  padding: 5px;
  text-transform: uppercase;
  font-weight: 400;
}
.mainmenu {
  background-color: rgba(0,0,0,0.5);
  border: 1px solid #fff;
  margin-left: -25px;
  margin-top: 40px;
  position: relative;
  text-align: center;
  width: 1229px;
}

Fica no seu agrado?
o/

Olá, @Chanp!

A princípio, a estrutura funcionou, mas ficou bugado. https://imgur.com/a/3gsKI

Olá!

Primeiramente remova todos os códigos aqui passados.

Adicione este código JavaScript com aplicação em todas as páginas:

Código:

 $(document).ready(function(){
$(".mainmenu").parent().css({"background-color": "rgba(0,0,0,0.5)","border": "1px solid #fff","margin-left": "-25px","margin-top": "40px", "position": "relative","text-align": "center","padding":"5px", "width": "101pc"});
});

Se não quiser usar códigos jScript, podemos fazer por templates

Para o efeito do mouse, adicione este CSS:

Código:

a.mainmenu:hover {
    background: #440091;
    opacity: 1;
    padding: 5px;
    transition: 1s;
}

Até.

Olá, @RafaelS..

O código funcionou em sua estrutura, mas queria esclarecer uma duvida; o fato do efeito estar descentralizado se dá porque há poucos links no menu?

https://imgur.com/a/5liH5

Olá Lupina,

Na verdade é porquê tem uma imagem "invisível" nos menus.
Veja se ao adicionar este código ao CSS, resolve o seu problema:

Código:

a.mainmenu img {
    display: none;
}
a.mainmenu {
    padding: 5px;
}

Até mais.

Funcionou perfeitamente, @RafaelS. Muito obrigada!