Skip to main content

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

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

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.

 

 

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}

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. 

Reply


Terms & ConditionsCookie settings