« Back to Themes

Fast Theme Development

Overview2 #

As a theme developer, you might find it time consuming to continuously have to compile (jar) and deploy your theme plugin during development. The following describes a methodology that can be used to assist a theme developer from having to continuously compile and deploy to the server as you refine things like CSS, JavaScript, Theme Images with this simple trick.

Currently this trick is only easily available using Liferay 5.2 and for a logged in user. Variants for any version are certainly imaginable once you understand how this works.

Instructions #

Step 1 : Create a custom attribute for your user #

Go to the control panel, and add a new custom attribute to your user. In this example I'll use a variable named "AlternatePath". As the value for "AlternatePath" set it to the patch to your local _diffs (or base directory depending upon which is relevant to you) of your theme plugin. For myself, on Mac OS, I use:


Linux/Unix users will have a very similar file reference. Windows users will differ slightly as it will need to reference a drive letter in the path. The easiest way to get the right path, use your web browser to open a file locally within the _diffs directory. The URL in your browser should use the correct file:// syntax.

Step 2 : Modify the init_custom.vm to reference the variable you just set #

You can copy and paste the code below into your init_custom.vm. Then compile and deploy your theme plugin. What it does is get the value of the AlternatePath variable we set above, and if it exists and is not empty, it disables theme caching, and then modifies the $imagePath, $javaPath, $cssPath, and $css_main_file variables so that they reference the location on your local computer, instead of the ones within the deployed theme.

#set ($altPath = $user.getExpandoBridge().getAttribute('AlternatePath'))
#if ($altPath && $altPath != "")
	#set ($ignore = $theme_display.setThemeCssFastLoad(false))
	#set ($ignore = $theme_display.setThemeImagesFastLoad(false))
	#set ($ignore = $theme_display.setThemeJsBarebone(false))
	#set ($ignore = $theme_display.setThemeJsFastLoad(false))
	#set ($imagePath = $theme_display.setPathThemeImage("$altPath/images"))
	#set ($javaPath = $theme_display.setPathThemeJavascript("$altPath/javascript"))
	#set ($cssPath = $theme_display.setPathThemeCss("$altPath/css"))
	#set ($css_main_file = $htmlUtil.escape($portalUtil.getStaticResourceURL($request, "$altPath/main.css")))

You should now be able to make modifications to files within your local images, javascript, css, and main.css and the changes become instantly viewable within the portal only to yourself. Once you are satisfied with your changes you can compile and deploy your theme, and then clear the value of the AlternatePath variable you set.

0 Attachments
Average (2 Votes)
The average rating is 4.5 stars out of 5.
Threaded Replies Author Date
Neat trick. Thanks for sharing. I haven't tried... Olaf Kock September 28, 2009 2:34 AM
I've not tried it against the "Same Origin... Jim Klo September 28, 2009 6:58 PM
In MS Windwos beware the Mozilla Firefox... Joosep Simm February 22, 2010 11:06 PM
I can't get it to work with the 6.x release of... Aaron Harshbarger June 24, 2010 2:48 AM
Our shop can't get it to work either on 6.0.... James Collings February 10, 2011 9:27 AM
The only real criticism I've received from... Stian Sigvartsen December 11, 2011 9:23 AM
Stian, for the redeployment issue, check out... Bijan Vakili September 11, 2012 8:54 PM

Neat trick. Thanks for sharing. I haven't tried this yet - does it work with the Javascript "Same Origin Policy" or would we run into problems there? Or would this only apply if JS would contain some Ajax-code that tries to connect back to the server?

As the majority of theme-work I do is CSS, this is very useful even if JS was limited...
Posted on 9/28/09 2:34 AM.
I've not tried it against the "Same Origin Policy", as we're actually using 2 domains for this - so not sure. Most of our JavaScript is all JSONP thus it gets around that limitation. If your'e working against a development portal. I would think you'd be okay to change settings in browsers and such to workaround those issues (being sure to change those back on a production environment).

Our team here has been extremely happy with this method - you can use tools like Dreamweaver to make CSS edits - and see your results without going through the deployment hassle. We can have 4-5 individuals making changes to different parts of the theme plugin without conflicting with each other until they commit on SVN.
Posted on 9/28/09 6:58 PM in reply to Olaf Kock.
In MS Windwos beware the Mozilla Firefox browser as the file:///.... url doesn't work there. It works ok with IE though.
Posted on 2/22/10 11:06 PM in reply to Jim Klo.
I can't get it to work with the 6.x release of Liferay. It's like the parent CSS files aren't getting loaded...it's just taking my custom.css as the only CSS files to be applied. Any suggestions? I know it's referencing my custom.css file because any changes I do make get applied immediately. It's just the origial base.css, forms.css, navigation.css, etc files don't seem to get loaded.
Posted on 6/24/10 2:48 AM.
Our shop can't get it to work either on 6.0. Sure could use an update on how to do this, if it is still possible..
Posted on 2/10/11 9:27 AM in reply to Aaron Harshbarger.
The only real criticism I've received from those who have been evaluating Liferay for general use at our company has been related to the fact that you have to continuously compile and deploy themes to test them whereas other products like Wordpress appear to cater for this via web user interface. So I would be very interested in hearing if this elegant solution to this "problem" can work in Liferay 6.x too
Posted on 12/11/11 9:23 AM in reply to James Collings.
Stian, for the redeployment issue, check out JRebel http://zeroturnaround.com/jrebel/using-jrebel-with-liferay-neil-griffins-approac­h/
Posted on 9/11/12 8:54 PM in reply to Stian Sigvartsen.