Theme options: Difference between revisions
From LimeSurvey Manual
mNo edit summary |
|||
| Line 27: | Line 27: | ||
==Simple options== | ==Simple options== | ||
Once accessed, the | Once accessed, the following page will be loaded: | ||
<center>[[File:Simple & advanced options.png]]</center> | <center>[[File:Simple & advanced options.png]]</center> | ||
{{Alert|Title=Attention|text= Please note that each theme comes with certain options that can be changed from the survey '''theme options'''. In this wiki section, the default LimeSurvey theme '''fruity''' is used to show everyone the easiness through which quick and easy, yet powerful changes can be implemented to a theme by users without any prior knowledge in HTML, php, and/or CSS.}} | {{Alert|Title=Attention|text= Please note that each theme comes with certain options that can be changed from the survey '''theme options'''. In this wiki section, the default LimeSurvey theme '''fruity''' is used to show everyone the easiness through which quick and easy, yet powerful changes can be implemented to a theme by users without any prior knowledge in HTML, php, and/or CSS.}} | ||
The most | The '''simple options tab''' is preselected. The most important survey theme settings can be changed from here: | ||
* '''Inherit everything:''' If the ''yes'' button is selected, all the theme configurations will be inherited from the global [[Themes|configuration level]]. If you click ''no'' and click on the '''Save''' button located in the upper right part of the screen, more theme configuration options will be displayed. Each of these options can be set to: | * '''Inherit everything:''' If the ''yes'' button is selected, all the theme configurations will be inherited from the global [[Themes|configuration level]]. If you click ''no'' and click on the '''Save''' button located in the upper right part of the screen, more theme configuration options will be displayed. Each of these options can be set to: | ||
** inherit the global theme configurations - ''inherit''; | ** inherit the global theme configurations - ''inherit''; | ||
** not inherit - ''no''; | ** not inherit any global theme configuration - ''no''; | ||
** or enable another configuration - ''yes''. You can observe | ** or enable another configuration - ''yes''. The theme settings can be configured as you wish if this option is chosen. You can observe that each theme setting allows you to select the ''inherit'' value. | ||
{{Box|The inheritance system is applied on three levels: | {{Box|The inheritance system is applied on three levels: | ||
* at the global level (accessible from the template list); | * '''at the global level''' (accessible from the template list). The other two levels inherit the global theme settings; | ||
* at the survey group level (accessible from the survey setting panel). The theme | * '''at the survey group level''' (accessible from the survey setting panel). The theme settings at the survey group level inherit the global theme settings; | ||
* at the survey level. The | * '''at the survey level'''. The survey theme settings inherit the survey group theme settings.}} | ||
* '''Theme fonts:''' Select the font you wish your theme | * '''Theme fonts:''' Select the font you wish to use for your theme; | ||
* '''Theme variations:''' Select one of the available theme variations from the dropdown list. It changes the | * '''Theme variations:''' Select one of the available theme variations from the dropdown list. It changes the font and the icons colour. | ||
===No inheritance=== | ===No inheritance=== | ||
As mentioned above, you can choose from the survey settings menu not to inherit the [[Themes|global theme configuration]]. Once you | As mentioned above, you can choose from the survey settings menu '''not to inherit''' the [[Themes|global theme configuration]]. Once you click on the '''Save''' button, more options will be displayed: | ||
| Line 59: | Line 61: | ||
*'''Ajax mode:''' If enabled | *'''Ajax mode:''' If enabled, the survey page will be loaded faster via ajax (''recommended for the average LimeSurvey user''). If disabled, the page will be loaded via page reload, which is better for debugging purposes; | ||
*'''Survey container:''' If ''yes'', | *'''Survey container:''' If ''yes'', the survey will be displayed in a container - its width is limited. This option is useful if your survey participants complete your survey from their mobile phones or tablets because the survey width is controlled. Therefore, it is more comfortable for your respondents because they will not have to scroll right to right anymore to read the whole question or to see all the answer options. If the survey is embedded in a blog or forum, you can also deactivate this option since they already use a certain width. | ||
{{Note|In HTML, you may observe that the <body> text is within a container.}} | {{Note|In HTML, you may observe that the <body> text is within a container.}} | ||
*'''Question borders:''' If enabled, a question will be | *'''Question borders:''' If enabled, a question will be shown within a border. If set to ''no'', the questions will not be contained in a box (so you can use large array question types bigger than the screen width); | ||
*'''Question shadow:''' | *'''Question shadow:''' If enabled, a shadow will be displayed around the in(visible) question borders. | ||
<hr width="50%" style="margin:auto"> | <hr width="50%" style="margin:auto"> | ||
*'''Background color:''' | |||
*'''Background color:''' Select the background colour of the whole question, including the answers; | |||
*'''Font color:''' Change the font color by selecting from the popup menu the desired color. | *'''Font color:''' Change the font color by selecting from the popup menu the desired color. | ||
*'''Question background color:''' Change the question background color by selecting from the popup menu the desired color. | *'''Question background color:''' Change the question background color by selecting from the popup menu the desired color. | ||
*'''Check icon:''' | *'''Check icon:''' This setting allows you to select the desired check icon when multiple choice question types are employed. | ||
<hr width="50%" style="margin:auto"> | <hr width="50%" style="margin:auto"> | ||
*'''Background image:''' if set to | |||
*'''Brand logo:''' | *'''Background image:''' if set to ''no'', you may select a different background image from the one used within your survey group and/or global theme settings. You may also '''upload''' a personalised survey background image by selecting the '''upload''' button located in the bottom of the theme settings panel. | ||
*'''Brand logo:''' If set to ''no'', the name of the survey will be shown in the top bar, else, you can select one of the pictures inside the file directory to be used as logo picture. | |||
<hr width="50%" style="margin:auto"> | <hr width="50%" style="margin:auto"> | ||
*'''Animate body:''' | |||
*'''Animate question:''' | *'''Animate body:''' If set to yes, you can choose one of the animations to apply when the body of the survey is loaded | ||
*'''Animate alert:''' | *'''Animate question:''' Ssame with questions | ||
*'''Animate checkbox:''' | *'''Animate alert:''' Same with questions | ||
*'''Animate radio buttons:''' | *'''Animate checkbox:''' Same with questions | ||
*'''Animate radio buttons:''' Same with questions | |||
{{Box|The library used for animations is [https://daneden.github.io/animate.css/ animate.css]. You can either use the default one or add your own animation library.}} | |||
<hr width="50%" style="margin:auto"> | <hr width="50%" style="margin:auto"> | ||
*'''Fruity fonts:''' Select the font you wish your theme to use; | *'''Fruity fonts:''' Select the font you wish your theme to use; | ||
Revision as of 14:40, 11 January 2018
LimeSurvey 3 introduces a complete new template engine system, based on Twig 1.29 and Bootstrap, and allowing template inheritance and template options. Install Limesurvey 3.0+ to get access to the survey theme options feature. This option will not be made available in the older LimeSurvey versions!
Introduction
LimeSurvey 3 contains a new feature called theme options that offers a set of various tools that allows the LimeSurvey users to quickly and easily change the themes-related settings of their surveys.
Theme options panel
Access the new theme options feature from the settings menu:
The toolbar of the panel contains two tabs: the simple and advanced options of the theme editor.
Simple options
Once accessed, the following page will be loaded:
Please note that each theme comes with certain options that can be changed from the survey theme options. In this wiki section, the default LimeSurvey theme fruity is used to show everyone the easiness through which quick and easy, yet powerful changes can be implemented to a theme by users without any prior knowledge in HTML, php, and/or CSS.
The simple options tab is preselected. The most important survey theme settings can be changed from here:
- Inherit everything: If the yes button is selected, all the theme configurations will be inherited from the global configuration level. If you click no and click on the Save button located in the upper right part of the screen, more theme configuration options will be displayed. Each of these options can be set to:
- inherit the global theme configurations - inherit;
- not inherit any global theme configuration - no;
- or enable another configuration - yes. The theme settings can be configured as you wish if this option is chosen. You can observe that each theme setting allows you to select the inherit value.
The inheritance system is applied on three levels:
- at the global level (accessible from the template list). The other two levels inherit the global theme settings;
- at the survey group level (accessible from the survey setting panel). The theme settings at the survey group level inherit the global theme settings;
- at the survey level. The survey theme settings inherit the survey group theme settings.
- Theme fonts: Select the font you wish to use for your theme;
- Theme variations: Select one of the available theme variations from the dropdown list. It changes the font and the icons colour.
No inheritance
As mentioned above, you can choose from the survey settings menu not to inherit the global theme configuration. Once you click on the Save button, more options will be displayed:
To show the power of this feature, the below explanations will be based on the fruit theme.
- Ajax mode: If enabled, the survey page will be loaded faster via ajax (recommended for the average LimeSurvey user). If disabled, the page will be loaded via page reload, which is better for debugging purposes;
- Survey container: If yes, the survey will be displayed in a container - its width is limited. This option is useful if your survey participants complete your survey from their mobile phones or tablets because the survey width is controlled. Therefore, it is more comfortable for your respondents because they will not have to scroll right to right anymore to read the whole question or to see all the answer options. If the survey is embedded in a blog or forum, you can also deactivate this option since they already use a certain width.
In HTML, you may observe that the <body> text is within a container.- Question borders: If enabled, a question will be shown within a border. If set to no, the questions will not be contained in a box (so you can use large array question types bigger than the screen width);
- Question shadow: If enabled, a shadow will be displayed around the in(visible) question borders.
- Background color: Select the background colour of the whole question, including the answers;
- Font color: Change the font color by selecting from the popup menu the desired color.
- Question background color: Change the question background color by selecting from the popup menu the desired color.
- Check icon: This setting allows you to select the desired check icon when multiple choice question types are employed.
- Background image: if set to no, you may select a different background image from the one used within your survey group and/or global theme settings. You may also upload a personalised survey background image by selecting the upload button located in the bottom of the theme settings panel.
- Brand logo: If set to no, the name of the survey will be shown in the top bar, else, you can select one of the pictures inside the file directory to be used as logo picture.
- Animate body: If set to yes, you can choose one of the animations to apply when the body of the survey is loaded
- Animate question: Ssame with questions
- Animate alert: Same with questions
- Animate checkbox: Same with questions
- Animate radio buttons: Same with questions
The library used for animations is animate.css. You can either use the default one or add your own animation library.
- Fruity fonts: Select the font you wish your theme to use;
- Fruity variations:Select one of the available theme variations from the dropdown list. It changes the fonts and icons colours.
- Upload: Browse your computer to upload an image to be used as logo or background image for your theme. Writing permissions might be requested on the "/themes/survey/fruity/files" folder - the location where the uploaded images will be stored in your LimeSurvey installation.
The library used for animations is animate.css. You can either use the default one or add your own animation library.
Advanced options
When you open the theme options tab, you can choose to edit either its simple options or its advanced options. “Advanced options” is just a naked form that gives you access to the main theme configuration fields from the database. To understand how it works, you should also read about the XML file and the creation of a theme from scratch. So, it’s rather complex and made for advanced users.
However, if you do wish to perform advanced settings editing, click on the advanced options tab
- Files css: The CSS files that should be added to the template;
- Files js: The JS files that should be added to the template;
- Files Print Css: The CSS files to load when printing a template;
- Options: This field includes the options (and their value) that should be parsed to the template view;
- CssFramework Name: The name of the CSS framework to load. For now, only Bootstrap or nothing;
- Cssframework Css: You can replace the core bootstrap.css in this field by a different custom version of it;
- Cssframework Js: The field core boostrap.js can be replaced from here by a different custom version of it;
- Packages To Load: You can load from this setting some core asset packages from LimeSurvey.
You’ll notice an upload input at the top, which gives you the possibility to upload a file into the file directory of the theme. These parameters can be used to change the entire appearance of the theme.
Warning! : Don't touch the values unless you know what you're doing!