Adicionar o efeito arco-íris na seleção de cores

Detalhes da questão

Endereço do fórum: https://forumpbr.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Bom dia. Gostaria de colocar opção de deixar um tópico colorido (rainbow)tipo assim: https://prnt.sc/1132630 e assim: https://prnt.sc/11326kk     porém, necessito de ajuda com o código responsável por fazer isso.

Olá @-Lobisomen.,

Primeiramente entre no Painel de administração > Geral > Mensagens e e-mails > Configuração e ative a opção "Colorir os títulos dos tópicos".
Crie uma nova página JavaScript com investimento em todas as páginas e use o seguinte código:

Código:

$(function() {
  if (!document.post || !document.post.topic_color) return;
  var colors = {
    'Efeito arco-íris' : '#f7ffcc'
  },
  a, b = document.post.topic_color, c = b.childNodes, i = 0, j = c.length, k;
  for (k in colors) {
    a = document.createElement('OPTION');
    a.innerHTML = k;
    a.style.color = colors[k];
    a.value = colors[k];
    b.insertBefore(a, b.firstChild);
  };
  for (; i<j; i++) if (c[i].style.color == document.post.subject.style.color) c[i].selected = 1;
});

Vá a sua folha de estilo e encontre:

Código:

.rainbow {

altere para

Código:

a[href^="/t"] > span[style^="color:#f7ffcc;"],
.rainbow {

Cordialmente,
pedxz.

Não houve alterações. :/   https://prnt.sc/11334hq

Qual é o endereço do seu fórum?! O fórum que o senhor preencheu no formulário não usa nenhum código que eu passei.

Tive um pequeno imprevisto na senha do fórum https://forumpbr.forumeiros.com/  nas senhas que possuem adm, tenho que esperar uma pessoa dar sinal de vida para eu pegar a senha que esqueci. Então, estou utilizando meu fórum secundário teste https://naointeressa.forumeiros.com/

Login: ContaTeste
Senha: forumeiros

Na sua folha de estilo encontre:

Código:

.rainbow {
    background: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: rainbow_animation 4s ease-in-out infinite;
    background-size: 400% 100%;
}
a[href^="/t"] > span[style^="color:#f7ffcc;"],
.rainbow {
}

e altere para

Código:

a[href^="/t"] > span[style^="color:#f7ffcc;"],
.rainbow {
    background: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: rainbow_animation 4s ease-in-out infinite;
    background-size: 400% 100%;
}

Parece que funcionou, porém, ficou meio bugado. Consegue logar na conta que inseri para ver como está?

Altere esta linha animation: rainbow_animation 4s ease-in-out infinite; para animation: rainbow 4s ease-in-out infinite;

Ficou arco-íris, porém assim  https://prnt.sc/1133sl5  È normal?

O senhor quer retirar a linha abaixo da hiperligação que aparece quando passa o cursor em cima? Se sim, adicione na sua folha de estilo o seguinte código:

Código:

a:hover,
a:focus {
      text-decoration: none !important;
}

Funcionou, muito obrigado pela eficiência   , nota: 100. Pode fechar o tópico

Tópico resolvido Movido para "Questões resolvidas".