Differentiate Admin and Moderator Shield Icons

[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)]

Got the same feedback from one of our moderators. Any progress/ideas on differentiating the admin/moderator icons in the past 2 years?

[Lilly]

didn’t see it anywhere in this topic but i use CSS on my forum to make different colored shields for mods and admins for posts (if admins are members of moderator groups). in my case, mods get gold shields and admins get grey. but one can use any color in those color properties of course.

common css

// * change shield color in posts differentiating admin and mod users* //

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

i haven’t bothered to do it for user cards or profiles but i suppose i could figure it out.

you can also change the color of the moderator and admin usernames in posts to distinguish them further:

// *change color of usernames differentiating admins and mods* //

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

[Turtle]

The shield color change didn’t work- it still looked the same grey for both. Has the selector changed since this was posted?

[NateDhaliwal]

Possibly. A quick inspect of the page can help you determine the class.

[Canapin (Coin-coin le Canapin)]

The icon is now named d-icon-shield-halved.

[Lilly]

yea icon name changed so it should be like this

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

result

[Turtle]

Thanks Lilly! And… CocoQuark, however you spell that.

[Heliosurge (Dan DeMontmorency)]

@Lilly

yea icon name changed so it should be like this

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

Just wondering if we wanted to swap say the admin icin with the Wizard hat would swap color with display none and then add a line with the .d-icon.d-icon-wizard? (Not sure of the wizard hat fa off hand)

[Turtle]

The fa is:
fa-solid fa-hat-wizard
So what would the css be, then? If I wanted to change the admin icon to hat-wizard?

[Canapin (Coin-coin le Canapin)]

@Turtle

So what would the css be, then? If I wanted to change the admin icon to hat-wizard?

The same CSS.
The class will still be d-icon-shield-halved regardless of the icon you replaced with, if you use this replacement method:

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]

Easiest way to do this is like with the same code as above, but also icon replacement code in head-tag tab like this:

in

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

</script>

result:

[Turtle]

Will it work so admins can have the hat and moderators the shield? Or does it just replace all of them like in the picture, and if so, is there a way around it?

[Lilly]

well you might be able to hack a conditional css or some code in the script there. but that is icon replacement for all.

[Turtle]

Actually, not even the wizard icon is working right now. I used the exact code in the head you gave me.
I can try again, maybe it was a glitch or something.

[Canapin (Coin-coin le Canapin)]

Did you add the wizard hat icon in the SVG icon subset site setting?

[Jagster (Jakke Lehtonen)]

This is an OT question, but I would like to keep halfshield for mods. But I would very much like to show the wizard hat with admins ^[1]

But I can’t replace half shield with the hat, because of moderators.

Oh god…

@Turtle

Will it work so admins can have the hat and moderators the shield? Or does it just replace all of them like in the picture, and if so, is there a way around it?

I really should start reading topics Sorry.

---

1. I have few middle aged women in my forum, and they are Potter fans; that would annoy them so much ↩︎

[Jagster (Jakke Lehtonen)]

@Lilly

i haven’t bothered to do it for user cards or profiles

On my forum it shows only on user card and profiles, but not on topics.

Any idea what I’ve done again?

[Heliosurge (Dan DeMontmorency)]

Shield svgfor revised code.

@Lilly

yea icon name changed so it should be like this

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

result