Overview - Themes

Overview - Themes

Overview - Themes

Themes are under the Advanced tab of Configuration: Configuration -> Advanced -> Themes


LimeSurvey has an advanced theme and style functionality that provides developers a way to customize the appearance of surveys. Since LS3, the term templates has been replaced with the term themes. Themes allow control over the style of the pages of a survey. A survey administrator can select a default theme that will be used for each survey to personalize it.

Themes comes with options that provide an admin (without coding skills) a way to add a logo on the welcome page, change the background colors, select a font, etc.

LimeSurvey comes with 3 themes. These themes are defined by directories located in the LimeSurvey installation "themes/survey/" directory. Each theme has its own directory. Within the main directory of a theme you will find a configuration file in XML, and numerous directories containing the views themes (.twig), cascading style sheets (.css), scripts, images (.jpg or .png), and maybe others.

LimeSurvey Themes page:



Since LimeSurvey 2.50, the theme engine uses Bootstrap 3 as CSS framework. Since Bootstrap 3 is a standard framework, developers will find a lot of documentation, tutorials and forum threads about it on the internet.  And also since LimeSurvey 3, the theme engine uses Twig, so the theme developers can change the logic of the survey rendering in a safe and easy way. Twig replace the old system of replacement keywords that was used in the previous versions. The logic that was used to generate the HTML of the keywords is now available inside the theme's views..

Snippet from Vanilla Theme:
<div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}> {# NOTE: If you want to customize the question rendering, use a question theme #} {{ aQuestion.answer | raw }} </div>
Themes, being HTML and Twig code, tend to define the positioning and type of text to be displayed and similar structural features of the page. They often reference or include other files. Most of them reference a common cascading style sheets (CSS) file that defines the font style, color, size, background, and similar parameters common to all pages in the survey.

Style sheets reference HTML class parameters that are associated with the various types of objects in the HTML code. This allows the style sheet to define how to display each of the many types of text or other objects that may appear in multiple places. There are unique classes for each question type in LimeSurvey and thus giving detailed control over the appearance of each. Image files, like logos or special progress-bar constructors, may be referenced as well in the Theme file.

Finally, special keywords in curly braces are replaced with text defined in the survey for each language translation correspondent (for example, the 'Survey Title' or 'Question Text' for each language defined).

If you create a new custom theme, please consider contributing it back to the LimeSurvey community and make it available to others. With your help, we can grow our repository of themes, surveys, and other add-ons to make LimeSurvey even better!

    • Related Articles

    • Admin Themes

      Admin themes The Admin theme functionality allows you to customize the appearance of your LimeSurvey application. The survey admin themes settings are found under Configuration on the main navigation bar: Configuration -> Advanced -> Themes -> Admin ...

    • Question Themes

      Introduction Question themes can be used to customize existing question types and change their visual appearance. Question themes can only be built on core Question types. To access the question themes, go to Configuration -> Advanced -> Themes -> ...

    • The LimeSurvey Theme Editor

      The LimeSurvey theme editor The Theme editor is only available to users with the templates permission and to super-administrators. Attention: A theme that is not correctly constructed can cause a survey (that uses the respective template) to become ...

    • Creating a New Theme

      Creating a new theme To create a new theme (or edit an existing theme), you need template editing user permission in LimeSurvey as well as permission to manipulate the files in the underlying operating system hosting your LimeSurvey installation. ...