Skip to main content

Due to our branding and look color configuration, whenever anybody selects a response in a test question it highlights to red, making it appear like an incorrect selection.

 

 

We had a lot of trouble balancing our platform appearance with our corporate color scheme, so I’m really reluctant to start moving that around again.

I’m sure it should be possible to override this with css, but I just can’t find the right elements to do it. I’ve been able to change individual radio buttons and checkboxes, but not the whole container, and not only for the selected response. @gstager you seem to be pretty much the king of css. Have you come across this before?

Also, has anybody found a list of which elements are controlled by which branding colors?

Hi there,

Hopefully the following CSS helps you here. Amend accordingly and test in a Sandbox environment if available

dcb-course-lesson-questions dcb-ui-input-radio:where([data-dcb-ui-version="2"]) input[type=radio]:checked {
border: 2px solid #FFFFC5!important; /* Targets the border colour when selected */
background-color: #ADD8E6!important; /* Targets the inner colour of the above when selected */
}

dcb-course-lesson-questions dcb-ui-input-radio:where([data-dcb-ui-version="2"]) input[type=radio]:checked:before {
background-color: #CBC3E3!important /* Targets inner colour when selected */

}

dcb-course-lesson-questions dcb-ui-input-radio:has(:checked) {
border-color: #000000 !important; /* Change to your desired border color when selected */
background-color: #90EE90!important; /* Changes the pink background when selected*/
}

 


Thanks so much @DPatel. That was a massive help. Using this as a template I was able to work out how to update all the different question types. Very grateful.

 

The only thing I just cannot change is the checkmark on the inline and association questions.

 

I’m sure it’s somewhere in here, but I just cant get it to work. Any suggestions?

 


Reply