Change Course Expiration Date color

  • 25 September 2023
  • 6 replies
  • 53 views
M
Rank
Userlevel 2

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;
}

 

 

michelebanks 7 months ago

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;

}

View original

6 replies

M
Rank
Userlevel 2

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;

}

treedy
Rank
Userlevel 3
Badge

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!!  

M
Rank
Userlevel 2

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;

}

treedy
Rank
Userlevel 3
Badge

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

M
Rank
Userlevel 2

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

 

 

I’m so glad that helped!!

Bfarkas
Rank
Userlevel 7
Badge +3

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


Terms & ConditionsCookie settings