Hello ​@Lisa D thank you for the question, and our apologies for the delay in responding. This one is tricky as the element in question is shared by all course statuses on the Course Cards. So changing this to green, as an example, will make it green on course cards anywhere they’re shown for all statuses including Course is under Maintenance and Expired as we can see in the below screenshot of editing this.

A few additional caveats on CSS provided by Docebo. This isn’t guarenteed to work with backwards-compatibility. As an example, if we isolated this into it’s own class or ID, we wouldn’t announce it on our Product Changes, and it would have to be updated.

So we recommend doing a few things with CSS provided by Docebo in posts like this one:

* Implement periodic reviews of all CSS used
* Carefully implement it and make sure it only does what you want it to (ie, turn text green on Course Card pages)

With the above disclaimers given, the code I was able to figure out to turn these statuses green would be:

.ui-card-status-details {
  color: rgb(26, 198, 26);
}

It looks like the below with a specific lighter shade of green shown than my base green color. We could use a hex value, color name or RGB values as above.
 

Thank you so much.  We will be using three enrolment priorities (mandatory, required and recommended).  From what you state above I assume we cannot isolate these so that we can have a different colour for each?

No worries! With CSS alone, I couldn’t find a way to do it, no. Making each a different colour would require a way to separate them as separate entities, which we can’t do as they share the same class with no other way to target them. I’ve also shared with our team the difficulties experienced in editing this

As well, I’d recommend starting a Support ticket so we can track this more effectively for you. Tickets can be opened based on the instructions in this Knowledge Base here.