Skip to main content
Question

CSS - Changing the font colour on completed observation checklists

  • December 19, 2022
  • 5 replies
  • 116 views
G
Contributor III
Forum|alt.badge.img

Hi all, 

Hope, everyone is ready for Christmas. 

Not sure if anybody else had this problem, but it looks like it applies to all platforms (we work with multiple customers). 

When you complete an observation checklist, the text colour is the default colour in your system. However, when you try to access any completed observation checklist, the text colour of the responses is changed to light grey and makes it very very difficult to read the responses and not very good for accessibility purposes. 

Docebo advised to change the text colour of the checklist responses with CSS, but I find it difficult to locate an identifier that targets the checklist responses. Could you please help? 

Thanks in advance,

Gigi

    Bfarkas
    G

    5 replies

    N
    • nloveday
    • Newcomer
    • March 10, 2023

    Hi Gigi, 

    We have the same thoughts regarding the font colour of our checklists. Did you ever work out how to change it? 

    Many thanks,

    Natasha

    Bfarkas
    G
    Contributor III
    Forum|alt.badge.img
    • gigi galgoczi
    • Author
    • Contributor III
    • March 10, 2023

    Hey Natasha, no luck with CSS, we can’t identify the element selector we need to address by the CSS. Docebo was unable to help and said that it’s classed as a ‘secondary’ or ‘inactive’ text that doesn’t need to follow the accessibility guidelines for contrasts. They suggested I raise an ide, which I’m going to do and copy the link here, if you could vote it up, that would be great.

     

    Bfarkas
    G
    Contributor III
    Forum|alt.badge.img
    • gigi galgoczi
    • Author
    • Contributor III
    • March 10, 2023

     

    Bfarkas
    G
    Contributor III
    Forum|alt.badge.img
    • gigi galgoczi
    • Author
    • Contributor III
    • March 22, 2023

    Hi all, 

    Here is the CSS to apply to achieve the above:

     

     

    /*observation checklist answer edit*/

    .readonly-text-field {color:#333 !important;  // use preferred colour}

     

    .ui-input-radio-disabled .ui-input-radio-info {opacity: 0.9 !important; // adjust to preference}

     

    .ui-input-checkbox-disabled .ui-input-checkbox-info {opacity: 0.9 !important; // adjust to preference}

     

    .dropdown-wrapper.disabled .dropdown-title {color:#333 !important; // use preferred colour}

    Bfarkas
    AnneG
    Bfarkas
    Hero III
    Forum|alt.badge.img+6
    • Bfarkas
    • Hero III
    • March 25, 2023

    Hi all, 

    Here is the CSS to apply to achieve the above:

     

     

    /*observation checklist answer edit*/

    .readonly-text-field {color:#333 !important;  // use preferred colour}

     

    .ui-input-radio-disabled .ui-input-radio-info {opacity: 0.9 !important; // adjust to preference}

     

    .ui-input-checkbox-disabled .ui-input-checkbox-info {opacity: 0.9 !important; // adjust to preference}

     

    .dropdown-wrapper.disabled .dropdown-title {color:#333 !important; // use preferred colour}

    Just be careful, some of those are a bit generic and will most likely impact other areas of the platform as well. 

    Terms & ConditionsCookie settingsAccessibility statement