Question

CSS - Changing the font colour on completed observation checklists

  • 19 December 2022
  • 5 replies
  • 69 views
G
Rank
Userlevel 3
Badge

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

5 replies

N

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

G
Rank
Userlevel 3
Badge

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.

 

G
Rank
Userlevel 3
Badge

 

G
Rank
Userlevel 3
Badge

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
Rank
Userlevel 7
Badge +3

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