Editar la plantilla CAWI con CSS

Es posible personalizar las plantillas de la encuesta con estilos CSS. Es necesario añadir el CSS como script global. El script puede añadirse accediendo a la página de Configuración, haciendo clic en «Avanzadas» en la parte superior izquierda y luego en «Insertar script»/»Editar script».

En la siguiente lista es posible encontrar algunas de las principales clases de las plantillas CAWI de IdSurvey:

.title-text-style
.navbar-inner
#body, body
.button-next-page
.question-wrapper
.question
.main-responses
.header-content-separator
.question-responses-separator
.response-separator

Veamos ahora algunos ejemplos prácticos.

Establecer el color y el tamaño del título de la encuesta #

<style>  
  .title-text-style{
color: #000 !important;
font-size:40px;
 }
</style>

Configura el color de fondo de la barra de navegación, de los iconos y botones de la misma #

<style>  
 .navbar-inner{
  background-color: #db701b !important;
  }
{
.menu-text, .icon-reorder{
  color:#fff !important;
  }
</style>

Establecer el color de fondo de la página #

<style>  
#body, body{
  background-color: #ffffff !important;
  }
</style>

Establecer la distancia entre las opciones de respuesta #

<style>  
  .response-separator{
  height: 0px;
  }
</style>

Establecer la distancia entre las preguntas y las respuestas #

<style>  
   .question-responses-separator{
  height: 10px;
  }
</style>

Establece la distancia entre el título y el resto de la página #

<style>  
  .header-content-separator{
      height: 100px !important;
    display:block;
  }
</style>

Establecer el color predeterminado del texto de las respuestas #

<style>  
  .main-responses{
   color: #db6702 !important;
  }
</style>

Establecer el color y el tipo de letra predeterminados del texto de las preguntas #

<style>  
  .question{
color: #000 !important;
font-family: Arial;
font-size:25px;
font-weight:bold;
  }
</style>

Establecer el estilo del contenedor de preguntas #

<style>  
.question-wrapper{
background-color: #ffedab !important; 
border-color: #fd963c !important;
border-style: solid !important;
border-width: 2px !important;
border-radius: 10px !important;
padding:10px;
}
</style>

Sobrescribir el estilo del botón «Siguiente» #

<style>  
.button-next-page{
border-color: #fd963c !important;
border-width: 2px !important;
background-color: #ffcd12 !important; 
color: #db6702 !important;
border-radius: 25px !important;
}
</style>