Personalizar Links

Detalhes da questão

Endereço do fórum: http://vgnfamily.forumais.com/
Versão do fórum: PunBB

Descrição

Olá, Novamente.

Gostaria de deixar os links do meu fórum iguais à este: http://www.brasilplaystart.com.br/forum/

1° Sem passar o mouse encima dos links ele fica assim:


2° Ao passar o mouse o link fica assim:

Olá,

Adicione este código ao final de sua Folha de Estilo CSS:

Código:

a {
  position: relative;
}

a:hover {
  color: #3091c1!important;
}

a:after {
  content: '';
  font-family: FontAwesome;
  position: absolute;
  right: 10px;
  transform: rotate(-90deg);
  opacity: 0;
  transition: all ease-in 300ms;
  color: #3091c1;
}

a:hover:after {
  right: -15px;
  transform: rotate(0deg);
  opacity: 1!important;
}

Funcionou porem ele aparece em todos links que tem do fórum, índice, Sub-Fóruns, Tópicos, Menu, todos todos links gostaria apenas nos links das últimas mensagens que aparece no índice do fórum.

Algumas prints: https://imgur.com/a/bFYro

Achei que o senhor queria em todos os links, desculpe.

Troque por este:

Código:

.tcr a {
  position: relative;
}
 
.tcr a:hover {
  color: #3091c1!important;
}
 
.tcr a:after {
  content: '';
  font-family: FontAwesome;
  position: absolute;
  right: 10px;
  transform: rotate(-90deg);
  opacity: 0;
  transition: all ease-in 300ms;
  color: #3091c1;
}
 
.tcr a:hover:after {
  right: -15px;
  transform: rotate(0deg);
  opacity: 1!important;
}

Até mais.

Quando passo o mouse encima do nick dos usuários nos últimos assuntos / Exibir a última mensagens .. ele continua aparecendo é possível remover destas parte?

Adicione mais este código CSS ao final de sua Folha de Estilo:

Código:

.tcr a[href*="/u"]::after,
.last-post-icon::after {
  content: ""!important;
}

o/

Perfeito apenas 2 coisas.

Como faço para mudar para está cor: #76BA6D

2° Quando passo mouse ele muda direto a cor né? fica azul direto.
Teria como tipo passar o mouse encima ele ir mudando de cor aos poucos?

YouTube3 escreveu:Perfeito apenas 2 coisas.

Se ainda faltam "coisas", então não está perfeito.

Enfim, adicione mais este código ao final de sua CSS:

Código:

.tcr a::after {
  color: #444!important;
}

.tcr a:hover::after {
  color: #76BA6D!important;
}

.tcr a:hover {
  color: #76BA6D!important;
}

Quando passa o mouse no link ele fica totalmente verde certo? muda a cor direto.

Gostaria de quando passar o mouse a cor do link ir mudando aos poucos tipo um efeito hover igual o ícone que aparece do lado quando passa o mouse no link.

Se você ir no fórum, do "Brasil Play Start" e passar o mouse no link deles você verá à diferença. É possível? Espero que entenda até mais.

Olá,

Adicione mais este código ao final de sua CSS:

Código:

a {
  transition: all .5s ease-in-out!important;
}

Então, no código, tem essa parte

.5s

o senhor pode mudar para um tempo à seu gosto, por exemplo,

.4s

é igual à um quarto de um segundo, e assim por diante.

No mais,

.5s

é o padrão daquele fórum. Mas lembre-se de sempre pedir permissão antes de copiar/plagiar algo ao autor/dono do fórum!

Sem problemas pode fechar obrigado.