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

IMO theme development for liferay can be quite slow to start with. I have found two different approach quite useful. It works for me, might work for you as well.

1. If you edit files inside _diff folder AFAIK you have to deploy every time two see the changes , which can be quite frustrating for front-end developers. An approch can be edit the css file directly in tomcat/themename folder. Copy the changed every couple of hours or so in the _diff folder and deploy. In my case the CSS stays in C:\liferay-portal-6.1.0\tomcat-7.0.23\webapps\\css\
2. Also if you are aware liferay supports Sass now. So it you are writing Sass "deploy" may be you most likely option. But I have also figured out a way to speed up that process. Install ruby (if you are in windows, in Mac its preinstalled) > Install Compass > and create a blank compass project. Start "compass watch" . Open bothe scss file and the compiled css file in your IDE. "compass watch" will poll for changes in your scss file and put the compiled output in the css file. Every while you may copy the css output in the css file in theme folder or directly in firebug or web-inspector in chrome/safari.

I have found these are faster dev practice than deploying everytime or completely developing on firebug/web-inspector.

Also if anyone know of better method, specially things like only CSS/JS deploy (or simple copy for that matter if one is not writing Scss), please let us know.

Answer 2

You can

mvn archetype:generate

then select “liferay-theme-archetype (Provides an archetype to create Liferay themes.)” et voilà you are ready tu customize your theme.

Best practice recommends that you make all your custom themes using only the custom.css file, and that you not override any of the templates unless absolutely necessary. This will make future upgrades far easier, as you won't have to manually modify your templates to add support for new Liferay features.

Deploy the newly created theme using

mvn clean package liferay:deploy

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.

Answer 4

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 5

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