Making Configurable Theme Settings

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.

Figure 1: Here are examples of configurable settings for the site Admin.

Follow the steps below to create theme settings:

  1. 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:

    	<theme id="your-theme-name" name="Your Theme Name">
          <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" />
          portlet decorators...

    The example below adds a text input setting for a custom hex code:

      <setting configurable="true" key="my-hex-code" type="text" value="blue" />

    See the liferay-look-and-feel.xml’s DTD docs for an explanation of the setting’s configuration options.

  2. Create a file called init_custom.ftl in your theme’s templates folder if it doesn’t already exist, and follow the patterns in the table below to define your theme setting variables in it:

    Return TypeDescriptionPattern
    Booleana select box with the options true and false or a checkbox with values yes and no<#assign my_variable_name = getterUtil.getBoolean(themeDisplay.getThemeSetting("theme-setting-key"))/>
    Stringa 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 = 
  3. Add your theme setting variables to the theme template. The example below prints my_hex-code’s value as the value of the header’s style attribute:


    <header style="background-color:${my_hex_code}">
  4. 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.

« Creating Color Schemes for Your ThemeUsing Font Awesome and Glyph Icons in Your Theme »
Was this article helpful?
0 out of 0 found this helpful