Articles in this section

DIGI Theme Editor

Avatar
SandSIV Support
  • Updated
Follow

With the 12.3 release, users now have a possibility to visualise and edit DIGI themes in an easily configurable manner using user-frindly and wide range of settings. 

 

Overview

DIGI Theme Editor is an interface that allows the users of the platform to customize an appierance of surveys and configure multiple settings in order to achieve a desirable result precisely. Various elements of the survey appearance can be configured with an editor that doesn't require CSS knowledge. Users now can modify the DIGI theme and see results in real time.

 

Step by step guide

DIGI Themes page

DIGIthemesbasic-ezgif.com-video-to-gif-converter (1).gif

DIGI Theme Editor can be found in Capture (Feedback) ->Global Settings -> DIGI Themes page.

Already existing themes can be filtered by Name, Tags, Created and Modified date. Additionally, a user can see the details of each theme (a Unit, where the theme is located, a Description and Surveys where the theme is used), Edit, Copy, Delete and see a Demo of a theme. When pressing on a Demo, a small window with the survey preview will open.

 

Add Theme button

On the top of the page the user has options of adding a name and description of the theme, along with the tag, for better classification.

Further on there are Theme settings (giving options of adding and modifying header and footer of a theme), Language settings (giving a possibility to add various languages which the theme should be supporting) and Custom CSS (if a user has a prepared CSS code to insert).

 

DIGI Theme Editor

Scrolling down the page, various settings of a DIGI Theme Editor can be found:

General

  1. Question Spacing (px): defines the spacing between questions on a survey page by overriding the default value.
  2. Container scroll: defines if the survey page should contain a vertical scroll. Note: if the page doesn't contain a scroll, it won'be be possible to scroll through the page's content.
  3. Container: defines whether the survey page should be displayed in full-width or not.
  4. Container Max Width: defines the maximum width for the survey page. Available only for the "narrow" Container type.
  5. Container Max Height: defines the maximum height for the survey page. Available only for the "narrow" Container type.
  6. Horizontal align: defines horizontal alignment of the survey page on the screen (left, right, center). Available only for the "narrow" Container type.
  7. Vertical align: defines vertical alignment of the survey page on the screen (top, bottom, center). Available only for the "narrow" Container type.

Style

  1. Font family: allows entering the name of the font to be used for all text on the survey page. In this field, it is possible to enter the name of one of the embedded fonts (Helvetica, Arial, Montserrat, Open Sans, Poppins, Roboto, Times New Roman, Carlito) or the name of the font used on your website (the font entered must be specifically connected to your website).
  2. Background color: defines the background color of the survey page.
  3. Header Height: defines the height of the header element of the survey page. 
  4. Disable Header Shadow: disables the shadow effect of the header element of the survey page.
  5. Header background color: defines the background color of the header element of the survey page.
  6. Header font color: defines the font color of the header element of the survey page.
  7. Button background color: defines the background color of all buttons on the survey page.
  8. Button font color: defines the font color of all buttons on the survey page.
  9. Button Radius: defines the button radius of all buttons on the survey page. Availalble values: 1-50. 
  10. Next Button Color: defines the color of the Next Button. Overrides the Button background color value.
  11. Back Button Color: defines the color of the Back Button. Overrides the Button background color value.

Question Style

  1. Question button color: defines the color of question buttons (e.g. for Buttons answer type in Configurable question)
  2. Question button active color: defines the color of the selected question button.
  3. Question button font color: defines the font color of question buttons.
  4. Question button active font color: defines the font color of the selected question button.
  5. Question button radius: defines the button radius of question buttons. Available values: 1-50.
  6. Star rating color: defines the color of the star rating scale (for Scalable questions).
  7. Star rating color active: defines the color of the selected star rating of the star rating scale.
  8. Numeric rating font color: defines the font color of numeric rating items on the numeric scale.
  9. Numeric rating active color: defines the font color of the selected numeric item on the numeric scale.
  10. Numeric rating color: defines the color of numeric rating items on the numeric scale.
  11. Numeric rating color active: defines the color of the selected numeric item on the numeric scale.
  12. Numeric rating render type: defines the style of the numeric scale (default, circles, squares).
  13. Error background color: defines the background color of the error message.
  14. Error font color: defines the font color of the error message.
  15. Finish question background color: defines the background color of the finish question message.
  16. Question font color: defines the font color of the question text.
  17. Question label shadow: defines whether or not the question element should have a shadow.
  18. Questions container: allows editing Question label background color and Question container background color.
  19. Question label background color: defines the background color of the question text element.
  20. Question container background color: defines the color of the whole question element (question text + answer options).

Logo

  1. Logo image: allows selecting the image to be used as a logo. The image will be placed inside the header element of the survey page.
  2. Position: defines the position of the logo image inside the header element (left, right, center).
  3. Max Height: defines the maximum height of the logo image.

Background

  1. Background Type:  allows selecting the background type between Image and Color.
  2. Background color:  defines the color of the background. Available only for the Color Background Type.
  3. Background Image: allows selecting the image to be used for the background of the survey page. Available only for the Image Background Type.
  4. Background Size: defines the size of the background image (contain, cover, auto).Available only for the Image Background Type.
  5. Background Position: defines the position of the background image (top, left, bottom, right, center).Available only for the Image Background Type.

Pop-Up Style

Button

  1. Activate button type: defines the type of Activate Button (image or text).
  2. Activate button image: allows selecting an image to be used for Activate Button. Available only for Image Activate Button type.
  3. Activate button font-size: defines font-size used for text of Activate Button.
  4. Activate button x-position: defines the distance (in pixels) between the button and the right border of the display. 
  5. Activate button y-position: defines the distance (in pixels) between the button and the bottom border of the display.

Modal

  1. Indent: defines the distance (in pixels) between the button and  both right and bottom borders of the display.
  2. Window width (px): defines window width of the pop-up.
  3. Window height (px): defines window height of the pop-up.

 

Related articles

Comments

0 comments

Article is closed for comments.