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

Blog

How to install RainLoop webmail
27th of April 2016

How to configure code coverage with Selenium in Phpunit
24th of February 2014

How to install roundcube
9th of December 2013

How to jail / chroot users in FTP / SFTP
12th of June 2013

How to install a web server
23rd of April 2012

How to install svn server
15th of August 2011

How to create color schemes in Liferay
1st of June 2011

How to integrate JasperServer into Liferay
10th of March 2011

Good practices in applications development in Liferay and Alfresco
21st of February 2011

How to configure Alfresco with LDAP for authentication
9th of February 2011

How to merge two ldap servers with Penrose ldap virtual server
8th of February 2011

How to integrate KonaKart into Liferay
24th of January 2011

How to configure Liferay with Penrose LDAP and CAS
17th of January 2011

How to install Liferay
16th of January 2011

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
VariableExampleDescription
${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:
    ${PLUGINS_SDK_PATH}/themes/${THEME_NAME}/docroot/WEB-INF
  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.
    12345678910111213
    <look-and-feel>
        <compatibility>
            <version>6.0.5+</version>
        </compatibility>
        <theme id="${THEME_NAME}" name="Ochonunos Color Scheme Example">
            <color-scheme id="01" name="Sun">
                <css-class>sun</css-class>
            </color-scheme>
            <color-scheme id="02" name="Moon">
                <css-class>moon</css-class>
            </color-scheme>
        </theme>
    </look-and-feel>
Creation of color schemes css files
  1. Create the following url in you SDK folder:
    ${PLUGINS_SDK_PATH}/themes/${THEME_NAME}/docroot/_diffs/css/color_schemes
  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:
    ${PLUGINS_SDK_PATH}/themes/${THEME_NAME}/docroot/_diffs/css/custom.css
    There, you need to add this code:
    12
    @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:
    1234567
    /* 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:
    ${PLUGINS_SDK_PATH}/themes/${THEME_NAME}/docroot/_diffs/images/color_schemes/sun
    and another one for the moon color scheme
    ${PLUGINS_SDK_PATH}/themes/${THEME_NAME}/docroot/_diffs/images/color_schemes/moon
  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