Overview - Themes
Overview - Themes
Themes are under the Advanced tab of Configuration: Configuration -> Advanced -> Themes
LimeSurvey
has an advanced theme and style system, providing an
efficient way for developers 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 come
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:
.
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
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 (1), Users (2), and Settings (3). 1. Advanced The ...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 ...