Survey designs - tips to adjust styling

Survey designs - tips to adjust styling

At the current stat, the styling of surveys is done directly as CSS. If you know CSS and how to use the browser console, you will be able to style every single item in the survey.

As a quick reference, some of the most used stylings are added below

  1. /* Set the fonts in the survey */
  2. body {
  3.  font-family: Roboto, sans-serif;
  4.  font-color: #2C3666;
  5. }

  7. /* Set the header color in the survey */
  8. header, .header  {
  9.  background: #2C3666;
  10. }

  12. /* Add a logo to the survey. Check width and the heights properties here to make it appear good. I you have access to it, we recommend using SVG */
  13. .header-survey-container .logo {
  14.  display: inline-block;
  15.  width: 174px;
  16.  height: 40px;
  17.  font-size: 0!important;
  18.  background-image: url("hhttps://upload.wikimedia.org/wikipedia/commons/c/ce/Coca-Cola_logo.svg");
  19.  background-size: contain;
  20.  background-repeat: no-repeat;

  22. }

  24. /* Set the width and border radius of next/previous buttons in the survey */
  25. .btn {
  26.  border-radius: 20px;
  27.  width: 140px
  28. }

  30. /* If you prefer no borders around the "cards" or blocks of questions in survey, you can adjust it with code below */
  31. .card {
  32.  border: none;
  33.  border-radius: 20px;
  34. }

  36. /* Change the main background color of pages using the code below */
  37. .content-container {
  38.  background-color: #F5F6FA;
  39. }

    • Related Articles

    • Survey general layout

      In the survey settings, you have the option of setting the general layout of the survey. The style you edit by going to the Survey Designs submenu. The above settings will enable different parts of the survey. The Content area is always visible and ...

    • Survey variables

      To embed variables in survey related to project, survey and respondent, the following can be used Respondent related: Respondent name: ${respondent_name} Respondent node: ${respondent_node_name} Respondent email: ${respondent_email} Respondents ...

    • Creating a new survey

      To create a new survey, you need to have the role of tenant admin in your Effect.IO tenant. Also, make sure you are working within the scope of being a tenant admin (not as part of a company) In the left side menu, navigate to the surveys->surveys ...

    • About survey topics and topic groups

      A unique feature for the Effect IO software is how surveys and reports pages are defined as part of topics and topic groups. Topics and topic groups exists for multiple reasons. One of the reasons is that we really like standardization as it helps in ...

    • Add item numbers

      The default design does not show numbers to blocks. Here is a guide on how to add this. 1: Add item number in survey editor to a block. 2: As tenant admin, go to "Surveys"->"Designs". Create a new design or adjust an existing one where you add this ...