Need to change template styles in Liferay

Question

I want to change look and feel of liferay using css. i am very new to liferay. Can any give me any idea to do the changes. Thanks in advance

Answer 1

We've done a number of LifeRay customizations for various companies but your question is too vague for us to answer. If you are just looking to change a few colours and fonts then editing the CSS is fine, but if you are looking to completely change the layout then you need to delve in to the template files and start working with the XHTML.

Provide more details and we might be able to prod you in the right direction :D

Answer 2

You can make your custom style with the liferay plugins sdk, which can be found here: http://www.liferay.com/downloads/liferay-portal/additional-files

There is a themes folder included, in which you can create a new theme. Liferay generates here a basic theme as a boilerplate, which then you can customize and deploy to your liferay installation.

Answer 3

The step-by-step seems complicated, but it's not that bad .....

1a) download and unpack the plugins sdk for the version of liferay you want to use. All the downloads are on the sf page http://lportal.sourceforge.net/

1b) make sure you have the latest version of ant and the JDK version that matches your liferay version (1.5.x or 1.6.x)

2) there are a few main folders in the kit. Change into the "themes" folder and run the create script there in this format (on linux or mac you'll need to make the .sh files executable)

c:\liferay\plugins\themes >create my-name "My Theme Description" linux/mac $>./create.sh my-name "My Theme Description"

This will create a skeleton theme in a folder called my-name-theme and a folder within it called _diff.

Make whatever modifications you want WITHIN THE _diff FOLDER. (except changes to the properties file within WEB-INF)

Once you've made changes run "ant compile" from within the my-name-theme folder and the sdk will run through it's paces and spit out a .war file to the "dist" folder in the sdk root. You can upload this to the site using the plugin installer

OR ... if you configure the sdk to know where your development server is you can run "ant deploy" from the theme's folder and let the autodeploy magic in liferay do the work.

Once the theme is installed just assign it using the "look and feel" tab in the "manage pages" tool.

TIP : Make most of your changes to the custom.css file .... keeps things easy to upgrade.

TIP : Development is really slow for CSS if you do this for every change .... so if you're running a dev server add a style tag just before the end of the head tag that points into your _diffs/css folder. href="file:///...../_diffs/custom.css". This way whatever edits you make will be compiled into the next version of the war and will override the currently installed version without reuploading. make sure to remove the link before you put it on a live server.

The liferay.com documentation is great and there's a "themer's guide" i can't find the link to right now that got me started.