Efeito RPG no ícone antes do grupo/nome Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema

Fórum dos Fóruns

Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Efeito RPG no ícone antes do grupo/nome

2 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

Ir para baixo

Tópico resolvido Efeito RPG no ícone antes do grupo/nome

Mensagem por Aluuadoo 09.12.21 19:36

Detalhes da questão


Endereço do fórum: https://policiadme.forumeiros.com/
Versão do fórum: AwesomeBB

Descrição


Olá! Boa tarde.

Tive um imprevisto com a folha de estilo do meu fórum e tive que refazer os códigos, porém empaquei numa parte onde o Grupo "Supremacia" tem o efeito RPG, inclusive o ícone no prefixo dele, junto com seus membros, porém o ícone não está com o efeito, está com a cor do grupo somente, como resolvo?

Código:
Código:
#borderDemo {
border: 18px outset #3490C2;
border-radius: 12px 12px 12px 12px;
}

.folha1 {
  border-top: 0px solid #3c6e54;
  background: #3c6e54;
  background: -webkit-gradient(linear, left top, left bottom, from(#3490C2), to(#3490C2));
  background: -webkit-linear-gradient(top, #3490C2, #3490C2);
  background: -moz-linear-gradient(top, #3490C2, #3490C2);
  background: -ms-linear-gradient(top, #3490C2, #3490C2);
  background: -o-linear-gradient(top, #3490C2, #3490C2);
  padding: 5.5px 11px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-box-shadow: rgba(0,0,0,1) 0 0px 0;
  -moz-box-shadow: rgba(0,0,0,1) 0 0px 0;
  box-shadow: rgba(0,0,0,1) 0 0px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  color: white;
  font-size: 25px;
  font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
  text-decoration: none;
  vertical-align: middle;
  }
.folha1:hover {
  border-top-color: #6bb5df;
  background: #6bb5df;
  color: #000000;
  }
.folha1:active {
  border-top-color: #000000;
  background: #000000;
  }
#demotext {
text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC, 2px 2px 2px rgba(255,255,255,0);
color: #3490C2;
background: #f2f2f2;
}

#demotext2 {
text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC, 2px 2px 2px rgba(255,255,255,0);
color: #000000;
background: #F2F2F2;
}

.Requerimentos {
   box-shadow:inset 0px 1px 0px 0px #ffffff;
   background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
   background-color:#f9f9f9;
   border-radius:6px;
   border:1px solid #dcdcdc;
   display:inline-block;
   cursor:pointer;
   color:#666666;
   font-family:Arial;
   font-size:15px;
   font-weight:bold;
   padding:6px 24px;
   text-decoration:none;
   text-shadow:0px 1px 0px #ffffff;
}
.Requerimentos:hover {
   background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
   background-color:#e9e9e9;
}
.Requerimentos:active {
   position:relative;
   top:1px;
}
a[style*="#B254F0"], span[style*="#B254F0"]  {
    animation-name: mudarCorHancki;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
@keyframes mudarCorHancki {
    0% {
        color: red; 
    }
    20% {
        color: #FF7F00; 
    }
    40% {
        color: #FFFF00; 
    }
    60% {
        color: #00FF00; 
    }
    80% {
        color: #0000ff; 
    }
    100% {
        color: #8f00ff; 
    }
}
@-webkit-keyframes mudarCorHancki {
    0% {
        color: red; 
    }
    20% {
        color: #FF7F00; 
    }
    40% {
        color: #FFFF00; 
    }
    60% {
        color: #00FF00; 
    }
    80% {
        color: #0000ff; 
    }
    100% {
        color: #8f00ff; 
    }
}
div [style*="#B254F0"]::before {
  font-family: "Font Awesome 5 Free";
  content:'\f24e';
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
 
}
    a[style*="#B254F0"], span[style*="#B254F0"] {
    font-weight: bold;
}
div [style*="#B254F0"]::before {
  font-family: "Font Awesome 5 Free"; 
  content:'\f24e';
  color: #B254F0;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
}   
a[style*="#8A0000"], span[style*="#8A0000"] {
    font-weight: bold;
}
div [style*="#8A0000"]::before {
  font-family: "Font Awesome 5 Free"; 
  content:'\f714';
  color: #8A0000;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
}
a[style*="#030303"], span[style*="#030303"] {
    font-weight: bold;
}
div [style*="#030303"]::before {
  font-family: "Font Awesome 5 Free"; 
  content:'\f0e3';
  color: #030303;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
}
a[style*="#663300"], span[style*="#663300"] {
    font-weight: bold;
}
div [style*="#663300"]::before {
  font-family: "Font Awesome 5 Free"; 
  content:'\f2bb';
  color: #663300;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
}
a[style*="#36B5E3"], span[style*="#36B5E3"] {
    font-weight: bold;
}
div [style*="#36B5E3"]::before {
  font-family: "Font Awesome 5 Free"; 
  content:'\f51c';
  color: #36B5E3;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
}
a[style*="#466E46"], span[style*="#466E46"] {
    font-weight: bold;
}
div [style*="#466E46"]::before {
  font-family: "Font Awesome 5 Free"; 
  content:'\f21b';
  color: #466E46;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
}
Aluuadoo
Aluuadoo
Novo Membro

Membro desde : 20/08/2018
Mensagens : 24
Pontos : 42

https://testelusca.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito RPG no ícone antes do grupo/nome

Mensagem por Musashi 09.12.21 21:54

Boa noite @Aluuadoo,

Modifique sua Folha de Estilo (CSS) para essa:

Código:
#borderDemo {
border: 18px outset #3490C2;
border-radius: 12px 12px 12px 12px;
}
 
.folha1 {
  border-top: 0px solid #3c6e54;
  background: #3c6e54;
  background: -webkit-gradient(linear, left top, left bottom, from(#3490C2), to(#3490C2));
  background: -webkit-linear-gradient(top, #3490C2, #3490C2);
  background: -moz-linear-gradient(top, #3490C2, #3490C2);
  background: -ms-linear-gradient(top, #3490C2, #3490C2);
  background: -o-linear-gradient(top, #3490C2, #3490C2);
  padding: 5.5px 11px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-box-shadow: rgba(0,0,0,1) 0 0px 0;
  -moz-box-shadow: rgba(0,0,0,1) 0 0px 0;
  box-shadow: rgba(0,0,0,1) 0 0px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  color: white;
  font-size: 25px;
  font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
  text-decoration: none;
  vertical-align: middle;
  }
.folha1:hover {
  border-top-color: #6bb5df;
  background: #6bb5df;
  color: #000000;
  }
.folha1:active {
  border-top-color: #000000;
  background: #000000;
  }
#demotext {
text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC, 2px 2px 2px rgba(255,255,255,0);
color: #3490C2;
background: #f2f2f2;
}
 
#demotext2 {
text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC, 2px 2px 2px rgba(255,255,255,0);
color: #000000;
background: #F2F2F2;
}
 
.Requerimentos {
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
  background-color:#f9f9f9;
  border-radius:6px;
  border:1px solid #dcdcdc;
  display:inline-block;
  cursor:pointer;
  color:#666666;
  font-family:Arial;
  font-size:15px;
  font-weight:bold;
  padding:6px 24px;
  text-decoration:none;
  text-shadow:0px 1px 0px #ffffff;
}
.Requerimentos:hover {
  background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
  background-color:#e9e9e9;
}
.Requerimentos:active {
  position:relative;
  top:1px;
}
a[style*="#B254F0"], span[style*="#B254F0"]  {
    animation-name: mudarCorHancki;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
@keyframes mudarCorHancki {
    0% {
        color: red;
    }
    20% {
        color: #FF7F00;
    }
    40% {
        color: #FFFF00;
    }
    60% {
        color: #00FF00;
    }
    80% {
        color: #0000ff;
    }
    100% {
        color: #8f00ff;
    }
}
@-webkit-keyframes mudarCorHancki {
    0% {
        color: red;
    }
    20% {
        color: #FF7F00;
    }
    40% {
        color: #FFFF00;
    }
    60% {
        color: #00FF00;
    }
    80% {
        color: #0000ff;
    }
    100% {
        color: #8f00ff;
    }
}
div [style*="#B254F0"]::before {
  font-family: "Font Awesome 5 Free";
  content:'\f24e';
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
 
}
    a[style*="#B254F0"], span[style*="#B254F0"] {
    font-weight: bold;
}
div [style*="#B254F0"]::before {
  font-family: "Font Awesome 5 Free";
  content:'\f24e';
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
} 
a[style*="#8A0000"], span[style*="#8A0000"] {
    font-weight: bold;
}
div [style*="#8A0000"]::before {
  font-family: "Font Awesome 5 Free";
  content:'\f714';
  color: #8A0000;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
}
a[style*="#030303"], span[style*="#030303"] {
    font-weight: bold;
}
div [style*="#030303"]::before {
  font-family: "Font Awesome 5 Free";
  content:'\f0e3';
  color: #030303;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
}
a[style*="#663300"], span[style*="#663300"] {
    font-weight: bold;
}
div [style*="#663300"]::before {
  font-family: "Font Awesome 5 Free";
  content:'\f2bb';
  color: #663300;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
}
a[style*="#36B5E3"], span[style*="#36B5E3"] {
    font-weight: bold;
}
div [style*="#36B5E3"]::before {
  font-family: "Font Awesome 5 Free";
  content:'\f51c';
  color: #36B5E3;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
}
a[style*="#466E46"], span[style*="#466E46"] {
    font-weight: bold;
}
div [style*="#466E46"]::before {
  font-family: "Font Awesome 5 Free";
  content:'\f21b';
  color: #466E46;
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
}

Atenciosamente,
Wusthy.
Musashi
Musashi
Membro

Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762

https://luciothemes.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito RPG no ícone antes do grupo/nome

Mensagem por Aluuadoo 10.12.21 21:25

Obrigado, @Wusthy

Funcionou direitinho o/

Pode fechar.
Aluuadoo
Aluuadoo
Novo Membro

Membro desde : 20/08/2018
Mensagens : 24
Pontos : 42

https://testelusca.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito RPG no ícone antes do grupo/nome

Mensagem por Musashi 10.12.21 22:42

Tópico resolvido


Movido para "Questões resolvidas".
Musashi
Musashi
Membro

Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762

https://luciothemes.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum

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