Efeito Hover em nova MP

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

Atendido / Resolvido Efeito Hover em nova MP

Mensagem por Iory 09.06.20 21:27

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

Iory
Nível 5

Masculino
Inscrito dia : 28/05/2020
Mensagens : 42
Pontos Ativos : 64

https://www.magidesign.forumeiros.com

Atendido / Resolvido Re: Efeito Hover em nova MP

Mensagem por Chanp 09.06.20 21:45

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 Feliz
Chanp

Chanp
Membro do Fórum

Masculino
Inscrito dia : 04/01/2018
Mensagens : 1072
Pontos Ativos : 1191

https://2forum2.forumeiros.com/

Atendido / Resolvido Re: Efeito Hover em nova MP

Mensagem por Iory 09.06.20 21:56

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

Iory
Nível 5

Masculino
Inscrito dia : 28/05/2020
Mensagens : 42
Pontos Ativos : 64

https://www.magidesign.forumeiros.com

Atendido / Resolvido Re: Efeito Hover em nova MP

Mensagem por Chanp 09.06.20 22:20

Olá novamente,

Primeiramente, em Painel de Controle Flecha ajudeiros Visualização Flecha ajudeiros Imagens e Cores Flecha ajudeiros Gestão de Imagens Flecha ajudeiros Modo Avançado Flecha ajudeiros 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 Piscada
Chanp

Chanp
Membro do Fórum

Masculino
Inscrito dia : 04/01/2018
Mensagens : 1072
Pontos Ativos : 1191

https://2forum2.forumeiros.com/

Atendido / Resolvido Re: Efeito Hover em nova MP

Mensagem por Iory 09.06.20 22:31

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

Iory
Nível 5

Masculino
Inscrito dia : 28/05/2020
Mensagens : 42
Pontos Ativos : 64

https://www.magidesign.forumeiros.com

Atendido / Resolvido Re: Efeito Hover em nova MP

Mensagem por Chanp 09.06.20 23:25

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
Chanp

Chanp
Membro do Fórum

Masculino
Inscrito dia : 04/01/2018
Mensagens : 1072
Pontos Ativos : 1191

https://2forum2.forumeiros.com/

Atendido / Resolvido Re: Efeito Hover em nova MP

Mensagem por Iory 09.06.20 23:41

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
Iory

Iory
Nível 5

Masculino
Inscrito dia : 28/05/2020
Mensagens : 42
Pontos Ativos : 64

https://www.magidesign.forumeiros.com

Atendido / Resolvido Re: Efeito Hover em nova MP

Mensagem por Chanp 10.06.20 0:06

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
Chanp

Chanp
Membro do Fórum

Masculino
Inscrito dia : 04/01/2018
Mensagens : 1072
Pontos Ativos : 1191

https://2forum2.forumeiros.com/

Atendido / Resolvido Re: Efeito Hover em nova MP

Mensagem por Iory 10.06.20 0:10

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

Iory
Nível 5

Masculino
Inscrito dia : 28/05/2020
Mensagens : 42
Pontos Ativos : 64

https://www.magidesign.forumeiros.com

Atendido / Resolvido Re: Efeito Hover em nova MP

Mensagem por Chanp 10.06.20 0:18

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".
Chanp

Chanp
Membro do Fórum

Masculino
Inscrito dia : 04/01/2018
Mensagens : 1072
Pontos Ativos : 1191

https://2forum2.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum