If you have an aspect of a theme that you want an Administrator to configure without having to manually update and redeploy the theme, you can create a theme setting for it. Theme settings are very versatile and can be customized to meet your needs.
Figure 1: Here are examples of configurable settings for the site Admin.
Follow the steps below to create theme settings:
-
Open your theme’s
WEB-INF/liferay-look-and-feel.xml
file, and follow the pattern below to nest a<setting/>
element inside the parent<settings>
element for each setting you want to add:<look-and-feel> <compatibility> <version>7.2.0+</version> </compatibility> <theme id="your-theme-name" name="Your Theme Name"> <template-extension>ftl</template-extension> <settings> <setting configurable="true" key="theme-setting-key" options="true,false" type="select" value="true" /> <setting configurable="true" key="theme-setting-key" type="text" value="My placeholder text" /> </settings> <portlet-decorator> portlet decorators... </portlet-decorator> </theme> </look-and-feel>
The example below adds a text input setting for a custom hex code:
<settings> <setting configurable="true" key="my-hex-code" type="text" value="blue" /> </settings>
See the
liferay-look-and-feel.xml
’s DTD docs for an explanation of the setting’s configuration options. -
Create a file called
init_custom.ftl
in your theme’stemplates
folder if it doesn’t already exist, and follow the patterns in the table below to define your theme setting variables in it:Return Type Description Pattern Boolean a select box with the options true
andfalse
or a checkbox with valuesyes
andno
<#assign my_variable_name = getterUtil.getBoolean(themeDisplay.getThemeSetting("theme-setting-key"))/>
String a text input or text area input <#assign my_variable_name = getterUtil.getString(themeDisplay.getThemeSetting("theme-setting-key"))/>
The example below adds a custom hex code setting:
<#assign my_hex_code = getterUtil.getString(themeDisplay.getThemeSetting("my-hex-code"))/>
-
Add your theme setting variables to the theme template. The example below prints
my_hex-code
’s value as the value of the header’sstyle
attribute:portal_normal.ftl
:<header style="background-color:${my_hex_code}">
-
Deploy the theme to apply the changes. To set the theme setting for a Public or Private page set, click the Gear icon next to the page set you want to configure and update the setting under the Look and Feel tab. Alternatively, you can set the theme setting for an individual page by opening the Actions menu next to the page and selecting Configure and choosing the Define a Specific look and feel for this page option.
Great! You’ve created configurable settings for your theme.