How to change the color of the graphic summary of quiz or survey answers with 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. 

/* 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; 
}

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.