Moderator username color


(Rob) #1

Hi,

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

Thank you
Rob


(cpradio) #2

Customize > CSS

span.username.staff a { color: red }

(Tom Newsom) #3

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:


(cpradio) #4

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).


(Rob) #5

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


(cpradio) #6

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


(Rob) #7

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


(cpradio) #8

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.


(Rob) #9

Just perfect, Thanks so much :slight_smile:


(Rob) #10

Hi again,

How could I give a particular member name a color ?


(Mittineague) #11

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.


(Rob) #12

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


(Rob) #13

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


(cpradio) #14

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

(Tom Newsom) #15

What have you done, you monster :smiley:


(cpradio) #16

I know, I feel so ashamed :frowning:


(Rob) #17

Thank you sorry for the delay will try them now hehe


(Rob) #18

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


(Rob) #19

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


(Rob) #20

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