You can provide various “flavors” of your theme by creating color schemes for it. Color schemes let you keep the styles and overall design for your theme, while at the same time giving a new look for your users to enjoy. You specify color schemes with a CSS class name, which of course also lets you choose different background images, different border colors, and more.

classic-theme-color-schemes.png

Figure 1: Liferay’s Classic theme offers three color schemes. You too can offer eye-pleasing color schemes for your themes.

The example below shows defines a Day color scheme and a Night color scheme. Here’s the code as specified in the plugin’s liferay-look-and-feel.xml file:

<theme id="deep-blue" name="Deep Blue">
    <color-scheme id="01" name="Default">
        <default-cs>true</default-cs>
        <css-class>default</css-class>
    <color-scheme-images-path>${images-path}/color_schemes/${css-class}
    </color-scheme-images-path>
</color-scheme>
    <color-scheme id="02" name="Day">
        <css-class>day</css-class>
    </color-scheme>
    <color-scheme id="03" name="Night">
        <css-class>night</css-class>
    </color-scheme>
</theme>

In your theme’s _diffs/css folder, you can create a color_schemes folder and place a .css file in it for each color scheme your theme supports. If you don’t specify a .css file for a color scheme, the theme’s default color scheme is used.

In addition to the Day and Night color schemes, you’ll notice that the Default color scheme is defined as well. This allows you to return to the default look and feel for your theme. Note that color schemes are sorted alphabetically by name rather than id. In the example above, Day would be selected by default when you choose the Deep Blue theme, if the <default-cs> element was not added. The <default-cs> element overrides the alphabetical sorting and sets the color scheme that is selected by default, when the theme is chosen.

To make the color schemes of the .css files available, import them into your docroot/css/custom.css file. The example’s day.css and night.css files could be specified in the custom.css file using these statements:

@import url(color_schemes/day.css);
@import url(color_schemes/night.css);

The color scheme CSS class is placed on the page’s <body> element, so you can use it to identify your styling. It’s conventional to prefix all your CSS styles. For example, the developer would prefix all the styles with the word day in a color scheme CSS file named day.css:

body.day { background-color: #ddf; }
.day a { color: #66a; }

Note that the Default color scheme does not require this, as it uses your theme’s custom.css for styling. After specifying your CSS files, you can create separate thumbnail images for your color schemes.

In the liferay-look-and-feel.xml file, the <color-scheme-images-path> element tells Liferay where to look for a theme’s thumbnail images (you only have to place this element in one color scheme for it to affect all of them). For the example above you could use the folders _diffs/images/color_schemes/default, _diffs/images/color_schemes/day, and _diffs/images/color_schemes/night. In each of your color scheme’s folders, place a thumbnail.png and screenshot.png file. Make sure your thumbnail images follow the specifications defined in the Creating a Theme Thumbnail tutorial.

There you have it. Now you can go color scheme crazy with your themes!

Related Topics

Designing a Layout Template

Creating a Theme Thumbnail

0 (0 Votes)
Making Themes Configurable with Settings Previous