Efeito hover nos fóruns

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

Resolvido Efeito hover nos fóruns

Mensagem por LuizLopes. em 10/07/13, 03:09 pm

Qual é minha questão:
Olá pessoal, gostaria de saber como coloco para ao passar o mouse (efeito hover) sobre o fórum de uma categoria ela aumentar o tamanho e a cor.

Obrigado desde já !
Att,

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

Versão do fórum:
PHPBB3


Última edição por luizdedezao em 10/07/13, 03:53 pm, editado 1 vez(es)
avatar

LuizLopes.
Usuário avançado

Masculino
Inscrito dia : 04/01/2011
Mensagens : 444
Pontos Ativos : 743

Ver perfil do usuário http://fenixextreme.forumeiros.com

Resolvido Re: Efeito hover nos fóruns

Mensagem por Hizu em 10/07/13, 03:11 pm

Saudações!

O senhor viu tal efeito em algum fórum? Se sim, poderia nos indicar o link? Caso não, detalhe o que deseja.

Atenciosamente,
Hizu. Piscada

Hizu
Nível 9

Masculino
Inscrito dia : 08/07/2013
Mensagens : 249
Pontos Ativos : 360

Ver perfil do usuário

Resolvido Re: Efeito hover nos fóruns

Mensagem por LuizLopes. em 10/07/13, 03:14 pm

@Hizu escreveu:Saudações!

O senhor viu tal efeito em algum fórum? Se sim, poderia nos indicar o link? Caso não, detalhe o que deseja.

Atenciosamente,
Hizu. Piscada

Saudações Hizu !
Sim ! Vi em um fórum da forumeiros, mas tal parecido seria deste fórum: http://www.pokeshiny.com/.
O efeito mudava porque além de ir para a direita e aumentar o tamanho e a cor, o fórum tinha efeito hover como sombra. Se poder repassar-lo também.
avatar

LuizLopes.
Usuário avançado

Masculino
Inscrito dia : 04/01/2011
Mensagens : 444
Pontos Ativos : 743

Ver perfil do usuário http://fenixextreme.forumeiros.com

Resolvido Re: Efeito hover nos fóruns

Mensagem por Hizu em 10/07/13, 03:18 pm

Olá novamente!

Aceda à sua "Folha de estilo CSS":
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de estilo CSS


Adicione este código no início ou final da tua CSS:
Código:
a.forumtitle {
-moz-transition: all 1s ease 0;
border-bottom: 1px solid #FF7B00;
border-left: 0 solid #FF7B00;
border-radius: 0 0 0 0;
color: #FF7B00!important;
display: block;
font-size: 14px;
padding-left: 0;
}
a.forumtitle:hover {
-moz-transition: all 1s ease 0;
border-bottom: 1px solid #02C27C;
border-left: 0 solid #02C27C;
color: #02C27C!important;
padding-left: 50px;
text-transform: uppercase;
}
a.forumtitle:hover {
color: #02c27c;
text-decoration: underline;
}
a.forumtitle {
color: #FF7B00;
text-decoration: underline;
}

Feito isto, salve!

Atenciosamente,
Hizu. Piscada

Hizu
Nível 9

Masculino
Inscrito dia : 08/07/2013
Mensagens : 249
Pontos Ativos : 360

Ver perfil do usuário

Resolvido Re: Efeito hover nos fóruns

Mensagem por LuizLopes. em 10/07/13, 03:26 pm

Ok Hizu ! O código funciona perfeitamente, só que o mesmo contradiz outro código na CSS que permite que a fonte se distancie para a esquerda, para não sobrepor os ícones.

Código:

Código:
ul.topiclist dd.dterm, ul.topiclist dt { display: block; font-size: 1.1em!important; padding-left: 50px !important; padding-right: 100px!important; width: 50%; }

Att,

Edit:

Tudo Ok ! Só era uma letra que estava impedindo que este código funcionasse, mas a sombra sobre o link ainda não está funcionando.
avatar

LuizLopes.
Usuário avançado

Masculino
Inscrito dia : 04/01/2011
Mensagens : 444
Pontos Ativos : 743

Ver perfil do usuário http://fenixextreme.forumeiros.com
  • 0

Resolvido Re: Efeito hover nos fóruns

Mensagem por Hizu em 10/07/13, 03:42 pm

Substitua o código atual, por este:
Código:
a:link{color:#ff7b00;text-decoration:none}a:visited{color:#944000;text-decoration:none}a:active{color:#ffca7f;text-decoration:underline}a:hover{color:#02c27c;text-decoration:none}a.forumtitle{color:#ff7b00;font-family:Gill Sans MT,Helvetica,sans-serif;font-size:1.2em;font-weight:700;text-decoration:none}a.forumtitle:hover{color:#02c27c;text-decoration:underline}a.forumtitle:active{color:#ffca7f}a.topictitle{color:#ff7b00;font-family:Segoe UI,Helvetica,sans-serif;font-size:1.1em;font-weight:700;text-decoration:none}div.topic-title-container{display:inline}.topic-title{display:inline;font-size:12px;text-align:left}a.topictitle:hover{color:#02c27c;text-decoration:underline}a.topictitle:active{color:#ffca7f}
a.forumtitle{-moz-transition:all 1s ease 0;border-bottom:1px solid #FF7B00;border-left:0 solid #FF7B00;border-radius:0 0 0 0;color:#FF7B00!important;display:block;font-size:14px;padding-left:0}a.forumtitle:hover{-moz-transition:all 1s ease 0;border-bottom:1px solid #02C27C;border-left:0 solid #02C27C;color:#02C27C!important;padding-left:50px;text-transform:uppercase}

Peguei o código completo, desde cores de links, até o efeito desejado.

Atenciosamente,
Hizu. Piscada

Hizu
Nível 9

Masculino
Inscrito dia : 08/07/2013
Mensagens : 249
Pontos Ativos : 360

Ver perfil do usuário

Resolvido Re: Efeito hover nos fóruns

Mensagem por LuizLopes. em 10/07/13, 03:53 pm

Olá Hizu ! Mais uma vez me salvando ! Hehe !
Ganhou meu + e meu Obrigado mais uma vez !

Att,
Tópico Resolvido
avatar

LuizLopes.
Usuário avançado

Masculino
Inscrito dia : 04/01/2011
Mensagens : 444
Pontos Ativos : 743

Ver perfil do usuário http://fenixextreme.forumeiros.com

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

- Tópicos similares

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