Skip to main content

Change Course Expiration Date color

  • September 25, 2023
  • 6 replies
  • 118 views
M
Contributor II

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

 

 

September 25, 2023

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;

}

    JeanetteMcVeigh

    6 replies

    M
    Contributor II
    • michelebanks
    • Author
    • Contributor II
    • September 25, 2023

    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;

    }

    JeanetteMcVeigh
    Bfarkas
    dandrews
    treedy
    Helper I
    Forum|alt.badge.img
    • treedy
    • Helper I
    • October 2, 2023

    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
    Contributor II
    • michelebanks
    • Author
    • Contributor II
    • October 2, 2023

    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
    Helper I
    Forum|alt.badge.img
    • treedy
    • Helper I
    • October 3, 2023

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

    Bfarkas
    M
    Contributor II
    • michelebanks
    • Author
    • Contributor II
    • October 4, 2023

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

     

     

    I’m so glad that helped!!

    Bfarkas
    Hero III
    Forum|alt.badge.img+6
    • Bfarkas
    • Hero III
    • October 5, 2023

    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.

    treedy
    Terms & ConditionsCookie settingsAccessibility statement