Details CSS in liferay Theme

By default, CSS styles in liferay can be found in folder /css. Bundle liferay with Classic theme means that css folder path: ~/tomcat-6.0.18/webapps/ROOT/html/themes/classic.

There are few css styles file. Main css (main.css) located all styling files from the lowest to highest (in term of priority) from top to bottom.

Let say, I want to add a new css file (e.g mystyle.css). I must import this file in main.css – add this new line @import url(mystyle.css); - the styles in this new file will overwrite all styles in other files above it. For a standard practice, custom.css has the highest priority.

Sometimes, new developer understood this thing but when doing some customization in custom.css nothing changes. Why? It is because the server not refers to that changes. When developer inspected the element using firebugs, the css style reference maybe main.css or base.css only. How to overcome this problem?

For development purpose only, developer must add new properties in portal-ext.properties (/webapps/ROOT/WEB-INF/classes). The properties are shows as the following.

## FOR DEVELOPMENT PURPOSE, NEED TO REMOVE
##AT PRODUCTIONS ##

## Set this property to true to load the theme's merged CSS files
##for faster loading for production.
## Set this property to false for easier debugging for development.
##You can also disable fast loading by setting the
## URL parameter "css_fast_load" to "0".

theme.css.fast.load=false

## Set this to flase to disable the display of CSS logging.

theme.images.fast.load=false

## Set this property to true to load the packed version of
##files listed in the properties "javascript.barebone.files" or

## "javascript.everything.files".

## Set this property to false for easier debugging for development.
##You can also disable fast loading by setting the
## URL parameter "js_fast_load" to "0".
javascript.fast.load=false

## Set this to true to enable the display of JavaScript logging.

javascript.log.enabled=true

## Setting it to false is useful during development if you need
##to make a lot of changes.

layout.template.cache.enabled=false

## Disable Liferay from opening a new browser window
##everytime start the server
browser.launcher.url=
##

## Last Modified

## Set this to true to check last modified date on server side CSS and

## JavaScript. On Development purpose just set it false

last.modified.check=false

## Enabling OpenOffice integration allows the
##Document Library portlet and the Wiki
##portlet to provide conversion functionality. This is tested with
## OpenOffice 2.3.x and 2.4. To start OpenOffice as a service,
##run the command:
openoffice.cache.enabled=false

## Set the Velocity resource managers. We extend the
##Velocity's default resource managers for better scalability.

velocity.engine.resource.manager.cache.enabled=false

## The cache filter will cache content. See ehcache.xml to modify the cache

## expiration time to live.

com.liferay.portal.servlet.filters.cache.CacheFilter=false

## The theme preview filter generates a preview of the currently applied

## theme that can be used by the Dreamweaver Theming plugin.
##This is disabled by default.
##Set the "themePreview" parameter to "1" in the URL to access

## the theme preview for any page. For example, a URL can be

## http://localhost:8080/web/guest?themePreview=1.

com.liferay.portal.servlet.filters.theme.ThemePreviewFilter=true

Posted in: Liferay Articles