Changing the design of a survey with custom CSS


You can personalise elements of your widget with a custom CSS feature. To use custom CSS you need to go to the Design section of your survey, click Add custom CSS and fill the box with your custom properties. 

After you modify your CSS properly, your widget in the preview should change it's look immediately. 

Ready-to-use CSS modifications

Here are some examples of available customisations and ready to use CSS codes:

Manipulate the size of your chat window and make it wider or narrower

#survicate-box .surv-window {
  width: 290px;
}

Set up a custom background for your widget.

#survicate-box .surv-window {
  background: url("https://survicate.com/wp-content/uploads/main/man-bg.jpg") !important;
  background-size: 100%;
  background-repeat: no-repeat;
}

Changing the minimize icon from a long dash ( — ) to a close ( X )

#survicate-box .surv-close {
  visibility: hidden;
  margin-top: 5px;
  position: absolute;
  right: 0;
  cursor: pointer;
  z-index: 10;
}

#survicate-box .surv-close:after {
  visibility: visible;
  content: '';
  color: #DA0069;
  margin-right: 8px;
  padding-top: 14px;
}

Stick the minimized survey widget to the right border of the page. Please note that only the minimized widget will be moved, the survey will still open in the center of the page.

#survicate-box.survicate-widget.surv-hidden {
  bottom: 50% !important;
  right: -107px !important;
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
}

Remove the shadow effect cast by the Survicate widget.

#survicate-box .surv-window{
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

Usechosen font in our widgets.

#survicate-box{
  font-family: "Times New Roman", Georgia, Serif !important;
}

Change the size of the text in our widgets.

#survicate-box{
  font-size: 20px;
}

Change the text to bold in our widgets.

#survicate-box{
  font-weight:600;
}

Centering text on a centered widget. Text is aligned to the left by default, to change it use the following code.

#survicate-box.surv-center{
  text-align: center;
}

Customizing the “+” icon on a minimized widget

#survicate-box.surv-hidden .surv-closed{
   background-image: url();
   background-size: 20px;
   background-repeat: no-repeat;
   background-position: 97% 50%;
}
#survicate-box .surv-closed .surv-maxbtn{
   visibility:hidden;
}

Customising the text on a minimized widget

#survicate-box.surv-hidden .surv-closed{
   font-size: 20px;
   font-weight:600;
   font-family: "Times New Roman";
}
Add a comment to the question
.surv-title::after { 
  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
  display:block;
  font-size: 13px;
  color: #b6b6b6;
}
Add a disclaimer at the bottom of a survey
.surv-footer::after { 
  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
  display:block;
  font-size: 13px;
  color: #b6b6b6;
}


Do you find this helpful?