Efeito Hover em nova MP

[Iory]

Detalhes da questão

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

Descrição

Quero colocar os mesmos efeitos hover do menu do meu fórum, só que,agora, na opção Novo Tópico, Responder Tópico e Nova mensagem privada. Teria como? Obrigado, novamente, pela atenção, vocês são Retirado por Chanp.

[Chanp]

Olá @Iory,

Em nome da Staff do Fórum dos Fóruns, agradeço pelo elogio, no entanto devo lembrar que palavras desse gênero não são permitidas nesse fórum.

Você poderia me ceder uma conta teste, por gentileza?

Fico no aguardo.
Chanp

[Iory]

Boa tarde Champ, entendo, mas vocês são 10 mesmo haha.
Não funcionou, ela não está alterando quando passo o mouse

[Chanp]

Olá novamente,

Primeiramente, em Painel de Controle Visualização Imagens e Cores Gestão de Imagens Modo Avançado Botões, defina a imagem dos botões "Nova mensagem privada", "responder ao tópico" e "criar novo tópico" para esta:

Código:

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

Agora irei explicar um por vez para ficar mais simples de entender.

1. Novo tópico

Primeiramente, delete o código que eu passei anteriormente e adicione este na folha de estilo:

Código:

#i_post {
    background: url(https://i.servimg.com/u/f54/20/22/03/99/magiar10.png) no-repeat;
}
#i_post:hover {
    background: url(IMAGEM) no-repeat;
}

Substitua o campo IMAGEM pela imagem que aparecerá após o efeito hover.

2. Nova mensagem privada.

Adicione este código na sua folha de estilo:

Código:

.i_msg_newpost {
    background: url(https://i.servimg.com/u/f54/20/22/03/99/magiar11.png) no-repeat;
}
.i_msg_newpost:hover {
    background: url(IMAGEM) no-repeat;
}

Substitua IMAGEM pela imagem que será exibida após o efeito hover.

3. Responder ao tópico.

Para aplicarmos o efeito hover neste, precisarei do seu template viewtopic_body.

Houve resultado?
Chanp

[Iory]

Chanp, testei mas não funcionou, ficou só a imagem .gif

[Chanp]

Olá novamente,

O moderadeiro @Pedxz lembrou-me de adicionar uma propriedade fundamental. Adicione abaixo dos códigos já passados este código:

Código:

#i_post, .i_msg_newpost {
    width: 100%;
    position: absolute;
}

Chanp

[Iory]

Agora deu certo haha, mas o problema é que a imagem ficou em cima dos tópicos, como pode conferir pela conta teste XD, também está muito rápido, teria que ser 0.5

[Chanp]

Olá,

Para consertar a transição e o distanciamento dos botões:

Código:

.i_msg_newpost:hover {
    transition: 0.5s;
}
.i_msg_newpost {
    margin-top: 2%;
}

Isso ocorre devido ao grande tamanho dos botões. Como são dois (um superior e um inferior), a combinação dos dois acaba por atrapalhar a visão da página de mensagens privadas. O que podemos fazer é retirar o botão superior. Acredito que isso traria uma melhor visualização da página e também deixaria mais agradável.

Se você deseja prosseguir com a ideia dada acima, basta me fornecer o seu template privmsgs_body.

Chanp

[Iory]

Entendo Chanp, acho melhor ,então, deixar sem o hover, devido à facilidade de ter dois botões em cima e em baixo, mas agradeço demais pela ajuda

[Chanp]

Na verdade, o problema não é causado pelo hover, mas sim pelo tamanho do botão. Gostaria de ter ajudado mais!

----

Tópico resolvido Movido para "Questões resolvidas".