Alterar cores padrão de emblemas (Bronze, Prata, Ouro)

Dev
1

É possível alterar as cores dos emblemas de ouro, prata e bronze para 3 cores que combinem melhor com as cores do nosso tema? Gostaria de alterá-las para que combinem um pouco melhor.

2

Não sou um mago de CSS, mas esta seria a minha solução… Basta alterar as cores para o que quiser para combinar melhor com as cores do seu tema a partir de baixo. Também recomendo a leitura deste tópico, foi muito útil para mim no passado, pois ajudou-me a aprender a fazer coisas fixes no meu site.

Bronze

.badge-card .badge-contents .badge-icon.badge-type-bronze .fa {
    color: #cd7f32 !important;
}

Prata

.badge-card .badge-contents .badge-icon.badge-type-silver .fa {
    color: silver !important;
}

Ouro

.badge-card .badge-contents .badge-icon.badge-type-gold .fa {
    color: #e7c300 !important;
}
6 curtidas
4

Lenda. Muito obrigado!

5

Você só usa o inspetor para encontrar coisas? Consegui alterar tudo, mas agora estou tentando trabalhar nas que aparecem no cartão do usuário. O inspetor do Chrome é o caminho para tentar descobrir como as coisas são nomeadas?

6

Sim, basta inspecionar os elementos para encontrar a classe do que você precisa para fazer personalizações. Eu acho o guia de estilo útil também.

3 curtidas
7

Incrível! Esse guia de estilo é fundamental. Literalmente me ajudou a ajustar tudo (estilização antes do lançamento). Você sabe se é possível acessar a seção de administração a partir dele? Não consegui encontrar. A única coisa que resta a resolver é a cor dos usuários por nível de confiança. Tentei inspecionar, mas nada mudava esse pequeno contêiner de cor bronze. Esta é a tarefa final e estou determinado a concluí-la hoje, haha

Screenshot 2023-07-30 at 8.02.18 AM
Screenshot 2023-07-30 at 8.02.18 AM560×222 4.31 KB

8

isso está no painel do administrador, então os usuários normais não o verão de qualquer maneira. mas aqui está:

TL 1:

.user-metrics .table-cell.user-basic {
    background: [insira o código de cor ou variável aqui];
}

TL 2:

.user-metrics .table-cell.user-member {
    background: [insira o código de cor ou variável aqui];
}

TL 3:

.user-metrics .table-cell.user-regular {
    background: [insira o código de cor ou variável aqui];
}

TL 4:

.user-metrics .table-cell.user-leader {
    background: [insira o código de cor ou variável aqui];
}
4 curtidas
9

Incrível. Meu TOC agradece muito!!! :joy:

1 curtida