Edit CAWI Template with CSS

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 “Add script”/”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>