How to change the color of the graphic summary of quiz or survey answers with CSS

1. Introduction.

When you create a quiz or survey with the Cool Promo or Cool Promo White Label applications, included in the Gold and Diamond plans, respectively, you have the option to show a public summary with the answers given by the participants.

By default, the graph with the answers is displayed with the colors you have configured for the campaign.

Below, you can see an example.

However, it is possible to change the colors of the chart (question text color, answer summary background color, answer text color, and progress bar background color), without modifying the colors of the rest of the campaign. You can modify it with CSS.

2. Step by step.

To make the changes, go to the 'Design' section of the campaign editor. And, in the 'Advanced' tab, check the option 'Enable custom CSS'.

Copy and paste the following custom CSS.

/* Change question text color */
.quiz_results [data-answer^="wizard-p"] h4 { 
  color: #000000;
  background-color: #ffffff;
}
/* Change answer summary background color */
.quiz_results [data-answer^="wizard-p"] {
  background-color: #000000;
}
/* Change answer text color */
.quiz_results [data-answer^="wizard-p"] .quizz-score > span{
  color: #ffffff;
} 
/* Change background color of total progress bar */
.quiz_results .progress {
  background-color: #ffffff; 
}

You can also modify it from the campaign preview. Activate the custom CSS and paste it.

Below, you can see an example of what the same graphic looks like, without changing the campaign colors.

3. Other specifications.

If you have any questions, you can contact us at help@cool-tabs.com.

4. Related content.

How to configure custom CSS for your campaign.