Liferay Theme Settings

The Liferay Theme settings provide an option to the Liferay portal administrator to modify the page elements. We can apply the theme settings without modifying or deploying the code.

We can modify the configurable theme settings from the configuration panel of the theme.

Please visit the article on how to create a Liferay theme and basic Liferay theme structure before continuing.

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.

themeSettings1.PNG

Finally, set the theme setting value to true. We can observe the page title as shown below.

themeSettings2.PNG

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.

themeSettings3.PNG

Finally, unselect the check box and observe the changes.

themeSettings4.PNG

Conclusion

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.