Liferay is a Gartner Magic Quadrant Leader for the Sixth Year! Find out why
« Back to Upgrade Instructions

Upgrade Themes from 5.2.x to 6.0.x

Alternative Languages: 日本語

Overview #

If you try to load your Liferay 5.2.x themes into 6.0, you'll find that a lot of things break. The reason for this is that with a new UI, we've changed a lot of ID tags and the like. There is a systematic process, however that allows you to convert your 5.2.x themes into 6.0.x compatible themes. It will take some CSS work, along with a few hours of your time.

The Theme Upgrade Process #

  1. Copy your theme's custom.css into custom.css.bak. This is very important because we will be overwriting your custom.css with a clean skeleton CSS file.
  2. Download custom.css. It's a specially commented and designed CSS file that gives exactly where each element of your old theme needs to go.
  3. Copy the new custom.css over your old custom.css. MAKE SURE YOU HAVE YOUR BACKUP (custom.css.bak) IN PLACE -- DO NOT OVERWRITE THAT!
  4. Copy each element's CSS from custom.css.bak into the appropriate places of your new custom.css -- there are code comments to help you know where to put each thing. You will see the broken theme improve incrementally as you copy more of your CSS over. You will probably need to make some tweaks here and there, but overall this process will be relatively mechanical.

At the end, your theme should be functional in 6.0 -- ultimately it's just a matter of changed ID tags and the like.

1 Attachment
55954 Views
Average (5 Votes)
The average rating is 4.0 stars out of 5.
Comments
Threaded Replies Author Date
This is a good start and it appears that my... Patrick Stackpoole July 20, 2010 11:54 AM
[url]http://www.liferay.com/community/wiki/-/wi... Samuel Liu July 27, 2010 12:03 PM
I copy the code you write to the file... Miller Huang August 11, 2010 12:37 AM
It wasn't even close! I found the few comments... Tom Thomas February 16, 2011 3:21 PM
I think it has many things to change, but here,... hongquan thuhuong January 3, 2012 8:00 PM
HI , the link for custom.css is broken. Can you... Pratik Garg July 10, 2012 11:36 PM

This is a good start and it appears that my theme plugin's style now appears as it did in 5.x.

Is there any information on manipulating the dock or exploiting its items? For users in 5.x I had plucked out the Add Application item and placed it as a single link on the top of the page while hiding or removing the dock itself.
Posted on 7/20/10 11:54 AM.
I copy the code you write to the file portal_normal.vm of my theme,but i click the link "Add Application" or "Layout Templates" ,No response
Posted on 8/11/10 12:37 AM in reply to Samuel Liu.
It wasn't even close! I found the few comments embedded in the file to be useless. The classic theme used to come with the previous SDK. Where can I get a copy that will work for Liferay 6.0 so I can at least have a frame of reference from which to start?
Posted on 2/16/11 3:21 PM.
I think it has many things to change, but here, you only say about css. beside that, it has template you have to change. Can you explain detail about this process?

thanks
Posted on 1/3/12 8:00 PM.
HI , the link for custom.css is broken. Can you please fix it.
Posted on 7/10/12 11:36 PM.