Settings

You can define settings to make your theme configurable. Create a file named liferay-look-and-feel.xml in the WEB-INF directory, with the following content:

<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.1.0//EN"
"http://www.liferay.com/dtd/liferay-look-and-feel_6_1_0.dtd">

<look-and-feel>
    <compatibility>
        <version>6.1.1+</version>
    </compatibility>
    <theme id="deep-blue" name="Deep Blue">
        <settings>
            <setting key="my-setting" value="my-value" />
        </settings>
    </theme>
</look-and-feel>

To define additional settings, add more <settings> elements to the file. Access the settings from the theme templates using the following code:

$theme.getSetting("my-setting")

Let’s say you want to be able to choose from two different page headers (perhaps one includes more details, while the other is smaller). Instead of creating two themes that are identical except for some changes in the header, you can create one and define a setting that lets you choose which header is displayed.

In the portal_normal.vm template, write:

#if ($theme.getSetting("header-type") == "detailed")
    #parse ("$full_templates_path/header_detailed.vm")
#else
    #parse ("$full_templates_path/header_brief.vm")
#end

Then, add two different entries in the liferay-look-and-feel.xml file that refer to the same theme, but have different values for the header-type setting:

<theme id="deep-blue" name="Deep Blue">
    <settings>
        <setting key="header-type" value="detailed" />
    </settings>
    </theme>
        <theme id="deep-blue-mini" name="Deep Blue Mini">
    <settings>
        <setting key="header-type" value="brief" />
    </settings>
</theme>

Alternatively, you can make your settings configurable from within Liferay portal. Use configurable settings to let users turn certain theme features on or off or to allow users to provide input to a theme setting.

As an example, you can create an option to display a slogan next to your company’s name in the footer of your site’s pages:

1. Insert logic into your portal_normal.vm template to display a slogan along with your company’s name (e.g. Nosester) in the footer of your site pages:

   <footer id="footer" role="contentinfo">
       <p>
           #if($theme.getSetting("display-slogan-footer") == true)
               Nosester $theme.getSetting("slogan")
           #else
               Nosester
           #end
       </p>
   </footer>
   

   ---

   Note: Let’s look more closely at two theme setting variables appearing in the above logic. The display-slogan-footer variable holds a boolean value indicating whether to display the version of the footer that contains your slogan. The slogan variable holds your slogan text.

   ---

2. Declare the two theme setting variables in your liferay-look-and-feel.xml, located in your theme’s WEB-INF folder:

   <settings>
       <setting configurable="true"
                key="slogan"
                type="textarea"
                value=""
       />
   
       <setting configurable="true"
                key="display-slogan-footer"
                type="checkbox"
                value="true"
       />
   </settings>
   

The portal administrator can enter a slogan and activate it for the portal via the Look and Feel section of the Manage Site Pages panel (see the Creating sites and managing pages section of Using Liferay Portal).

When the portal administrator saves the settings, your site’s pages show the new footer, including the slogan.

Note: Use a language properties hook to display configurable theme settings properly, like the slogan text area and footer checkbox from the previous example. For details, see the Overriding a Language.properties File section found in the Hooks chapter of this guide.

Next, let’s customize your theme’s color scheme.