Theme Development in Liferay

After installing a portal system (or web server), the first thing you want to do is create a simple web page and start customizing the theme. Unfortunately, Liferay's documentation is terribly unclear about that.

Well, its suggested normal method is to choose from a number of ready themes. Umm, NO! Nobody wants to use a theme like that. Every organization has their own colors and graphics and if not, you nevertheless want to have something that you have in your mind, not what some others have.

So, the "advanced" method is to develop a custom theme, which you can then deploy in Liferay. The Liferay plugin for Eclipse supports that. However, that method is way too heavy for me at least. I don't want to run a separate development Liferay on my machine, as I don't have enough memory in my home computer to do it fast enough. I want to work directly with the production server. I also suspect that deploying a theme takes longer than a second.

So, what I wanted to do was to just edit some CSS in the web server, save, reload, and see the result. This method of themeing does not seem to be documented anywhere, or at least it's hard to find. Anyhow, the easy way seems to be to edit the custom.css file in "classic" theme. The full path to the file is tomcat-x.x.x/webapps/ROOT/html/themes/classic/css/custom.css.

The problem with that was that just editing it did not reload it immediately, or actually ever. Even restarting the serve does not reload it. I found some suggestions for properties that would need to be set in the portal-ext.properties, but they didn't quite work in my case.

Finally, I found the solution right there in the Liferay's installation package. The file tomcat-6.0.29/webapps/ROOT/WEB-INF/classes/portal-developer.properties has the following settings for development:

theme.css.fast.load=false
theme.images.fast.load=false

javascript.fast.load=true
javascript.log.enabled=true

layout.template.cache.enabled=false

browser.launcher.url=

combo.check.timestamp=true

freemarker.engine.cache.storage=soft:1
freemarker.engine.modification.check.interval=0

openoffice.cache.enabled=false

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

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

com.liferay.portal.servlet.filters.themepreview.ThemePreviewFilter=trueroot

I don't actually know which of the settings are really necessary, but now it seems to work great. Just edit the file and it's reloaded immediately.