Personalização dos nicks dos membros

Detalhes da questão

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

Descrição

Boa tarde,

procurei pela fórum do Forumeiros sobre a personalização de nicks dos membros, mas acabei não encontrando uma que me agradasse.
Gostaria que os nicks dos membros do meu fórum mudassem de acordo com o grupo que participam. Gostaria de efeitos semelhantes aos dessa imagem: https://prnt.sc/sujjqc . Alguns nicks até piscam... isso seria muito bom. Se puderem me disponibilizar algum código que faça esses efeitos, eu agradeço! Se existirem mais efeitos além desses que souberem e puderem me passar, eu também ficaria grato, ou até mesmo onde posso achá-los.

Att. Feranubis

Saudações,

Localize o template overall_header e clique no e depois localize a variável {CSS} e, logo abaixo dela, cole o código dos ícones:

Código:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" />

Ficando desse modo:

Código:

{CSS}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" />

Não esqueça de publicar o template.

Depois vai à folha de estilo CSS e coloque o código seguinte:

Código:

div [style*="#A62323"]::before {
    font-family: "Font Awesome 5 Free";
    content: '\f714';
    margin-right: 3px;
    font-weight: 1000;
    font-size: 12px;
}

Presta atenção nesses detalhes:

div [style*="#A62323"]::before {
   font-family: "Font Awesome 5 Free";
   content: '\f714';
   margin-right: 3px;
   font-weight: 1000;
   font-size: 12px;
}

O que deixei destaque é para você fazer as alterações de acordo com cada grupo, o primeiro que está destacado você deve colocar a mesma cor hexadecimal do grupo que está no momento (por exemplo, se você colocou primeiro grupo com a cor #ff0000, logo para colocar um ícone ao lado será "div [style*="#ff0000"]::before {", deve colocar como  e o segundo é o código de cada icone que você pode encontrar nesse site: https://fontawesome.com/icons?d=gallery

Atenciosamente,
Chagas

Obrigado, mas eu acho que não deu certo... eu fui até o site, salvei a imagem e depois copei o endereço da imagem e coloquei na folha CSS... mas ainda não entendi onde que especifico o grupo.

Ficou assim:

Código:



div [style*="#A62323"]::before {
   font-family: "https://i.imgur.com/3oVrQn1.png";
   content: '\f714';
   margin-right: 3px;
   font-weight: 1000;
   font-size: 12px;
}

Olá "@Feranubis_",

Fórum em manutenção Para que possamos dar continuidade, o seu fórum não pode estar em manutenção. Seu tópico ficará pendente até você retirar o modo de manutenção. Caso não seja retirado nos próximos dois dias, este será movido para lixeira. Tópico pendente.

Você não tem que colar o link da imagem no código, não é desse jeito que funciona.
Altere para o código passado anteriormente, para que possamos prosseguir e lhe explicar como funcionam os ícones.

Atenciosamente,
RafaelS.

Pronto.

Feranubis_ escreveu:Pronto.

Olá!

Você retirou todos os códigos do fórum? Volte a seguir os passos mencionados pelo ajudeiro @Chagas, por favor.

Atenciosamente,
RafaelS.

Eu acabei esquecendo a senha da conta fundadora do fórum, então agora preciso esperar 90 minutos pra tentar login novamente... se quiser fechar o caso, sem problemas... vou recomeçar do 0 assim que eu consegui entrar na conta.

Obrigado!

Att. Feranubis

Boa noite @Feranubis_,

Irei assumir a sua questão a partir de agora.
Retire todos os códigos passados neste tópico pelos meus colegas e adicione este código na sua folha de estilo CSS:

Código:

div [style*="#FF5900"]::before {
  font-family: "Font Awesome 5 Free"; 
  content:'\f2c2';
  margin-right: 3px;
  font-weight: 1000;
  font-size: 12px;
}

A cor #FF5900 pode e deve ser alterada pela cor do grupo que você quer adicionar o ícone. Esta cor pode ser conferida na página de Administração de Grupos. Você terá que criar um código deste para cada ícone que quiser adicionar.

O unicode f2c2 deve ser alterado pelo unicode do ícone que você deseja adicionar. A lista desses ícones pode ser conferida clicando aqui. Ao encontrar o ícone desejado, clique nele e repare na parte acima do ícone. Você verá algo semelhante a isso. O f6ae da imagem apresentada por mim é o unicode deste ícone. Você precisará pegar o unicode do ícone que deseja colocar ao lado do grupo.

Se a explicação acima estiver confusa, basta me informar que eu explico de outro modo.
Isso resolve a sua questão?
Chanp

Olá!

Consegui inserir a imagem, muito obrigado! Mas agora, como consigo fazê-la, junto aos nicks dos membros de determinado grupo, ficar piscando? Aguardo uma resposta! Obrigado!!!

Isso é efeito com uma propriedade do CSS chamada de animação mas, para utilizá-la, preciso que seja mais específico dizendo-me qual animação você deseja. Uma imagem ou algo do tipo ajudaria bastante.

Chanp

Olá @Feranubis_,

Adicione à sua folha de estilos (CSS), o seguinte código:

Código:

@keyframes rainbow {0% {background-position: 0% 82%;} 50% {background-position: 100% 19%;} 100% {background-position: 0% 82%;}}
a[style*="#FF5900"], span[style*="#FF5900"] {
    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;
}

O efeito será aplicado no grupo com a cor FF5900, para alterar procure esse valor no código.

Atenciosamente,
RafaelS.

Deu certo. Muito obrigado!