Themes - Revision history

Han: typo iis -> is

2026-04-21T19:57:52Z

typo iis -> is

← Older revision		Revision as of 21:57, 21 April 2026
Line 6:		Line 6:

	<!--T:2-->		<!--T:2-->
	<div class="simplebox">[[File:help.png]] '''LimeSurvey ''' ~~iis~~ using theme system, based on [https://twig.symfony.com/ Twig] and [https://getbootstrap.com/ Bootstrap], and allowing inheritance and options. The frontend HTML page can be 100% customize to suit your needs.</div>		<div class="simplebox">[[File:help.png]] '''LimeSurvey ''' is using theme system, based on [https://twig.symfony.com/ Twig] and [https://getbootstrap.com/ Bootstrap], and allowing inheritance and options. The frontend HTML page can be 100% customize to suit your needs.</div>

	=Introduction= <!--T:4-->		=Introduction= <!--T:4-->

C schmitz: Marked this version for translation

2026-03-24T10:09:03Z

Marked this version for translation

← Older revision		Revision as of 12:09, 24 March 2026
Line 13:		Line 13:
	The '''theme options''' offer a set of various tools that allows the survey administrators to quickly and easily change the themes-related settings of their surveys.		The '''theme options''' offer a set of various tools that allows the survey administrators to quickly and easily change the themes-related settings of their surveys.

	~~=Options to change a theme=~~ <!--T:6-->		<!--T:6-->
			=Options to change a theme=
	There are two ways to use a theme, either through the global setting or through the theme option panel inside a survey.		There are two ways to use a theme, either through the global setting or through the theme option panel inside a survey.

Line 25:		Line 26:
	<center>[[File:default theme setting.png]]</center>		<center>[[File:default theme setting.png]]</center>

	~~==Theme options panel==~~ <!--T:8-->		<!--T:8-->
			==Theme options panel==
	This option changes the theme for a particular survey.		This option changes the theme for a particular survey.
	To access the new '''theme options''' feature, go to the [[Survey settings\|survey settings]]:		To access the new '''theme options''' feature, go to the [[Survey settings\|survey settings]]:
Line 32:		Line 34:
	<center>[[File:Survey menu - theme options.png]]</center>		<center>[[File:Survey menu - theme options.png]]</center>

	~~=Available list of themes=~~ <!--T:10-->		<!--T:10-->
			=Available list of themes=
	The list of themes available can be access from the Administration Dashboard. Configuration > Advanced > Themes <br>		The list of themes available can be access from the Administration Dashboard. Configuration > Advanced > Themes <br>
	<center>[[File:list of themes.png\|800px]]</center>		<center>[[File:list of themes.png\|800px]]</center>
Line 55:		Line 58:


	~~==Theme editor==~~ <!--T:16-->		<!--T:16-->
			==Theme editor==
	The LimeSurvey '''core themes''' (default themes) cannot be modified. The "extend" button give users the opportunity for a core theme to be modified(extended).		The LimeSurvey '''core themes''' (default themes) cannot be modified. The "extend" button give users the opportunity for a core theme to be modified(extended).

Line 81:		Line 85:
	<center>[[File:extended theme edit.png\|800px]]</center>		<center>[[File:extended theme edit.png\|800px]]</center>

	~~==Theme inheritance overview==~~ <!--T:22-->		<!--T:22-->
			==Theme inheritance overview==
	When a theme is extended, a copy of the original theme can easily be modified.		When a theme is extended, a copy of the original theme can easily be modified.
	In our case, we have a copy of the fruity theme saved as "extends_fruity" which will be available for use in the list of themes available.		In our case, we have a copy of the fruity theme saved as "extends_fruity" which will be available for use in the list of themes available.
	<div class="simplebox">[[File:help.png]] Modifying the theme is for advance users with basic knowledge of HTML, CSS and Twig.</div>		<div class="simplebox">[[File:help.png]] Modifying the theme is for advance users with basic knowledge of HTML, CSS and Twig.</div>

	~~=Development=~~ <!--T:23-->		<!--T:23-->
			=Development=
	[[File:theme_overview.jpg]]		[[File:theme_overview.jpg]]

	</translate>		</translate>

C schmitz at 10:08, 24 March 2026

2026-03-24T10:08:44Z

← Older revision		Revision as of 12:08, 24 March 2026
Line 6:		Line 6:

	<!--T:2-->		<!--T:2-->
	<div class="simplebox">[[File:help.png]] '''LimeSurvey 3''' ~~introduces a complete new template engine~~ system, based on [https://twig.symfony.com/ Twig ~~1.29~~] and [https://getbootstrap.com/ Bootstrap], and allowing ~~template~~ inheritance and ~~template~~ options. The frontend HTML page can be 100% customize to suit your needs.</div>		<div class="simplebox">[[File:help.png]] '''LimeSurvey ''' iis using theme system, based on [https://twig.symfony.com/ Twig] and [https://getbootstrap.com/ Bootstrap], and allowing inheritance and options. The frontend HTML page can be 100% customize to suit your needs.</div>


	~~<!--T:3-->~~
	~~{{Box\|Install Limesurvey 3.0+ to get access to the survey '''theme options''' feature. This option are '''not''' available in the older LimeSurvey versions!}}~~

	~~<!--T:11-->~~
	{{Alert\|text='''The following section is still under construction. If you wish to get a short introduction on the new theme system from LimeSurvey 3.x, please continue reading the following [[New_Template_System_in_LS3.x\|wiki section]]. If you are still using LimeSurvey 2.x, please continue reading the following [[Theme editor\|wiki section]] (we always recommend our users to upgrade their installations!).'''}}

	=Introduction= <!--T:4-->		=Introduction= <!--T:4-->

	<!--T:5-->		<!--T:5-->
	The '''theme options''' ~~is available on LimeSurvey 3.x, and offers~~ a set of various tools that allows the survey administrators to quickly and easily change the themes-related settings of their surveys.		The '''theme options''' offer a set of various tools that allows the survey administrators to quickly and easily change the themes-related settings of their surveys.

	=Options to change a theme= <!--T:6-->		=Options to change a theme= <!--T:6-->
	There are two ways to use a theme ~~in LimeSurvey 3.x~~, either through the global setting or through the theme option panel inside a survey.		There are two ways to use a theme, either through the global setting or through the theme option panel inside a survey.

	<!--T:12-->		<!--T:12-->

Han: Marked this version for translation

2022-11-27T12:56:22Z

Marked this version for translation

← Older revision		Revision as of 14:56, 27 November 2022
Line 93:		Line 93:
	<div class="simplebox">[[File:help.png]] Modifying the theme is for advance users with basic knowledge of HTML, CSS and Twig.</div>		<div class="simplebox">[[File:help.png]] Modifying the theme is for advance users with basic knowledge of HTML, CSS and Twig.</div>

	=Development=		=Development= <!--T:23-->
	[[File:theme_overview.jpg]]		[[File:theme_overview.jpg]]

	</translate>		</translate>

P teichmann: /* Development */

2022-10-18T12:40:30Z

Development

← Older revision		Revision as of 14:40, 18 October 2022
Line 94:		Line 94:

	=Development=		=Development=
	[[File:~~LSThemesOverview~~.~~pdf~~]]		[[File:theme_overview.jpg]]

	</translate>		</translate>

P teichmann at 12:34, 18 October 2022

2022-10-18T12:34:06Z

← Older revision		Revision as of 14:34, 18 October 2022
Line 92:		Line 92:
	In our case, we have a copy of the fruity theme saved as "extends_fruity" which will be available for use in the list of themes available.		In our case, we have a copy of the fruity theme saved as "extends_fruity" which will be available for use in the list of themes available.
	<div class="simplebox">[[File:help.png]] Modifying the theme is for advance users with basic knowledge of HTML, CSS and Twig.</div>		<div class="simplebox">[[File:help.png]] Modifying the theme is for advance users with basic knowledge of HTML, CSS and Twig.</div>

			=Development=
			[[File:LSThemesOverview.pdf]]

	</translate>		</translate>

Han: Marked this version for translation

2022-03-09T17:27:32Z

Marked this version for translation

← Older revision		Revision as of 19:27, 9 March 2022
Line 12:		Line 12:
	{{Box\|Install Limesurvey 3.0+ to get access to the survey '''theme options''' feature. This option are '''not''' available in the older LimeSurvey versions!}}		{{Box\|Install Limesurvey 3.0+ to get access to the survey '''theme options''' feature. This option are '''not''' available in the older LimeSurvey versions!}}

			<!--T:11-->
	{{Alert\|text='''The following section is still under construction. If you wish to get a short introduction on the new theme system from LimeSurvey 3.x, please continue reading the following [[New_Template_System_in_LS3.x\|wiki section]]. If you are still using LimeSurvey 2.x, please continue reading the following [[Theme editor\|wiki section]] (we always recommend our users to upgrade their installations!).'''}}		{{Alert\|text='''The following section is still under construction. If you wish to get a short introduction on the new theme system from LimeSurvey 3.x, please continue reading the following [[New_Template_System_in_LS3.x\|wiki section]]. If you are still using LimeSurvey 2.x, please continue reading the following [[Theme editor\|wiki section]] (we always recommend our users to upgrade their installations!).'''}}

Line 22:		Line 23:
	There are two ways to use a theme in LimeSurvey 3.x, either through the global setting or through the theme option panel inside a survey.		There are two ways to use a theme in LimeSurvey 3.x, either through the global setting or through the theme option panel inside a survey.

			<!--T:12-->
	Changing the Theme from the '''global setting''' makes the chosen theme the default theme for all surveys you create.		Changing the Theme from the '''global setting''' makes the chosen theme the default theme for all surveys you create.
	If the theme is changed for a particular survey using the '''Theme option panel''' inside the theme, only the theme for that particular survey is changed.		If the theme is changed for a particular survey using the '''Theme option panel''' inside the theme, only the theme for that particular survey is changed.
Line 27:		Line 29:
	==Global setting default theme== <!--T:7-->		==Global setting default theme== <!--T:7-->

			<!--T:13-->
	<center>[[File:default theme setting.png]]</center>		<center>[[File:default theme setting.png]]</center>

	==Theme options panel==<!--T:8-->		==Theme options panel== <!--T:8-->
	This option changes the theme for a particular survey.		This option changes the theme for a particular survey.
	To access the new '''theme options''' feature, go to the [[Survey settings\|survey settings]]:		To access the new '''theme options''' feature, go to the [[Survey settings\|survey settings]]:
Line 36:		Line 39:
	<center>[[File:Survey menu - theme options.png]]</center>		<center>[[File:Survey menu - theme options.png]]</center>

	=Available list of themes=<!--T:10-->		=Available list of themes= <!--T:10-->
	The list of themes available can be access from the Administration Dashboard. Configuration > Advanced > Themes <br>		The list of themes available can be access from the Administration Dashboard. Configuration > Advanced > Themes <br>
	<center>[[File:list of themes.png\|800px]]</center>		<center>[[File:list of themes.png\|800px]]</center>


			<!--T:14-->
	The list is divided into 5 columns:		The list is divided into 5 columns:
	*'''Preview of the theme:''' This shows how the theme will look like when used.		*'''Preview of the theme:''' This shows how the theme will look like when used.
Line 50:		Line 54:
	The buttons are ways in which a theme can be edited and each button will be explained in details below,		The buttons are ways in which a theme can be edited and each button will be explained in details below,

			<!--T:15-->
	**'''Theme editor:''' it will redirect you to the theme editor		**'''Theme editor:''' it will redirect you to the theme editor
	**'''Theme options:''' it will lead you the global configuration of theme options		**'''Theme options:''' it will lead you the global configuration of theme options
Line 57:		Line 62:


	==Theme editor==		==Theme editor== <!--T:16-->
	The LimeSurvey '''core themes''' (default themes) cannot be modified. The "extend" button give users the opportunity for a core theme to be modified(extended).		The LimeSurvey '''core themes''' (default themes) cannot be modified. The "extend" button give users the opportunity for a core theme to be modified(extended).

			<!--T:17-->
	<div class="simplebox">[[File:help.png]] This documentation assumes you already know how to use the Template Editor in the previous version of LS. </div>		<div class="simplebox">[[File:help.png]] This documentation assumes you already know how to use the Template Editor in the previous version of LS. </div>

			<!--T:18-->
	The fruity theme is used for this demonstration on how to extend/modify a theme using the theme editor.		The fruity theme is used for this demonstration on how to extend/modify a theme using the theme editor.

			<!--T:19-->
	When the theme editor button is clicked, the page below is displayed. The theme can be previewed using the "Previous" and "Next" buttons. The screen size can be adjusted to see how responsive the theme is on all devices.		When the theme editor button is clicked, the page below is displayed. The theme can be previewed using the "Previous" and "Next" buttons. The screen size can be adjusted to see how responsive the theme is on all devices.
	A new template can be imported or the current template can be exported as a zip file.		A new template can be imported or the current template can be exported as a zip file.
Line 70:		Line 78:


			<!--T:20-->
	<center>[[File:Theme editor button clicked.png\|800px]]</center>		<center>[[File:Theme editor button clicked.png\|800px]]</center>
	<br>		<br>
Line 76:		Line 85:


			<!--T:21-->
	<center>[[File:extended theme edit.png\|800px]]</center>		<center>[[File:extended theme edit.png\|800px]]</center>

	==Theme inheritance overview==		==Theme inheritance overview== <!--T:22-->
	When a theme is extended, a copy of the original theme can easily be modified.		When a theme is extended, a copy of the original theme can easily be modified.
	In our case, we have a copy of the fruity theme saved as "extends_fruity" which will be available for use in the list of themes available.		In our case, we have a copy of the fruity theme saved as "extends_fruity" which will be available for use in the list of themes available.
	<div class="simplebox">[[File:help.png]] Modifying the theme is for advance users with basic knowledge of HTML, CSS and Twig.</div>		<div class="simplebox">[[File:help.png]] Modifying the theme is for advance users with basic knowledge of HTML, CSS and Twig.</div>
	</translate>		</translate>

Vharris at 09:07, 22 July 2021

2021-07-22T09:07:22Z

← Older revision		Revision as of 11:07, 22 July 2021
Line 36:		Line 36:
	<center>[[File:Survey menu - theme options.png]]</center>		<center>[[File:Survey menu - theme options.png]]</center>

	=Available list of ~~Themes~~=<!--T:10-->		=Available list of themes=<!--T:10-->
	The list of themes available can be access from the Administration Dashboard. Configuration > Advanced > Themes <br>		The list of themes available can be access from the Administration Dashboard. Configuration > Advanced > Themes <br>
	<center>[[File:list of themes.png\|800px]]</center>		<center>[[File:list of themes.png\|800px]]</center>

Vharris at 09:07, 22 July 2021

2021-07-22T09:07:04Z

← Older revision		Revision as of 11:07, 22 July 2021
Line 19:		Line 19:
	The '''theme options''' is available on LimeSurvey 3.x, and offers a set of various tools that allows the survey administrators to quickly and easily change the themes-related settings of their surveys.		The '''theme options''' is available on LimeSurvey 3.x, and offers a set of various tools that allows the survey administrators to quickly and easily change the themes-related settings of their surveys.

	=Options to ~~Change~~ a ~~Theme~~= <!--T:6-->		=Options to change a theme= <!--T:6-->
	There are two ways to use a theme in LimeSurvey 3.x, either through the global setting or through the theme option panel inside a survey.		There are two ways to use a theme in LimeSurvey 3.x, either through the global setting or through the theme option panel inside a survey.

Vharris at 09:06, 22 July 2021

2021-07-22T09:06:45Z

← Older revision		Revision as of 11:06, 22 July 2021
Line 25:		Line 25:
	If the theme is changed for a particular survey using the '''Theme option panel''' inside the theme, only the theme for that particular survey is changed.		If the theme is changed for a particular survey using the '''Theme option panel''' inside the theme, only the theme for that particular survey is changed.

	==Global setting default ~~Theme~~== <!--T:7-->		==Global setting default theme== <!--T:7-->

	<center>[[File:default theme setting.png]]</center>		<center>[[File:default theme setting.png]]</center>
Line 57:		Line 57:


	==Theme ~~Editor~~==		==Theme editor==
	The LimeSurvey '''core themes''' (default themes) cannot be modified. The "extend" button give users the opportunity for a core theme to be modified(extended).		The LimeSurvey '''core themes''' (default themes) cannot be modified. The "extend" button give users the opportunity for a core theme to be modified(extended).

Line 78:		Line 78:
	<center>[[File:extended theme edit.png\|800px]]</center>		<center>[[File:extended theme edit.png\|800px]]</center>

	==Theme inheritance ~~Overview~~==		==Theme inheritance overview==
	When a theme is extended, a copy of the original theme can easily be modified.		When a theme is extended, a copy of the original theme can easily be modified.
	In our case, we have a copy of the fruity theme saved as "extends_fruity" which will be available for use in the list of themes available.		In our case, we have a copy of the fruity theme saved as "extends_fruity" which will be available for use in the list of themes available.
	<div class="simplebox">[[File:help.png]] Modifying the theme is for advance users with basic knowledge of HTML, CSS and Twig.</div>		<div class="simplebox">[[File:help.png]] Modifying the theme is for advance users with basic knowledge of HTML, CSS and Twig.</div>
	</translate>		</translate>