Skip to main content

Hi,

I’m wondering if anyone may know the CSS to change the color of the course expiration date on cards to red.

 

I’ve been trying this with no luck

}
/** Change text color expiration date due **/
.ui-list-item-status-details ui-typography-subtitle ui-color-typography-secondary ng-star-inserted{
    color: #1D7000;
}

 

 

This never happens but just as I posted this - I figured it out.

 

}

/** Change text color expiration date due **/

.ui-list-item-status-details, ui-typography-subtitle, ui-color-typography-secondary, ng-star-inserted{

    color: #f03f3f;

}


Hey @michelebanks this CSS Code for expiration date color is something I’m trying to do as well, but I’m finding that the second post you put in isn’t working for me or the Docebo helpdesk tech I asked for help. Any chance you could share how you got it to work??   Were any edits needed to the CSS code?   Many thanks for your help!!  


Happy to help.  I found that you need to code css for each place your cards would display

We use the to do widget on a page. So, for that specific page and widget that uses a list view
this code worked 

{

.ui-list-item-status-details, ui-typography-subtitle, ui-color-typography-secondary, ng-star-inserted{

    color: #f03f3f;

    font-weight: bold;

}

 

For the other page that uses a card view.  I needed to use this css

}

.ui-card-status-details, ui-typography-subtitle, ui-color-typography-secondary, ng-star-inserted{

    color: #f03f3f;

    font-weight: bold;

}

 

 

Full CSS

 

/** Change text color expiration date due **/

}

.ui-list-item-status-details, ui-typography-subtitle, ui-color-typography-secondary, ng-star-inserted{

    color: #f03f3f;

    font-weight: bold;

}

.ui-card-status-details, ui-typography-subtitle, ui-color-typography-secondary, ng-star-inserted{

    color: #f03f3f;

    font-weight: bold;

}


@michelebanks, not even kidding you, you just made day!!  Works perfectly - thank you!!   


@michelebanks, not even kidding you, you just made day!!  Works perfectly - thank you!!   

 

 

I’m so glad that helped!!


If interested, you can simplify this down and also make it less specific, which should help with maintenance too. All you need is:

.ui-card-status-details, .ui-list-item-status-details {
color: #00FF00;
}

Just change the color to color of choice. 

Adding this to the backlog to add to the CSS Wizard on Fark.tools as well.


Reply