Company dedicated to web development, graphic design, photography and web hosting.

How to create color schemes in Liferay
Published Wednesday, 1st of June 2011
Overview How to include different color schemes inside of the same theme. It allows to create different color pages keeping the same main structure but changing colors and not only, also borders, shadows, positions, etc. for any element as navigation, breadcrumbs, portlets, footer, etc. Tested in Liferay 6. Alias table
${PLUGINS_SDK_PATH}opt/liferay/plugins-sdkThe path to the SDK folder
${THEME_NAME}ochounos-themeThe name of the theme, the dir in the SDK folder
Steps to follow File liferay-look-and-feel.xml
  1. First at all we need to create a new file called liferay-look-and-feel.xml in the next folder:
  2. Fill the file with the next code, defining your color schemes. In the example, two color schemes are defined: sun and moon. Define as many as you need and be sure to define relative ids.
        <theme id="${THEME_NAME}" name="Ochonunos Color Scheme Example">
            <color-scheme id="01" name="Sun">
            <color-scheme id="02" name="Moon">
Creation of color schemes css files
  1. Create the following url in you SDK folder:
  2. Add one file per color scheme, in our case we need to create the next two files:
    • sun.css
    • moon.css
  3. Add your css to the file custom.css or main.css (if you don't need custom.css) using import. The custom.css (and also main.css) is located in this path:
    There, you need to add this code:
    @import url(color_schemes/sun.css);
    @import url(color_schemes/moon.css);
How to create styles
  1. The styles will be applied to the <body>, so you can define the style and variations as follow:
    /* example code to be located in sun.css */
    body.sun { color: #000; }
    .sun span { color: #444; }
    /* example code to be located in moon.css */
    body.moon { color: #666; }
    .moon .portlet { color: #888; }
  2. If you need images in your color schemes, you need to create folders under images. In our example, we will create two folders, one for the sun color scheme:
    and another one for the moon color scheme
  3. If you want, you can add thumbnail and screenshot images adding thumbnail.png and screenshot.png with the same size as the same files in the main folder for the theme but you need to put them in the folders created in the step above.
References There are no references in this entry.

Back to the list of entries