Menu com efeito hover

Qual é minha questão:
Olá,

Possuo um código que aplica o efeito hover no menu e que funciona perfeitamente.  O problema é que gostaria de aplicar a três menus personalizados que eu criei: Threats, Wiki e Personagens. Como fazer isso?

Abaixo um exemplo do código:

Código:

#i_icon_mini_login{width:118px; height:57px; background:url(http://i.imgur.com/C7dQ7y4.jpg) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(http://i.imgur.com/C7dQ7y4.jpg) no-repeat  0 -57px;}

Obrigado,
Kvothe

Endereço do meu fórum:
http://landofhaeron.forumeiros.com

Versão do fórum:
PHPBB2

Boa tarde!

Você tentou aplicar a imagem de fundo através do Painel de Controle? Em Visualização > Home Page -> Cabeçalho e navegação > Selecione o menu > e no campo "Imagem" adicionar a URL da mesma?

Até mais!

Sim, mas nesse caso não funciona o efeito hover..

Até mais

Bom dia!

Teria como deixar os menus personalizados ativados, por favor?

Pronto, permiti a visualização deles para convidados.

UP (só para não fecharem o tópico)

@Kvothe
Olá amigo!

1- Vá em Painel de Controle -> Em Visualização -> Home Page -> Cabeçalho e navegação -> Selecione o menu -> e no campo "Imagem" adicione a seguinte URL: https://2img.net/i/fa/empty.gif
Faça isso para cada um dos 3 menus personalizados que você adicionou ok?

2- Entre no painel de controle de seu fórum e vá em Visualização -> Imagens e cores -> Cores, selecione a aba Folha de estilos CSS e adicione o código abaixo:

Código:


/* Menu [Wiki] */
.bodyline td a.mainmenu:nth-of-type(4) img {
  background: url("http://i.imgur.com/vFNhEGs.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 57px;
  width: 109px;
}
.bodyline td a.mainmenu:nth-of-type(4) img:hover {
  background: url("http://i.imgur.com/vFNhEGs.jpg") no-repeat scroll 0 -57px rgba(0, 0, 0, 0);
}

/* Menu [Threats] */
.bodyline td a.mainmenu:nth-of-type(5) img {
  background: url("http://i.imgur.com/vFNhEGs.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 57px;
  width: 109px;
}
.bodyline td a.mainmenu:nth-of-type(5) img:hover {
  background: url("http://i.imgur.com/vFNhEGs.jpg") no-repeat scroll 0 -57px rgba(0, 0, 0, 0);
}

/* Menu [Personagens] */
.bodyline td a.mainmenu:nth-of-type(6) img {
  background: url("http://i.imgur.com/vFNhEGs.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 57px;
  width: 109px;
}
.bodyline td a.mainmenu:nth-of-type(6) img:hover {
  background: url("http://i.imgur.com/vFNhEGs.jpg") no-repeat scroll 0 -57px rgba(0, 0, 0, 0);
}


Nota: Para cada menu personalizado, troque a imagem de exemplo que coloquei https://i.imgur.com/vFNhEGs.jpg pela imagem que deseja!

Abraços,

JS

JS,

Primeiro, muito obrigado por estar me ajudando. O código apresentou ótimos resultados. No Chrome está quase perfeito, o único problema é uma borda e um sobrescrito que aparece nos menus, se puder dar uma olhada no fórum, irá perceber.

Agora, quanto ao Firefox, o menu fica um pouco mais estranho. Se não tiver o navegador, posso enviar um print.

Obrigado,
Até mais!

Vou repetir uma parte da minha mensagem anterior na qual você não fez correto:

JScript escreveu:
1- Vá em Painel de Controle -> Em Visualização -> Home Page -> Cabeçalho e navegação -> Selecione o menu -> e no campo "Imagem" adicione a seguinte URL: https://2img.net/i/fa/empty.gif
Faça isso para cada um dos 3 menus personalizados que você adicionou ok?

Veja o resultado em meu Firefox:


Com o mouse em cima:


Nota: Obtive o mesmo resultado no Google Chrome!

JS

Olá,

Funcionou perfeitamente agora! Saberia me dizer o que está causando esse risco no menu? Já tentei modificar a imagem, mas o problema não é esse..

Obrigado,
Kvothe

Adicione o CSS abaixo que resolve:

Código:


#i_icon_mini_groups, #i_icon_mini_search, #i_icon_mini_faq {
  display: none !important;
}


JS

Perfeito, muitíssimo obrigado pela ajuda!

Até mais,
Kvothe