Liferay Theme Color Schemes

The Liferay theme color schemes provide a new look to the portal without changing the overall style and design of the theme. We specify different CSS classes for each color scheme, which helps us change background images, border colors, etc.

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

Version details: Liferay 6.2

Creating liferay theme color schemes

Let us add color schemes to the custom Liferay theme.

Add the XML tag <color-scheme> to the liferay-look-and-feel.xml file of the theme as shown below. Each color scheme will have its own <color-scheme> tag. This tag contains name and id attributes.

<color-scheme name="yellow" id="id1"></color-scheme>

Inside the <color-scheme> tag, we can add three subtags as shown below.

The tag <default-cs> is used to set the current color scheme as the default color scheme of the theme by setting its 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 the path of an image for this color scheme. We can add color scheme-specific thumbnail images by placing a thumbnail.png image on this path.

<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 subfolder called color_schemes under _diffs/css/ directory and place a css file with the name yellow.css. Add the following code inside the yellow.css file. Here we are applying background color to the body HTML tag.

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

Import the CSS from the 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 appear for the yellow color scheme.

Below is 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.

Testing the output

Deploy the theme to liferay portal.

We should be able to select the color schemes now on the theme configuration as shown below.

Select the Red color scheme to apply another color scheme.

Conclusion

In this article, we learned how to create add color schemes to the Liferay theme.