Change titles color

[ogsocials]

.names span.Administrators a{color:#dc2e17}
I tried this code but not working.
And I tried
.staff span a{color:#FFF}
This working but I want to give every rank different color.
For example Admin title color red staff title color green.
How can I do this ?
Thank you !

[ronpat]

We need to see more code. We need to see how you have the HTML and CSS set up.

Can you post a link to your site or a “working page” that demonstrates the issue?

[coderboy]

You need to share HTML as well. There is no way to know why it’s not working just by looking CSS.

Anyway, for first to work, you HTML structure should be something like:

<anyTag class="names">
    <span class="Administrators"><a href="#">__</a></span>
</anyTag>
   

Note: <anyTag> is not an HTML tag. It can be any tag like section, div, ul etc.

Also, anyTag, span and a tag can have other child or parent elements .

[ogsocials]

@coderboy @ronpat
Thank you for your helps. Im using Discourse script.
My css codes :

.subcategories {
    width: 230px; 
}

body:before {
    display: inline-block;
    width: 1135px;
    min-height: 100%;
    height: inherit;
    background-color: #fcfcfc;
    content: " ";
    position: fixed;
    left: 50%;
    right: 0;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);

}
// compatibility for all devices
@media (max-width: 1139px) and (min-width: 1000px)
{
    body:before {
        width: 1010px;
    }
}

body.docked::before{
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
}

//use Roboto font
html {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
}
body input, body button, body select, body textarea {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
}

.badge-category-bg {
  position: relative;
  top: 1px;
  border-radius: 0%;
}
.badge-wrapper.bullet span.badge-category-parent-bg {
  display: none;
}
.badge-wrapper.bullet span.badge-category-parent-bg + .badge-category-bg {
  width: 10px;
}


/*The so called Sanitized Mod*/


.topic-list .activity .latest-info {
    display: inline-block;
    vertical-align: middle;
}

.topic-list .activity img.avatar {
    vertical-align: middle;
    margin-right: 5px;
    max-height: 32px;
    max-width: 32px;
}

.topic-list .activity {
    width: 160px;
    text-align: left;
    padding-left: 20px;
    white-space: nowrap;
}


.topic-list .activity .latest-info .name {
    display: block;
    font-weight: bold;
    font-size: 0.9em;
    margin-top: 0px;
    color: #666666;
}

.topic-list .activity .latest-info .relative-date {
    display: block;
    font-size: 0.9em;
    color: #666666;
}

.topic-list td {
    padding: 7px 7px;
}

[ronpat]

I’m sorry, but I thought we asked to see the HTML around this issue, too? In other words, we need to see the code that might affect the colors that you wish to change. HTML and CSS.

[ogsocials]

.names span{font-size:inherit}
.names span a{color:#0582b6} ( this normal user color working )
.names span.Administrators a{color:#dc2e17} ( this admins color but not working)
.names span.Moderators a{color:#011a74} ( this moderators color not working )

On admin panel Administrator rank view admins. And I tried
.names span.admins a{color:#dc2e17}
and
.admins span a{color:#dc2e17}

These again dont worked.

[TechnoBear]

@cpradio understands Discourse customisations better than anyone. I doubt he’ll be around until a bit later, though.

[Mittineague]

Two things, though maybe your Discourse has been modified and it’s different for you.

Use your browsers dev tools to check both uppercase-lowercase and nesting. At least some browsers dev tools will show a “selector” and/or have a “copy selector” that can help.

For example, for this HTML

<div class="names trigger-user-card"> 
  <span class="first username staff moderator TeamLeaders"> 
    <a href="/community/users/TechnoBear" 
       data-auto-route="true" 
       data-user-card="TechnoBear">
    TechnoBear
    </a>
    <i class="fa fa-shield" aria-hidden="true" 
       title="This user is a moderator">
    </i>
  </span>
  <span class="user-title">
    <a href="/community/groups/TeamLeaders" class="user-group">
    Life is not a malfunction
    </a>
  </span>
</div>

Vivaldi’s dev tools “copy selector” for the text “TechnoBear” is

#post_7 > div > div.topic-body.clearfix > div.topic-meta-data > div.names.trigger-user-card > span.first.username.staff.moderator.TeamLeaders > a

IMHO, a bit much, but it should help give an idea of what could be used.

And you can use dev tools to see what’s used here.

``.names span.TeamLeaders a {
color: #011a74;
}`

[ogsocials]

span.username.admin a { color: #e94539 }

Thank you for your helps.