Differentiate Admin and Moderator Shield Icons

UX
28

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

29

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 )

SSd

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");
2 Likes
30

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

1 Like
31

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;
  }
}
4 Likes