Liferay Theme Settings

Liferay Theme Settings allow us to configure theme in the run time. We can define liferay theme settings for a custom theme and configure theme. Liferay theme settings are defined as key-value pairs in the liferay-look-and-feel.xml file of the theme.Below is the syntax of  liferay theme settings

[richfocus title=”Liferay Theme Settings Syntax” purpose=”code”]

	<settings>
		<setting key="my-setting1" value="my-value1" />
		<setting key="my-setting2" value="my-value2" />
	</settings>

[/richfocus]

[richfocus title=”We can access liferay theme settings like below” purpose=”code”]

	$theme.getSetting("my-setting1")
	$theme.getSetting("my-setting2")

[/richfocus]

Why we need Theme Settings?

Suppose we have developed a theme. As we know that Liferay Theme is a collections of css, templates, js and images. A theme has a header, footer etc. Consider for some reason we need similar theme that we have developed except the footer is different. So are we going to develop another theme only for different footer? The answer No. Because liferay already provides solution for it.

A theme is packaged as war file which is hot deploy able. That means one war contains only one theme. But its also possible to give different names for a single theme and it will act like a different themes when its deployed. 

How to add theme settings?

Open your liferay-look-and-feel.xml file and modify it like below

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

<look-and-feel>
	<compatibility>
		<version>6.2.1+</version>
	</compatibility>
	<theme id="sample" name="Sample Theme">
		<settings>
			<setting key="theme-id" value="sample" />
		</settings>
	</theme>
	<theme id="blog" name="Blog Theme">
		<settings>
			<setting key="theme-id" value="blog" />
		</settings>
	</theme>
</look-and-feel>

[richfocus title=”Be careful”]
While adding theme settings or adding different id we should not change the original theme id. For example when we create theme by Plugin SDK or Liferay IDE a theme id will be created on the basis of input to IDE or Plugin SDK. We can keep the original theme id unchanged and add other theme id/settings according to our requirements.
[/richfocus]

 As soon as we deploy the theme we will notice that  2 themes are deployed.

See the above. There are two new themes are available. Is not it cool. Whenever we will apply the theme, the theme settings will be also applied. Consider we have applied Blog Theme. For blog theme check the settings in the above liferay-look-and-feel.xml and its 

<setting key=”theme-id” value=”blog” />

Now we can access this settings in the VM file as
#set ($theme_id = $theme.getSetting(“theme-id”))

Now we can write our own logic like

	#if($theme_id == 'sample')
		do something for sample
	#elseif($theme_id == 'blog')
		do something for blog
	#end