Diferencie os ícones de escudo de Admin e Moderador

[codinghorror (Jeff Atwood)]

Given the surprising level of difficulty, maybe we should just leave this be… not like it is broken the way it is.

[cosdesign (Cos)]

I know it’s late but I just want to share my solution to display that admin crown ( so far only on topic’s page ) by using CSS and JS. I could also use some help cause for some reason my js code is not working…I can see it in that inline theme js file but still not working ( works well on jsfiddle though )

CSS

.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;

}

JS ( to display the title on hover - but as I said is not working when I include it inside )
Working Jsfiddle demo

var cdcrowntitle = document.querySelector(".names .admin a");
cdcrowntitle.setAttribute("title", "Community Admin");

[dandv (Dan Dascalescu)]

Recebi o mesmo feedback de um dos nossos moderadores. Algum progresso/ideia para diferenciar os ícones de administrador/moderador nos últimos 2 anos?

[Lilly]

não vi em nenhum lugar neste tópico, mas uso CSS no meu fórum para criar escudos de cores diferentes para moderadores e administradores nas postagens (se os administradores forem membros de grupos de moderadores). no meu caso, os mods recebem escudos dourados e os admins, cinzas. mas pode-se usar qualquer cor nessas propriedades de cor, é claro.

css comum

// * muda a cor do escudo nas postagens diferenciando usuários admin e mod* //

span.username {
  &.moderator .d-icon.d-icon-shield-alt {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-alt {
    color: #969696;
  }
}

não me preocupei em fazer isso para cartões de usuário ou perfis, mas suponho que eu conseguiria descobrir.

você também pode mudar a cor dos nomes de usuário de moderadores e administradores nas postagens para distingui-los ainda mais:

// * muda a cor dos nomes de usuário diferenciando admins e mods* //

span.username {
  &.moderator a {
    color: #d5b907;
  }
  &.admin a {
    color: #969696;
  }
}

[Turtle]

A mudança de cor do escudo não funcionou - ainda parecia cinza para ambos. O seletor mudou desde que isso foi postado?

[NateDhaliwal]

Possivelmente. Uma rápida inspeção da página pode ajudá-lo a determinar a classe.

[Canapin (Coin-coin le Canapin)]

O ícone agora se chama d-icon-shield-halved.

[Lilly]

sim, o nome do ícone mudou, então deveria ser assim

span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-halved {
    color: #969696;
  }
}

resultado

[Turtle]

Obrigado, Lilly! E… CocoQuark, como quer que se escreva.

[Heliosurge (Dan DeMontmorency)]

@Lilly

o nome do ícone mudou, então deveria ser assim

span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-halved {
    color: #969696;
  }
}

Só estava pensando se queríamos trocar, digamos, o ícone do admin pelo chapéu de mago, trocaríamos a cor com display none e depois adicionaríamos uma linha com o .d-icon.d-icon-wizard? (Não tenho certeza do ícone do chapéu de mago de imediato)

[Turtle]

O fa é:
fa-solid fa-hat-wizard
Então, qual seria o CSS, então? Se eu quisesse mudar o ícone de administrador para hat-wizard?

[Canapin (Coin-coin le Canapin)]

@Turtle

Então, qual seria o CSS, então? Se eu quisesse mudar o ícone de administrador para hat-wizard?

O mesmo CSS.
A classe ainda será d-icon-shield-halved, independentemente do ícone que você substituiu, se você usar este método de substituição:

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[Lilly]

A maneira mais fácil de fazer isso é como com o mesmo código acima, mas também com código de substituição de ícone na aba head-tag como esta:

em

<script type="text/discourse-plugin" version="0.8"> 
  
  api.replaceIcon('shield-halved', 'hat-wizard')

</script>

resultado:

[Turtle]

Funcionará para que os administradores tenham o chapéu e os moderadores o escudo? Ou ele simplesmente substitui todos eles como na imagem, e se sim, há alguma maneira de contornar isso?

[Lilly]

bem, você pode ser capaz de hackear um CSS condicional ou algum código no script lá. mas isso é substituição de ícone para todos.

[Turtle]

Na verdade, nem mesmo o ícone do assistente está funcionando no momento. Usei o código exato no cabeçalho que você me deu.
Posso tentar novamente, talvez tenha sido uma falha ou algo assim.

[Canapin (Coin-coin le Canapin)]

Você adicionou o ícone de chapéu de bruxo na configuração do site SVG icon subset?

[Jagster (Jakke Lehtonen)]

Esta é uma pergunta fora do tópico (OT), mas eu gostaria de manter o meio escudo para os moderadores. Mas eu gostaria muito de mostrar o chapéu de bruxo com os administradores ^[1]

Mas eu não posso substituir o meio escudo pelo chapéu, por causa dos moderadores.

Oh Deus…

@Turtle

Funcionará para que os administradores tenham o chapéu e os moderadores o escudo? Ou ele apenas substitui todos eles como na imagem, e se sim, há alguma maneira de contornar isso?

Eu realmente deveria começar a ler os tópicos Desculpe.

---

1. Tenho algumas mulheres de meia-idade no meu fórum, e elas são fãs de Potter; isso as irritaria muito ↩︎

[Jagster (Jakke Lehtonen)]

@Lilly

Eu não me incomodei em fazer isso para cartões de usuário ou perfis

No meu fórum, ele só aparece no cartão de usuário e nos perfis, mas não nos tópicos.

Alguma ideia do que fiz de errado novamente?

[Heliosurge (Dan DeMontmorency)]

Escudo svg para código revisado.

@Lilly

o nome do ícone do nyca mudou, então deve ser assim

span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-halved {
    color: #969696;
  }
}

resultado