Efeito Hover da barra de navegação

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Efeito Hover da barra de navegação

Mensagem por Iory 09.06.20 4:32

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
Iory

Iory
*

Membro desde : 28/05/2020
Mensagens : 45
Pontos : 73

https://www.magidesign.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Efeito Hover da barra de navegação

Mensagem por tikky 09.06.20 9:17

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.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Hover da barra de navegação

Mensagem por Iory 09.06.20 17:33

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

Iory
*

Membro desde : 28/05/2020
Mensagens : 45
Pontos : 73

https://www.magidesign.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Efeito Hover da barra de navegação

Mensagem por tikky 09.06.20 23:49

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.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Hover da barra de navegação

Mensagem por Iory 09.06.20 23:56

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 Muito feliz
Iory

Iory
*

Membro desde : 28/05/2020
Mensagens : 45
Pontos : 73

https://www.magidesign.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito Hover da barra de navegação

Mensagem por Chanp 09.06.20 23:57

Tópico resolvido


Movido para "Questões resolvidas".
Chanp

Chanp
Super Membro

Membro desde : 04/01/2018
Mensagens : 1072
Pontos : 1191

https://2forum2.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos