CSS to Liferay theme

Question

I have a css web design and I want to converted in Liferay theme. Is this possible?

I am using Liferay 6.1 Ga2 with Tomcat 7 and Liferay SDK for java.

Any advice will be appreciated!

Thanks in advance

Answer 1

If you have css designs then you can use it in your theme. But make sure that if you are using any liferay OOB portlets then you have to customize those OOB portlets CSS as well.

afaik,Direct conversion of css designs into liferay css structure is not possible.

Answer 2

From someone who has a background as a Web Designer who learned Liferay. You need to extend the basic theme and start customizing it. You do this by creating a theme through the liferay SDK. Then it copies all the files into /docroot/diffs/*

In there you will see a css folder, in there you will see a custom.css file, That is the file you want to add your css properties to. It has highest/last priority to set elements and attributes.

If you want to customize the template engine, you need to look at the velocity templates under /docroot/diffs/templates. If you're new to it, make a copy of the file you're playing with so you don't have to blow it all away and start over if you mess up. But basically Velocity is very easy to learn. If you want to embed images directly in velocity from liferay via your theme via the /docroot/diffs/images/custom/ folder, here is a piece of code that will work.

<img src="$themeDisplay.getPathThemeImages()/custom/image_name.png" id="logo" />

Answer 3

I recommend though to keep the portal_normal.vm as similar to the default portal_normal.vm because then upgrading will be easier down the road.