Apply Color Schemes in Liferay Theme

Apply Color Schemes in Our Theme

The technique documented here creates a "color scheme" that has the borders turned off, but preserves the other attributes of the theme, and does so with a single CSS source set (allowing for easier maintenance). It uses a CSS design pattern known as "CSS sub-class selectors." Note that this technique can be used for more than just borders. It can be used when you have several very small variations on a single theme, and you want to keep all of those variations in a single source file.



Step1. import the color scheme css in custom.css and write css for display the color schemes div

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

/*------------color Schemes ------------*/
.color_schemes {
position:absolute;
text-align:right;
width:100%;
margin-top:65px;
}

Step2. Then in portal_normal.vm write this code

<div class="color_schemes">
<table border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle" title="change theme color">
<input type="image" src="$images_folder/color_schemes/red.png" onclick="body.className=value; setCookie('bgColor',value,60);" name="theme" value="red" id="red" width="10px" height="10px">
<input type="image" src="$images_folder/color_schemes/blue.png" onclick="body.className=value; setCookie('bgColor',value,60);" name="theme" value="blue" id="blue" width="10px" height="10px">
</td>
</tr>
</table>
</div>
Step3. Then deploy from your theme 

Posted in: Liferay Articles