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

      Overview The Admin Themes feature in LimeSurvey enables customization of the application's appearance. Location Access admin theme settings by navigating to: Configuration → Advanced → Themes → Admin themes. Available Options The Admin themes tab ...

    • Question themes and custom question views

      What question themes are Question themes are alternative renderings of a core question type. They change how a question looks and behaves in the survey — for example, an image-select variant of a multiple-choice question, or button-style single ...

    • 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

      Overview The Theme Editor functionality in LimeSurvey is restricted to users with theme permissions and super-administrators. Users should exercise caution when editing themes, as an incorrectly constructed theme can make any survey that uses it ...

    • Creating a New Theme

      To create a new theme in LimeSurvey, users need the Themes permission along with file system access on the server hosting the installation. Before You Start Theme development is advanced work, requiring knowledge of HTML, CSS, Twig, and JavaScript. ...