You can customize survey templates with CSS styles.You have to add CSS as a global script. You can add your script going to the Settings page, clicking on “Advanced” on top left and then on “Edit script”.

In the following list you can find some of the main classes of IdSurvey CAWI templates:

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

Let’s see now some practical examples.

Set color and size of the survey title

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

Set navbar background color, colors of icons and buttons in the nav bar

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

Set the background color of the page

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

Set the distance between answer items

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

Set the distance between question and answer items

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

Set the distance between the title and the rest of the page

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

Set the default color of answer text

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

Set the default color and font of question text

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

Set the style of question container

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

Overwrite style of “Next” button

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