Liferay theme color schemes provides new look to portal, without changing the over all style and design of theme. We specify different css class to each color schemes, which also helps us change background images, border colors, etc.

Please check how to create Liferay theme and basic Liferay theme structure before continuing.

Following are the procedure to add color schemes to liferay custom theme:

  • Add XML tag <color-scheme> to liferay-look-and-feel.xml file of the theme as shown below. Each color scheme will have it’s own <color-scheme> tag. This tag contains name and id attributes.
<color-scheme name="yellow" id="id1"></color-scheme>
  • Inside <color-scheme> tag, we can add three sub tags as shown below. Tag <default-cs> is used to set the current color scheme as default color scheme of the theme by setting it’s value to “true“.
  • The <css-class> tag is used to define a css class for this color scheme.  We can use this defined css class to apply custom css.
  • The <color-scheme-images-path> can be used to set an images path for this color scheme. We can add color scheme specific thumb nail images by placing thumbnail.png image to this path.
a<color-scheme name="yellow" id="id1">
 <default-cs>true</default-cs> 
 <css-class>yellow</css-class>
 <color-scheme-images-path>
    ${images-path}/color_schemes/yellow/
 </color-scheme-images-path>
</color-scheme>
  • Create a sub folder called color_schemes under _diffs/css/ directory and place a css file with name yellow.css. Add the following code inside yellow.css file. Here we are applying background-color to body element.
body.yellow, .yellow {
 background-color: #ffff00;
}
.yellow { 
  .portlet {
     background-color: white;
  }
}
  • Import the css from custom.css file as shown below:
@import url(color_schemes/yellow.css);
  • Create a folder named “yellow” within _diffs/images/ directory and add thumbnail.png image with proper size(Ex: 75px X 60px). This thumbnail image will be appeared for yellow color scheme.
  • Following are the complete code with two color schemes yellow and red.

liferay-look-and-feel.xml :

<?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.0+</version>
 </compatibility>
 <theme id="MyTheme" name="MyTheme">
 <color-scheme name="yellow" id="id1">
  <default-cs>true</default-cs> 
  <css-class>yellow</css-class>
  <color-scheme-images-path>
     ${images-path}/color_schemes/yellow/
  </color-scheme-images-path>
 </color-scheme>
 <color-scheme name="red" id="id2">
  <css-class>red</css-class>
  <color-scheme-images-path>
     ${images-path}/color_schemes/red/
  </color-scheme-images-path>
 </color-scheme>
 </theme> 
</look-and-feel>

yellow.css :

body.yellow, .yellow {
   background-color: #ffff00;
}
.yellow { 
 .portlet {
   background-color: white;
 }
}

red.css :

body.red, .red {
   background-color: #ff0000;
}
.red{ 
  .portlet{
   background-color: white;
 }
}

custom.css : 

@import url(color_schemes/yellow.css);
@import url(color_schemes/red.css);

Add the thumbnail images to corresponding folders as shown below:

colorscheme1

Finally the output:

colorscheme2.PNG

colorscheme3.PNG

 

Check out all Liferay related posts.

Note: Version used: Liferay 6.2 + Apache Tomcat 7.