Rank CSS e Rainbow.

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

Atendido / Resolvido Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 3:33

Detalhes da questão


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

Descrição


Olá!

Gostaria de saber se tem como ter um rank igual ao desse GIF:

https://imgur.com/gallery/JKqocaG

Dá para perceber que é CSS e tem uns efeitos Rainbow porém não consigo arranjar um modo de fazer ele.

Se for preciso, basta acessar o site https://policiarcc.com/forum e procurar por um usuário que tenha um nome com efeito Rainbow.

Aguardo respostas!
-Xerox-

-Xerox-
Nível 10

Masculino
Inscrito dia : 08/11/2019
Mensagens : 259
Pontos Ativos : 394

https://portalcrnblet.forumeiros.com/

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por pedxz 08.02.20 10:25

Olá @-Xerox-,

Adicione na sua folha de estilo o seguinte código:
Código:
.rank {
 color: #fff;
 font-size: 13px;
 font-weight: 600;
 height: 36px;
 width: 160px;
 margin: 5px auto;
 border-radius: 12px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 0 1px 1px rgba(0, 0, 0, .1);
 text-align: center;
 line-height: 33px;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.rank.admin {
 background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
 background-size: 1800% 1800%;
 -webkit-animation: rainbow 18s ease infinite;
 -z-animation: rainbow 18s ease infinite;
 -o-animation: rainbow 18s ease infinite;
 animation: rainbow 18s ease infinite;
}

@-webkit-keyframes rainbow {
 0% {
 background-position: 0% 82%
 }
 50% {
 background-position: 100% 19%
 }
 100% {
 background-position: 0% 82%
 }
}

@-moz-keyframes rainbow {
 0% {
 background-position: 0% 82%
 }
 50% {
 background-position: 100% 19%
 }
 100% {
 background-position: 0% 82%
 }
}

@-o-keyframes rainbow {
 0% {
 background-position: 0% 82%
 }
 50% {
 background-position: 100% 19%
 }
 100% {
 background-position: 0% 82%
 }
}

@keyframes rainbow {
 0% {
 background-position: 0% 82%
 }
 50% {
 background-position: 100% 19%
 }
 100% {
 background-position: 0% 82%
 }
}
Ao criar o rank em Painel de controle > Usuários e grupos > Ranks > Administração dos ranks ponha na opção "Título do Rank"
Código:
<div class="rank admin">Administrador</div>

Aguardarei uma resposta sua, caso tenha dúvidas!
Atenciosamente,
pedxz.


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5841
Pontos Ativos : 6950

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 11:46

Olá!

Agradeço pela ajuda e esforço. Funcionou, mas tem como ao invés de ser em um rank ser em um grupo e em seus usuários esse efeito?

Aguardo respostas! Tchau
-Xerox-

-Xerox-
Nível 10

Masculino
Inscrito dia : 08/11/2019
Mensagens : 259
Pontos Ativos : 394

https://portalcrnblet.forumeiros.com/

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por pedxz 08.02.20 11:58

Use o seguinte código:
Código:
a[href^="/u"] span[style$="#000000"] strong {
   background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-size: 1800% 1800%;
   -webkit-animation: rainbow 18s ease infinite;
   -z-animation: rainbow 18s ease infinite;
   -o-animation: rainbow 18s ease infinite;
   animation: rainbow 18s ease infinite;
}

@-webkit-keyframes rainbow {
   0% {
      background-position: 0% 82%
   }
   50% {
      background-position: 100% 19%
   }
   100% {
      background-position: 0% 82%
   }
}

@-moz-keyframes rainbow {
   0% {
      background-position: 0% 82%
   }
   50% {
      background-position: 100% 19%
   }
   100% {
      background-position: 0% 82%
   }
}

@-o-keyframes rainbow {
   0% {
      background-position: 0% 82%
   }
   50% {
      background-position: 100% 19%
   }
   100% {
      background-position: 0% 82%
   }
}

@keyframes rainbow {
   0% {
      background-position: 0% 82%
   }
   50% {
      background-position: 100% 19%
   }
   100% {
      background-position: 0% 82%
   }
}
Localize #000000 e mude para a cor do grupo que o senhor deseja adicionar o efeito!


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5841
Pontos Ativos : 6950

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 12:21

Olá!

Que estranho, não funcionou Chorando ou muito tr

-Xerox-

-Xerox-
Nível 10

Masculino
Inscrito dia : 08/11/2019
Mensagens : 259
Pontos Ativos : 394

https://portalcrnblet.forumeiros.com/

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por pedxz 08.02.20 13:06

O código não esta adicionado na sua folha de estilo (ver) Envergonhado O código é totalmente funcional, basta alterar a cor do grupo para a pretendida e ter a opção "Melhorar seu CSS" desativada ("Não")!


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5841
Pontos Ativos : 6950

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 14:05

Olá!

Eu fiz o que você pediu mas mesmo assim não funcionou.
-Xerox-

-Xerox-
Nível 10

Masculino
Inscrito dia : 08/11/2019
Mensagens : 259
Pontos Ativos : 394

https://portalcrnblet.forumeiros.com/

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por pedxz 08.02.20 14:14

O senhor tem alguma conta teste para poder ver qual é o problema com o fórum, agradecia!


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5841
Pontos Ativos : 6950

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 14:47

Olá!

-Xerox-

-Xerox-
Nível 10

Masculino
Inscrito dia : 08/11/2019
Mensagens : 259
Pontos Ativos : 394

https://portalcrnblet.forumeiros.com/

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por pedxz 08.02.20 14:56

Acabei de testar no seu fórum e funcionou, use:
Código:
a[href^="/u"] span[style$="#00B0F0"] strong {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 1800% 1800%;
    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
}


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5841
Pontos Ativos : 6950

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 15:03

Olá!

Funcionou, porém o ícone não foi.
-Xerox-

-Xerox-
Nível 10

Masculino
Inscrito dia : 08/11/2019
Mensagens : 259
Pontos Ativos : 394

https://portalcrnblet.forumeiros.com/

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por pedxz 08.02.20 15:07

Peço perdão! Altere para:
Código:
a[href^="/u1"] span[style$="#00B0F0"] strong, a[href^="/u1"] span[style$="#00B0F0"]::before {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 1800% 1800%;
    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
}


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5841
Pontos Ativos : 6950

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 15:10

Olá!

Mais uma pergunta, na parte que for olhar o perfil o efeito não aparece no nome. Como se ele não existisse sabe?
Tem como fazer com que ele apareça no perfil também?
-Xerox-

-Xerox-
Nível 10

Masculino
Inscrito dia : 08/11/2019
Mensagens : 259
Pontos Ativos : 394

https://portalcrnblet.forumeiros.com/

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por pedxz 08.02.20 15:16

Adicione na sua folha de estilo, o seguinte código:
Código:
div#cp-main h1 span[style$="#00B0F0"] strong, div#cp-main h1 span[style$="#00B0F0"]:before, div#profile-advanced-right .h3 span[style$="#00B0F0"] strong, #profile-advanced-right .h3 span[style$="#00B0F0"]:before {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 1800% 1800%;
    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
}


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5841
Pontos Ativos : 6950

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 15:20

Olá!

Não fez efeito, olhe lá.
-Xerox-

-Xerox-
Nível 10

Masculino
Inscrito dia : 08/11/2019
Mensagens : 259
Pontos Ativos : 394

https://portalcrnblet.forumeiros.com/

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por pedxz 08.02.20 15:25

@Pedxz escreveu:O código não esta adicionado na sua folha de estilo (ver) Envergonhado
Mesma situação. O senhor salvou? Ou pode ser um problema do cache Envergonhado


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5841
Pontos Ativos : 6950

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 15:34

Olá!

Peço perdão, acho que não salvei rsrs.

Mais duas perguntas se não se importa.

Tem como fazer o efeito com o grupo?

E tem como colocar um ícone da font awesome no rank?
-Xerox-

-Xerox-
Nível 10

Masculino
Inscrito dia : 08/11/2019
Mensagens : 259
Pontos Ativos : 394

https://portalcrnblet.forumeiros.com/

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por pedxz 08.02.20 15:39

Para adicionar o ícone ao rank basta adicionar a classe, exemplo:
Código:
<div class="rank admin"><i class="fa fa-archive"></i> Administrador</div>

O Efeito para o grupo é:
Código:
a[href^="/g1-"] {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 1800% 1800%;
    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
}


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Moderadeiro
pedxz

pedxz
Moderadeiro
Moderadeiro

Inscrito dia : 13/01/2017
Mensagens : 5841
Pontos Ativos : 6950

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 15:56

Olá!

Muito obrigado pela ajuda. Deus te abençoe.

Poderia me ajudar com a outra questão se não se importa?

Pode fechar!
-Xerox-

-Xerox-
Nível 10

Masculino
Inscrito dia : 08/11/2019
Mensagens : 259
Pontos Ativos : 394

https://portalcrnblet.forumeiros.com/

Atendido / Resolvido Re: Rank CSS e Rainbow.

Mensagem por Convidado 08.02.20 15:58

Questão resolvida

Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.
Anonymous

Convidado
Convidado


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


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