Efeito grupos rainbow

por Bramodz 07.02.21 16:46

Detalhes da questão

Endereço do fórum: http://bramodz.forumeiros.com
Versão do fórum: AwesomeBB

Descrição

Olá, boa tarde, gostaria de saber como por efeito "Rainbow" (o grupo e o usuário ficam trocando de cor)
Tentei por duas horas procurar algum código mas dá erro, as vezes não aparece, quando aparece fica só no grupo e não no Membro etc.
Código usado:

Código:: a[href^="/g1-"], a[href^="/u"] span[style*="#FF0004"] { background: repeating-linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff); -webkit-background-clip: text; background-size: 1800% 1800%; -webkit-text-fill-color: transparent; animation: rainbow 3s ease infinite; } @keyframes rainbow {0% {background-position: 0% 82%;} 50% {background-position: 100% 19%;} 100% {background-position: 0% 82%;} }

Obrigado

por **tikky** 07.02.21 17:09

Olá @Bramodz,

No final da página onde o senhor edita a sua folha de estilo é possível encontrar a opção "Melhorar seu CSS" marque como "Não". Explicando o código:

Código:: a[href^="/g1-"], a[href^="/u"] span[style*="#FF0004"] {

Isto é a "configuração":

/g1- é o grupo que é o https://bramodz.forumeiros.com/g1-
#FF0004 é a cor de um grupo que não existe no seu fórum. A cor do grupo /g1- é, por exemplo, o #E80ECF

Para adicionar a mais que um grupo basta duplicar a primeira linha ficando:

Código:: a[href^="/g1-"], a[href^="/g2-"], a[href^="/u"] span[style*="#FF0004"] {

o mesmo para os membros do grupo com cor:

Código:: a[href^="/g1-"], a[href^="/g2-"], a[href^="/u"] span[style*="#FF0004"], a[href^="/u"] span[style*="#E80ECF"] {

Atenciosamente,
pedxz.

por **tikky** 07.02.21 17:38

No final da página onde o senhor edita a sua folha de estilo é possível encontrar a opção "Melhorar seu CSS" marque como "Não".

por Bramodz 07.02.21 17:53

pedxz escreveu:
No final da página onde o senhor edita a sua folha de estilo é possível encontrar a opção "Melhorar seu CSS" marque como "Não".

Fiz isso mas some o nome mesmo assim nao tenho ideia o porque. Quando eu coloco para nao forcar o codigo e salvo, ele salva ai volta no CSS e esta selecionado para forcar.

Código:: a[href^="/g1-"], a[href^="/u"] span[style*="#E80ECF"] { background: repeating-linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff); -webkit-background-clip: text; background-size: 1800% 1800%; -webkit-text-fill-color: transparent; animation: rainbow 3s ease infinite; }

Desculpa a demora, tive que ligar o notebook para melhor entendimento, no celular nao consigo copiar o codigo e te mandar, e um outro problema tambem que preciso arrumar depois

por **tikky** 07.02.21 18:08

No final da página onde o senhor edita a sua folha de estilo é possível encontrar a opção "Melhorar seu CSS" marque como "Não".
Fiz isso mas some o nome mesmo assim nao tenho ideia o porque

O senhor deve clicar em "Salvar"

por Bramodz 07.02.21 18:26

pedxz escreveu:
No final da página onde o senhor edita a sua folha de estilo é possível encontrar a opção "Melhorar seu CSS" marque como "Não".
Fiz isso mas some o nome mesmo assim nao tenho ideia o porque
O senhor deve clicar em "Salvar"

Falta de atenção minha kkk perdão Envergonhado

! Mas ainda não funciona, mas agora a cor ficou vermelha sendo que coloquei a mesma cor do rank (rosa)

por **tikky** 07.02.21 18:28

Falta a animação, basta substituir o código atual pelo código da sua primeira mensagem

cor do rank (rosa)

Qual é o grupo? Para puder ajudar a "configurar" o efeito Rosa

por Bramodz 07.02.21 18:31

pedxz escreveu:Falta a animação, basta substituir o código atual pelo código da sua primeira mensagem

cor do rank (rosa)
Qual é o grupo? Para puder ajudar a "configurar" o efeito

"Fundador"

por **tikky** 07.02.21 18:35

Altere o seu código CSS para:

Código:: a[href^="/g1-"], a[href^="/u"] span[style$="#E80ECF"], .color-groups[style$="#E80ECF"] { background: repeating-linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff); -webkit-background-clip: text; background-size: 1800% 1800%; -webkit-text-fill-color: transparent; animation: rainbow 3s ease infinite; } @keyframes rainbow {0% {background-position: 0% 82%;} 50% {background-position: 100% 19%;} 100% {background-position: 0% 82%;} }

por Bramodz 07.02.21 18:41

pedxz escreveu:Altere o seu código CSS para:
Código:
a[href^="/g1-"], a[href^="/u"] span[style$="#E80ECF"], .color-groups[style$="#E80ECF"] { background: repeating-linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff); -webkit-background-clip: text; background-size: 1800% 1800%; -webkit-text-fill-color: transparent; animation: rainbow 3s ease infinite; } @keyframes rainbow {0% {background-position: 0% 82%;} 50% {background-position: 100% 19%;} 100% {background-position: 0% 82%;} }

Ficou PERFEITO IRMÃO, única coisa é que o Nick tá cortado no meio, creio que se eu sincronizar algo ou limpar cache volta

por **tikky** 07.02.21 19:01

única coisa é que o Nick tá cortado no meio

Infelizmente isso é um problema que não tem solução, acontece caso o senhor use o "Site para computador" por um dispositivo móvel.

por RafaelS. 07.02.21 19:06

pedxz escreveu:
única coisa é que o Nick tá cortado no meio
Infelizmente isso é um problema que não tem solução, acontece caso o senhor use o "Site para computador" por um dispositivo móvel.

Olá @Bramodz,

Tente efetivamente limpar os dados do seu navegador (cookies / cache) e verifique novamente, pois eu acessei o seu fórum via um dispositivo móvel e não me deparei com erro nenhum no efeito do nick.

Até mais,
RafaelS. zen

por Bramodz 07.02.21 19:09

Muito obrigado galera, agora ficou perfeito, limpei o cache deu certo, valeu mesmo, estou muito feliz!

por **tikky** 07.02.21 19:10

Tópico resolvido

Movido para "Questões resolvidas".

Hitskin.com

Efeito grupos rainbow