The template editor enables you to customize the look and feel of your surveys by creating style templates. You can change colors, fonts and feel of your survey and also add logos.
The template editor is split into the following sections.
For information on uploading a logo, please see Upload and manage Logos
The template Manager enables you to Attach, Duplicate, Edit and Preview Survey Themes.
Attach to Survey
The Attach to Survey button becomes available when you enter the Template Manger from the Survey Editor.The template editor provides a facility to change the look and feel of your surveys via a template that can be applied to one or more surveys. You may change colors, logos and add background images to surveys.
Template editor controlsColor picker
Throughout the theme editor there are many opportunities to change colors. To change the color, click in the color entry area and the color picker will open. You can select any color you like from the color picker. Once you have chosen your desired color click out of the color picker to apply the color.
Survey layout enables you to change the following items:
| Width | You can choose between a fluid layout as a percentage width of the window. This layout will size it's self to the browser window. You may choose a fixed width layout in pixels which the width will remain constant. |
| Align | When the survey width is less than 100% of the screen you can align the survey to the left, right or center of the browser window. |
| Text direction | This option allows you to specify right to left for Arabic languages. |
| Select Image | Select Image opens the file manager popup which allows you to select an image to use for the survey background. |
| Clear | Clear clears any background images. |
| Color | Clicking the text area enables you
to change the
survey page color. Reset resets the to the original color. Clear makes the color transparent |
| Position | The position input can be used to control the position of the background image. Either type in a CSS position or select one from the drop down menu. |
| Width | You can choose between a fluid layout as a percentage width of the window. This layout will size it's self to the browser window. You may choose a fixed width layout in pixels which the width will remain constant. |
| Align | When the width is less than 100% you can align the survey to the left, right or center of the survey. |
| Text Align | You can Left Align, Right Align or Center the text. |
The title options enables you to change the following attributes of the page title:
| Font | Change the default font, size, style and weight of the font to any one of the built in styles. |
| Color | Change the page title text and background color. |
| Layout | You may choose between the width of the title in pixels or percentage of the page size. You may also align the text to the left, right or center of the box. |
The introduction options allows you to change the following attributes of the introductory text:
| Placement | The placement option allows you choose to put the introduction text in-line with your logo or below your custom logo. |
| Width | You may select the width as a percentage width of the window. or a fixed width in pixels. |
| Alignment | The alignment option allows you to move the position of the introduction between Left, Right and Center. |
| Additional formatting of the text can be made in the Survey Editor where you may change the font, color and alignment of the text within the introduction area. |
The logo options allows you to upload and resize a logo.
| Select logo |
Select logo enables you to upload a logo. The logo is displayed on your survey. |
| Clear logo |
Clear logo removes the logo from your survey. |
| Logo size | Move the slider from left to right to resize the logo. |
| URL | You may specify a URL to an external website to direct the participant to if they click the logo. |
The Questions options enables you to format the display of the
questions.
These options affect the question text and associated
answers. Additional control of the question text can be made in the
question text editor.
| Question Font |
Change the Font, Size, Style, Weight of the font. Additional formatting of the question text can be made in the question editor where you may change the font, color and alignment of the text within the introduction area. |
| Colors |
Change the font color, background and mouse highlight of your question and answer text. |
| Layout | The layout option enables you to position adjust the width and spacing of the questions. |
| Validation errors | The validation text is shown when required questions that have not had a response are submitted. |
The Question Validation option enables you to format the display of any validation that is present on your questions such as required fields.
| Font |
Change the Font, Size, Style, Weight of the font. Additional formatting of the question text can be made in the question editor where you may change the font, color and alignment of the text within the introduction area. |
| Colors |
Change the font color, background and mouse highlight of your question and answer text. |
Progress
The progress bar is displayed within the survey. It is possible to
change the location of the progress bar using the survey settings area.
| Colors | Colors of the indicator, text and background may be changed. |
| Layout | It is possible to change the width and move the progress bar to the Left, Right or middle of the screen. |
| Font | Change the Font, Size, Style, Weight of the font. |
Question -
Reset
The reset option refers to the Reset link displayed to most survey
questions. The reset link enables the user to remove there response, so
for example they select a radio button by my mistake then they will be
able to deselect it.
| Colors | Colors of the reset text option may be changed. |
| Layout | Change alignment of the reset link to the Left, Right or Middle of the question. |
| Font | Change the Font, Size, Style, Weight of the font. |
