Color schemes in liferay theme
Creating a color schemes in liferay will help you to change the look and feel immediately with a CSS class name, which of course also help you to choose different background images, different border colors, and more.
Creating a Color Schemes
Here’s how you can define your color schemes in liferay-look-and-feel.xml:
<theme id="hm-blue" name="HM Blue">
<settings>
<setting key="my-setting" value="my-value" />
</settings>
<color-scheme id="01" name="Blue">
<css-class>blue</css-class>
<color-scheme-images-path>
${images-path}/color_schemes/${css-class}
</color-scheme-images-path>
</color-scheme>
<color-scheme id="02" name="Grey">
<css-class>grey</css-class>
</color-scheme>
</theme>
Create a color_schemes folder inside your _diffs/css folder, and place a .css file in it for each color scheme. we can have either one file called grey.css or we can use both blue.css and grey.css to specify each scheme. Let’s use the better option here, creating both files to define our color schemes.
Place the following lines at the bottom of your custom.css file:
@import url(color_schemes/blue.css);
@import url(color_schemes/grey.css);
The color scheme CSS class is placed on the <body> element, so you can use it to identify your styling. In blue.css, prefix all your CSS styles like this:
body.blue { background-color: #0000FF; }
.blue a { color: #fff; }
In grey.css, prefix all your CSS styles like this:
body.grey{ background-color: #E4E4E4;; color: #000; }
.grey a { color: #000; }
You can create separate thumbnail images for your color schemes. The element tells Liferay where to look for these images (you only have to place this element in one color scheme for it to affect both). For our example, create the folders _diffs/images/color_schemes/blue and_diffs/images/color_schemes/grey. In each folder place a thumbnail.png and screenshot.png file, according to the specifications defined in the Thumbnails section in Liferay Theme.
Leave a Reply