Hi @ChristineW 

I’m not sure if there is a way to change the colour of all 3. The closest I’ve got is to have the same colour for In progress and Completed and a different colour for Not Started. Someone may be able to improve upon this. 

/*Change label colours on course cards in Courses and Learning plans widgets*/

.ui-badge-status-success {

    background-color: red !important;

}

.ui-badge-status-neutral {

    background-color: green !important;

}

.ui-badge-status-light {

    background-color: aqua !important;

}

@Stephen.Barton thanks for your reply, this is really helpful, thanks I’ll try this.

Can confirm @Stephen.Barton is right, there’s no way to distinguish the two apart from each other on current setup, it is unfortunate, but thats the best you can do in this scenario.

@Stephen.Barton I’m testing out some CSS to do just this.

So far, I can get it to work within a Learning Plan, but not a Catalog.
 

/* Not Started Label Color */

.ui-badge-status-success {

    background-color: #f7b500 !important;

}

/* In Progress Label Color */

.ui-badge-status-neutral {

    background-color: #0068D9 !important;

}

/* Completed Label Color */

.ui-card-header:has(+ .ui-card-content span.color-accent-tertiary) .ui-badge-status-neutral{

    background-color: #008767 !important;

}

 

Thanks for sharing @Stephen.Barton. This looks like great progress and could be really useful, much appreciated.

@ChristineW Below is CSS to target the course status labels in both Learning Plans and Catalogs.
 

/* Not Started Color Label*/

.ui-badge-status-success {

    background-color: #f7b500 !important;

}

/* In Progress Color Label*/

.ui-badge-status-neutral {

    background-color: #0068D9 !important;

}

/* In Progress Color Label - in Catalog*/

.ui-card-status-in_progress .ui-badge-status-neutral{

    background-color: #0068D9 !important;

}

/* Completed Color Label */

.ui-card-header:has(+ ui-card-content span.color-accent-tertiary) .ui-badge-status-neutral{

    background-color: #008767 !important;

}

/* Completed Color Label - in Catalog*/

.ui-card-status-completed .ui-badge-status-neutral{

    background-color: #008767 !important;

}