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

Introducción

Cuando creas un quiz o encuesta, 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 en 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.

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. Puedes personalizarlo con los colores que quieras, haciendo los cambios en el CSS. 

/* 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, cambiando ligeramente los colores del grafico, sin cambiar los colores de la campaña.

Otras especificaciones

Si tienes cualquier duda, contacta con nosotros en help@cool-tabs.com.

Contenido relacionado.

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