Overview - Themes

Overview - Themes

Overview - Themes

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

LimeSurvey has an advanced theme and style system providing to developers an efficient way to customize the survey appearance. 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 further personalize it. 

Themes  comes with options that provide an admin (without coding skills) a simple 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 :

  1. <div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}>
  2. {# NOTE: If you want to customize the question rendering, use a question theme #} {{ aQuestion.answer | raw }}
  3. </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

    • Overview - Dashboard

      Overview - Dashboard The following is an overview of the Survey Dashboard page.  By default this page contains: The navigation bar Shortcut to create a new survey Shortcut to list available surveys Shortcut to global settings Shortcut to ...
    • Overview - Settings

      Overview - Settings When you access a survey, the survey Settings tab i s selected by default and contains : Survey settings and the Survey menu 1. Survey settings Survey settings  allows users to edit settings related to the look of the survey and ...
    • Overview - Structure

      Overview - Structure Tab When you access a survey, the survey Settings tab is selected by default. To access the survey Structure , click the  Structure  tab . Clicking the Structure tab will display the structure of your survey: question groups ...
    • Overview - Configuration

      Configuration To administrate your LimeSurvey installation, click Configuration  located in the main navigation bar of the home page. There are three tabs in the Configuration drop-down menu: Advanced , Users , and Settings . 1. Advanced  ...
    • Overview - Distribution

      Overview - Distribution Once you have activated your survey you can pick a channel to distribute it and start collecting responses. Channels you can choose from: Anonymous link  QR Code Social media Survey Participants Panel integration Please note ...