We can modify the configurable theme settings from the configuration panel of the theme.
Enabling Liferay theme settings
We can define the Liferay theme settings in the theme’s liferay-look-and-feel.xml file.
These settings should be defined with the XML tag <settings> and each individual theme setting is defined using the <setting> tag.
The following is an example of a simple theme setting.
<settings> <setting key="my-key" value="my-value" /> </settings>
The <setting> tag contains key and value pair, along with optional parameters like:
- configurable: Boolean property that defines whether the theme setting is configurable or not.
- type: The data type of setting (checkbox, select, text, or text area). The default data type is text.
- options: If the data type is of type select, this attribute will hold a comma-separated list of option values.
Configurable Theme Settings
We can make our custom theme settings configurable to allow our theme to modify the page elements based on configuration setting value from the administrator panel.
An example configurable theme setting is given below.
Here we have a theme setting, defined inside the liferay-look-and-feel.xml file. The theme setting is configurable(attribute configurable = “true” is used) and has theme setting type as select with option values true and false.
<setting key="show-page-title" configurable="true" value="true" options="true,false" type="select" />
The theme setting hides the page title using the following code(using velocity template language).
We are fetching the custom configuration setting value from the liferay-look-and-feel.xml file and then hide or show the page title based on the theme setting value.
##Get the theme setting value from liferay-look-and-feel.xml using key: #set($show_page_title = $theme_display.getThemeSetting('show-page-title')) ##If theme setting value is 'true' show page title: #if($show_page_title == 'true') <h2 class="page-title"> <span>$the_title</span> </h2> #end
The below image shows the output.
Select the show-page-title theme settings value as false.
Finally, set the theme setting value to true. We can observe the page title as shown below.
Portal defined theme settings
Portal provides some default theme setting keys. A few of the available theme setting properties are portlet borders, bullet styles, and the site name.
Here is an example of a portlet borders theme setting.
<setting key="portlet-setup-show-borders-default" configurable="true" value="true" type="checkbox" />
We can use the portlet-setup-show-borders-default theme setting key to show or hide the portlet borders.
Now, let us see how the theme setting configuration works.
Select the configuration check box as shown below.
Finally, unselect the check box and observe the changes.
The Liferay theme settings are handy features. These theme setting also makes our theme configurable in the live environment without any code modification or deployment.
In this article, we learned how to add Liferay theme settings and how to configure them.