Theme options
From LimeSurvey Manual
LimeSurvey 3 introduces a complete new template engine system, based on Twig 1.29 and Bootstrap, and allowing template inheritance and template options.
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 simple options tab is preselected:
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 used options are presented 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 - no;
- or enable another configuration - yes. You can observe in this case that each dropdown selector has an inherit value available.
- at the global level (accessible from the template list);
- at the survey group level (accessible from the survey setting panel). The theme options from the survey group level inherit the global theme settings level;
- at the survey level. The theme options from the survey level inherit the theme settings from the survey group theme options level.
- Theme fonts: Select the font you wish your theme to use;
- Theme variations: Select one of the available theme variations from the dropdown list. It changes the fonts and icons colours.
No inheritance
As mentioned above, you can choose from the survey settings menu not to inherit the global theme configuration. Once you clicked on the Save button, more options will be displayed:
- Ajax mode: If enabled (recommended for the average LimeSurvey user), the page will be loaded faster via ajax. If disabled, the page will be loaded via page reload, which is better for debugging purposes);
- Survey container:
- Question borders:
- Question shadow:
- Background color:
- Font color:
- Question background color:
- Check icon:
- Background image:
- Brand logo:
- Animate body: If set to yes, y
- Animate question:
- Animate alert:
- Animate checkbox:
- Animate radio buttons:
- 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: https://daneden.github.io/animate.css/ Of course, a template provider could add his own animation library or no animation library at all.
Advanced options
Select from the panel toolbar the advanced options. The following page will be displayed:
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!