« Back to Themes

Theme variations using CSS

Introduction #

This entry is an extension to the Wiki entry on building themes (see Themes v4.3-v5.2.x). There are two nice sections on that page on using theme specific "Settings" and "Color Schemes" for creating variations of themes. There is also an example that shows how one can create a variation on a theme by including different sections in a template.

The technique documented here was inspired by that idea of having two theme "color schemes" registered, but having only a single source set. You should be familiar with that technique before reading this entry.

The example document here was used in a theme where it was desired to have a variation of a theme where the portlet borders are turned off universally. While its true that one could instruct users to go to each portlet's configuration, and "turn off" border display manually, that may impractical on sites with large numbers of portlets and/or pages. What if the end user wanted to switch back and forth between the two looks and decide which they liked better?

Theme Variations #

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.

1. Per the known technique of creating a color scheme, we create a color scheme for the default theme registered in liferay-look-and-feel.xml:

  <theme id="customTheme" name="My custom theme">
     <color-scheme id="01" name="Default">
        <css-class>default</css-class>
        <color-scheme-images-path>${images-path}/color_schemes/default</color-scheme-images-path>
     </color-scheme>
  </theme>

2. Separate out all color settings and image selections into a special CSS file (in this example, put it in css/color_schemes/default.css. Here are a few sample entries in the file:

  .default #portlet-wrapper, .default #portlet-wrapper- {
      background-color: white;
  }
  .default .portlet-title {
      color: black;
  }
  .default .portlet, .default .portlet-topper, .default .portlet-content, .default .portlet-title {
      background-image: url(../../images/color_schemes/default/portlet/portlet_bg.png);
  }

3. Now, here is the "new" technique: We want EVERYTHING in the theme, colors and all, to be identical, with a single exception: we don't want borders. So, a NEW entry in liferay-look-and-feel.xml following the above "default" definition:

  <color-scheme id="02" name="Default with no portlet borders">
     <css-class>default noborders</css-class>
     <color-scheme-images-path>${images-path}/color_schemes/default</color-scheme-images-path>
  </color-scheme>

Important to note in the above: the "css-class" entry is defined as the SAME css class as the first one, followed by a space, then the name of the theme's "sub-class" (in this case, "noborders"). Next, the "color-scheme-images-path" is defined as the SAME path as the original "default" scheme. Thus, there is no need to duplicate the image files either.

4. This is the only new CSS that needs to be added to the "default.css" file:

  .default.noborders .portlet,
  .default.noborders .portlet-topper,
  .default.noborders .portlet-content,
  .default.noborders .portlet-title {
      background-image: none;
      background-color: white;
  }

Notice that the initial CSS selector is ".default.noborders", with NO space between them. That is CSS for "must have both of these classes".

Since in the liferay-look-and-feel.xml, the "css-class" has the space, the Liferay theme system generates class="default noborders" in the HTML of the portal. All of the CSS that is namespaced with JUST the selector ".default" will be applied to BOTH themes - the "Default", and the "Default with no borders" theme. All CSS selectors that are namespaced with ".default.noborders" will apply ONLY if the "no borders" theme is selected.

5. We could create a third and forth theme like this:

  <color-scheme id="03" name="Default with no portlet borders, blue background">
     <css-class>default noborders blue-bg</css-class>
     <color-scheme-images-path>${images-path}/color_schemes/default</color-scheme-images-path>
  </color-scheme>
  <color-scheme id="04" name="Default with no portlet borders, red background">
     <css-class>default noborders red-bg</css-class>
     <color-scheme-images-path>${images-path}/color_schemes/default</color-scheme-images-path>
  </color-scheme>

and add this to the CSS

  .default.noborders.blue-bg .portlet {
      background-color: blue;
  }
  .default.noborders.red-bg .portlet {
      background-color: red;
  }

We now have FOUR theme variations with only a couple of lines in the CSS file. The selector ".default" applies to ALL FOUR themes. The selector ".default.noborders" applies to three of the four (those without borders). The selector ".default.noborders.blue-bg" applies only to that with the blue background.

It would be fairly easy to make a large number of permutations on this: a "blue background WITH borders" for example, using a similar technique. The selector ".default.blue-bg" will apply to all elements that are default and blue background, regardless of if they have a border or not.

See Also #

0 Attachments
100929 Views
Average (4 Votes)
The average rating is 2.0 stars out of 5.
Comments
Threaded Replies Author Date
I want to add color-schemes to my custom theme... Navin D Singh May 4, 2009 11:01 AM
You must to put a new liferay-look-and-feel.xml... Ricard Cabrera Vivó August 7, 2009 1:54 AM
it is not working for me on liferay 5.2.3 KK rajput August 17, 2009 2:03 AM
I try to add color-scheme tag to... Siwat Niyomtasna August 6, 2010 3:53 AM
So I'll try to give a simple example for... Jason Renschler August 27, 2010 12:11 PM
Hi Can any one tel what is the use of color... Mohammad Azharuddin April 22, 2013 3:12 AM
Hello All... I created custom theme and applied... Pradip A Bhatt March 27, 2014 5:53 AM
Hi, I was also trying to have color scheme... Varun Jain May 4, 2015 9:54 PM

I want to add color-schemes to my custom theme but there is no liferay-look-and-feel.xml file. I tried to add a folder WEB-INF and liferay-look-and-feel.xml file inside _diff folder but color scheme never appears for the registered theme.
Posted on 5/4/09 11:01 AM.
You must to put a new liferay-look-and-feel.xml file in WEB-INF directory of your theme.
There's a good example in Sample Styled Advanced theme, available to download from liferay control panel.
Posted on 8/7/09 1:54 AM in reply to Navin D Singh.
it is not working for me on liferay 5.2.3
Posted on 8/17/09 2:03 AM.
I try to add color-scheme tag to liferay-look-and-feel.xml, it caused my theme can not be deployed. I have looked in the DTD and still do not know what I was doing wrong.

Could you attach sample of liferay-look-and-feel.xml within this page so that I can compare with mine, thank you.
Posted on 8/6/10 3:53 AM.
So I'll try to give a simple example for setting up a theme, named Custom Colors, with two color schemes (green and orange).

1) Create a liferay-look-and-feel.xml file in /plugins-sdk/themes/custom-colors-theme/docroot/WEB-INF:

<?xml version="1.0"?>
<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 5.2.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_5_2_0.dtd">

<look-and-feel>
<co­mpatibility>
<version>5.2.0+</version>
</compatibility>
<theme id="custom-colors" name="Custom Colors">
<color-scheme id="01" name="Green">
<css-class>green</css-class>
</color-scheme>
<color-schem­e id="02" name="Orange">
<css-class>orange</css-class>
</color-scheme>
</theme>
</lo­ok-and-feel>

2) Create your css files:
/plugins-sdk/themes/custom-colors-theme/docroot/_diffs/css/color_schemes
-> green.css
-> orange.css

3) Open /plugins-sdk/themes/custom-colors-theme/docroot/_diffs/css/custom.css

4) Add these two lines to the top of custom.css:
@import url(color_schemes/green.css);
@import url(color_schemes/orange.css);

5) If you plan on changing out the images make sure you create:
/plugins-sdk/themes/custom-colors-theme/docroot/_diffs/images/color_schem­es
-> /green
-> /orange

6) Run the ant build for your theme and you should be good to go

The big thing to note here is that you must import your color scheme css files. I assumed that Liferay would include the appropriate CSS file for me, but that does not happen.

* Note that I am using 5.2 EE *
Posted on 8/27/10 12:11 PM in reply to Siwat Niyomtasna.
Hi
Can any one tel what is the use of color scheme and scenireo where we implement it
Posted on 4/22/13 3:12 AM.
Hello All...
I created custom theme and applied in my pages. I applied _unstyled theme. It works properly now problem is that I have to use calendar-portlet so I added in my pages. Now.. this ca;endar port;let is not displayed properly. So many changes I have to do..

I want to use default css-style-layout which we see in classic / welcome for that Calendar portlet. How it possible?
Posted on 3/27/14 5:53 AM.
Hi,

I was also trying to have color scheme like others here. I tried following this link (https://dev.liferay.com/develop/tutorials/-/knowledge_base/6-1/color-schemes).

And as far as now, it is not working. But the no. of colors I mentioned in the xml file are showing up in the control panel but theme is not being bound to follow the CSS rules according to the color I choose from control panel.

Please suggest if I missed on something or is there anything to do otherwise to get it done.

Regards,
Varun Jain
Posted on 5/4/15 9:54 PM.