Efeito Hover da barra de navegação

Detalhes da questão

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

Descrição

Boa noite, havia abrido um tópico antigo sobre isso, mas, na época eu decidi não editar.
Queria que, ao passar o mouse no menu do fórum, ficasse assim:

Spoiler:

E as fontes dos títulos das categorias e fóruns, ao passar o mouse, fossem pra cá >>>>> e com brilho externo na cor #e8235a

Fórum onde existem esses efeitos, para melhor entendimento:
https://pokeshiny.forumeiros.com/

Agradeço desde já XD

Olá @Iory,

Entre no Painel de controle > Visualização > Página inicial > Cabeçalho e navegação, altere o endereço das imagens para:

Código:

https://2img.net/i/fa/empty.gif

Lembre-se que deve guardar a URL das imagens para a etapa seguinte!

Após a alteração da URL, vá a sua folha de estilo e adicione:

Código:

.mainmenu img {
  height: 78px;
  width: 78px;
  transition: all 0.5s ease;
}

/* Icon: forum */
#i_icon_mini_index {
  background: url(https://i.servimg.com/u/f54/20/22/03/99/agora_10.png) no-repeat;
  width: 148px;
}

#i_icon_mini_index:hover {
  background: url(https://i.ibb.co/QJb9xYd/azul-1.png) no-repeat;
}

/* Icon: FAQ */
#i_icon_mini_faq {
  background: url(https://i.servimg.com/u/f54/20/22/03/99/teste_10.png) no-repeat;
}

#i_icon_mini_faq:hover {
  background: url(https://i.ibb.co/dDn7pWt/azul-2.png) no-repeat;
}

/* Icon: Search */
#i_icon_mini_search {
  background: url(https://i.servimg.com/u/f54/20/22/03/99/2teste10.png) no-repeat;
}

#i_icon_mini_search:hover {
  background: url(https://i.ibb.co/HgzcRfM/azul-3.png) no-repeat;
}

/* Icon: Members */
#i_icon_mini_members {
  background: url(https://i.servimg.com/u/f54/20/22/03/99/3teste10.png) no-repeat;
}
#i_icon_mini_members:hover {
  background: url(https://i.ibb.co/LZh9NLP/azul-4.png) no-repeat;
}

/* Icon: Groups */
#i_icon_mini_groups {
  background: url(https://i.servimg.com/u/f54/20/22/03/99/4teste10.png) no-repeat;
}

#i_icon_mini_groups:hover {
  background: url(https://i.ibb.co/qYvGw5k/rosa-1.png) no-repeat;
}

/* Icon: profile */
#i_icon_mini_profile {
  background: url() no-repeat;
}
#i_icon_mini_profile:hover {
  background: url(https://i.ibb.co/dcxnryG/rosa-2.png) no-repeat;
}

/* Icon: MP */
#i_icon_mini_message {
  background: url() no-repeat;
}
#i_icon_mini_message:hover {
  background: url(https://i.ibb.co/JvxxbZW/rosa-3.png) no-repeat 0 -66px;
}

/* Icon: New MP */
#i_icon_mini_new_message {
  background: url() no-repeat;
}
#i_icon_mini_new_message:hover {
  background:url(https://i.ibb.co/JvxxbZW/rosa-3.png) no-repeat;
}

/* Icon: Logout */
#i_icon_mini_logout {
  background: url() no-repeat;
}

#i_icon_mini_logout:hover {
  background: url(https://i.ibb.co/qpCP2t2/rosa-4.png) no-repeat;
}

/* Icon: Register */
#i_icon_mini_register {
  background: url() no-repeat;
  width: 148px;
}
#i_icon_mini_register:hover {
  background: url() no-repeat;
}

/* Icon: Login */
#i_icon_mini_login {
  background: url(https://i.servimg.com/u/f54/20/22/03/99/agora_11.png) no-repeat;
  width: 148px;
}
#i_icon_mini_login:hover {
  background:url() no-repeat;
}

Só houve a alteração das imagens "hover" passadas e imagens que convidados possam visualizar. No código existe espaços em branco para a adição das URL em falta, com comentários!


Atenciosamente,
pedxz.

N funcionou por completo, contudo, ficou muito espaço entre os menus, queria que fica-se tudo junto igual antes, e a da mensagem tá subindo para cima, dá uma olhada lá XD

#Edit
Foi fuçando e adicionando códigos ,mesmo sem entender, e consegui ajeitar,
agora falta a parte das fontes do títulos de categorias e fóruns ,como no exemplo do fórum que mandei

Iory escreveu:Foi fuçando e adicionando códigos ,mesmo sem entender, e consegui ajeitar,

Quais códigos? O que não entendeu, posso esclarecer, se quiser?

agora falta a parte das fontes do títulos de categorias e fóruns ,como no exemplo do fórum que mandei

Segundo o regulamento de suporte só é válida uma questão por tópico, sendo que se a primeira já foi resolvida diga, para que possamos arquivar o tópico.

Pedxz, você ajudou muito, era porque as imagens ficaram separadas, mas consegui ajeitar, já que era coisa simples, adicionei width. Muito obrigado, já foi solucionado