Puoi personalizzare i template delle indagini CAWI con il CSS. Per farlo, devi aggiungere il CSS come script globale. Puoi aggiungere lo script andando sulle Impostazioni dell’indagine e cliccando su “Avanzate” in alto a sinistra, poi su “Modifica Script”.

Nella lista qui sotto troverai alcune delle principali classi dei template CAWI di IdSurvey:

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

Vediamo ora qualche esempio pratico:

Imposta il colore e la grandezza del titolo dell’indagine

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

Imposta il colore della barra di navigazione, il colore delle icone e i bottoni della barra

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

Imposta un colore di sfondo nella pagina

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

Imposta la distanza tra risposte

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

Imposta la distanza tra domanda e risposte

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

Imposta la distanza tra il titolo e il resto della pagina

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

Imposta il colore di default del testo delle risposte

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

Imposta il colore di default e il font del testo delle domande

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

Imposta lo stile del contenitore della domanda

<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>

Sovrascrivi lo stile del bottone avanti

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