Course tags having different colors

Or possible know of some code to alter the colors permanently? 

@JZenker 

I found that these were directly correlated to the Configure branding and look » Colors settings.

You may try playing with

ui-badge-status-success

ui-badge-status-alert

along with others based on the tag

Perhaps you could combine these with the specific pages where you want them changed if you don’t wish a fully global change using the colors page.

I believe these tags are making use of some of your color set under colors.

Yours are going to be different than mine - I reckon.

For example - my NEW tags are using the #008767 and if I change it here it will affect the color of that tag. Other things too… be aware.

 

Very weird that the tags are controlled by two different system colors - thanks Greg that was it!

hi, this makes Not Started appear red and everything else green. I cannot differentiate between In progress and Completed.

Using the suggestion from @MHelme at the below link worked for me. I just swapped out in_progress for completed and I was able to change the background color of the completed courses/learning plans

In Progress Courses Background Color

​@JZenker ​@Stephen.Barton ​@mjl93 

Please find the code below :) 

/* *********************************************** */
/* Course Status Label Colors - Card, List, Channels */
/* *********************************************** */

/* Not Started */
.ui-badge-status-success,
.ui-list-item-status-not_started .ui-badge-status-success {
  background-color: #020050 !important;
  color: #ffffff !important;
}

/* In Progress */
.ui-badge-status-neutral,
.ui-list-item-status-in_progress .ui-badge-status-neutral,
.ui-card-status-in_progress .ui-badge-status-neutral {
  background-color: #F7681E !important;
  color: #ffffff !important;
}

/* Completed */
.ui-card-header:has(+ ui-card-content span.color-accent-tertiary) .ui-badge-status-neutral,
.ui-list-item-status-completed .ui-badge-status-neutral,
.ui-card-status-completed .ui-badge-status-neutral {
  background-color: #008767 !important;
  color: #ffffff !important;
}

I’ve just made a community post you can view HERE.

Hope it helps!