Moderator username color

Hi,

Could anyone help to explain step by step how to give moderators a different username color say Red.

Thank you
Rob

1 Like

Customize > CSS

span.username.staff a { color: red }
3 Likes

Add the following to your custom CSS:

.username.moderator {
color: red;
}

EDIT: cpradio’s code will make the username red in fewer locations than mine, which is more of a nuclear option :smiley:

2 Likes

Hmm… when I view source on my sandbox, the posts do not have .moderator, I wonder if you have to specify that somehow…

Oh, I see… (sort of). .staff will likely include admins too, .moderator will only include those with moderator set to true (which may exclude some admins).

1 Like

Thanks to you both, do I add it to the main css ? or one of the tabs like , Top etc

Admin > Customize > CSS/HTML > CSS, be sure to add it there then click the mobile icon (top right) and add it there too.

1 Like

Thanks again I added an image just to make sure it’s the right place.

1 Like

Yep, right place. And you’ll want to click that mobile icon next to the resize indicator if you want it to show red on mobile too.

You have to apply the single line to both places. Then hit Save.

2 Likes

Just perfect, Thanks so much :slight_smile:

2 Likes

Hi again,

How could I give a particular member name a color ?

Basic CSS, it’s only a matter of finding the best selector and applying the rules you want.

div.topic-meta-data div.names span.username a[data-user-card=rob1] {
  color: #0F0;
}

I certainly hope you don’t need to do this for a lot of names.

3 Likes

Thanks very much for all the help and the link :slight_smile:

1 Like

Just a quick Q it worked great :slight_smile: but suppose I wanted to have the username rotate colors or animate in some way ?

I highly don’t recommend this, but

span.username a[data-user-card='rob1'] {
  -webkit-animation:rainbow 1s infinite;
  -ms-animation:rainbow 1s infinite;
  -o-animation:rainbow 1s infinite;
  animation:rainbow 1s infinite;
}

@-webkit-keyframes rainbow {
  0% {color: #ff0000;}
  10% {color: #ff8000;}
  20% {color: #ffff00;}
  30% {color: #80ff00;}
  40% {color: #00ff00;}
  50% {color: #00ff80;}
  60% {color: #00ffff;}
  70% {color: #0080ff;}
  80% {color: #0000ff;}
  90% {color: #8000ff;}
  100% {color: #ff0080;}
}

@-ms-keyframes rainbow {
  0% {color: #ff0000;}
  10% {color: #ff8000;}
  20% {color: #ffff00;}
  30% {color: #80ff00;}
  40% {color: #00ff00;}
  50% {color: #00ff80;}
  60% {color: #00ffff;}
  70% {color: #0080ff;}
  80% {color: #0000ff;}
  90% {color: #8000ff;}
  100% {color: #ff0080;}
}

@-o-keyframes rainbow {
  0% {color: #ff0000;}
  10% {color: #ff8000;}
  20% {color: #ffff00;}
  30% {color: #80ff00;}
  40% {color: #00ff00;}
  50% {color: #00ff80;}
  60% {color: #00ffff;}
  70% {color: #0080ff;}
  80% {color: #0000ff;}
  90% {color: #8000ff;}
  100% {color: #ff0080;}
}

@keyframes rainbow {
  0% {color: #ff0000;}
  10% {color: #ff8000;}
  20% {color: #ffff00;}
  30% {color: #80ff00;}
  40% {color: #00ff00;}
  50% {color: #00ff80;}
  60% {color: #00ffff;}
  70% {color: #0080ff;}
  80% {color: #0000ff;}
  90% {color: #8000ff;}
  100% {color: #ff0080;}
}
10 Likes

What have you done, you monster :smiley:

9 Likes

I know, I feel so ashamed :frowning:

7 Likes

Thank you sorry for the delay will try them now hehe

Oh do I just use one of those
@keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
or do I put them all lol

I used them all works great, se it in action lol http://www.no-mans-sky.net/t/no-mans-sky-the-ultimate-exploration-game/284

1 Like

Any other neat tricks to liven up the site :)?