Cómo cambiar el color del gráfico con el resumen de respuestas de un quiz o encuesta por CSS

1. Introducción.

Cuando creas un quiz o encuesta con las aplicaciones Cool Promo o Cool Promo White Label, incluidas en los planes Gold y Diamond, respectivamente, tienes la opción de mostrar un resumen público con las respuestas que han dado los participantes. 

Por defecto, el gráfico con las respuestas, se muestra con los colores que has configurado la campaña. 

A continuación, puedes ver un ejemplo.

Sin embargo, es posible cambiar los colores del gráfico (color de texto de la pregunta, color de fondo del resumen de respuestas, color del texto de la respuesta y color del fondo de la barra del progreso), sin modificar los del resto de la campaña. Puedes modificarlo por CSS.

2. Paso a paso.

Para realizar los cambios, ve al apartado 'Diseño' del editor de la campaña. Y, en la pestaña 'Avanzado', marca la opción 'Activar CSS personalizada'. 

Pega el siguiente CSS personalizado.

/* Cambiar color de texto de la pregunta */
.quiz_results [data-answer^="wizard-p"] h4 { 
  color: #000000;
  background-color: #ffffff;
}
/* Cambiar color de fondo del resumen de respuestas */
.quiz_results [data-answer^="wizard-p"] {
  background-color: #000000;
}
/* Cambiar color del texto de la respuesta */
.quiz_results [data-answer^="wizard-p"] .quizz-score > span{
  color: #ffffff;
} 
/* Cambiar color de fondo de la barra de progreso total */
.quiz_results .progress {
  background-color: #ffffff; 
}

También puedes modificarlo desde la previsualización de la campaña. Activa la CSS personalizada y pégalo. 

A continuación, puedes ver un ejemplo de cómo queda ese mismo gráfico con el resumen de respuestas después de modificarlo, sin cambiar los colores de la campaña. 

3. Otras especificaciones.

Si tienes alguna duda durante el proceso, puedes contactarnos en el email help@cool-tabs.com.

4. Contenido relacionado. 

Cómo configurar la CSS personalizada de una campaña.