Requirements:

- Ant 1.8.1 (or the latest stable version)
http://apache.rediris.es/ant/binaries/apache-ant-1.8.1-bin.zip

-  SDK Plugins

http://downloads.sourceforge.net/lportal/liferay-plugins-sdk-5.2.3.zip

- Eclipse IDE for Java EE Developers
http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/heliosr

- Notepad ++ (or other text editor)

http://notepad-plus-plus.org/release/5.7

- Your CSS and HTML design

Unzip all the files in your HD. Remember the path in order to the next step.

We need to add a new user variable. Click on “Environment Variables” at “System Properties” section on “My Computer”. Click on “New” and add the variable with this values:

variable name: ANT_HOME
variable value: C:\ant
(you have to put your ant path here)

Fig. 1. Environment Variable "ANT_HOME"

Then, edit the system variable “Path” and add the new variable. Save all changes.

variable value: %ANT_HOME%\bin; (don’t delete the other values)

Create a “build.{your windows session name}.properties in yor sdk folder and paste in it your tomcat path:

app.server.dir=C:/liferay-portal-5.2.3/tomcat-6.0.18

Now execute your command window (run->cmd) and go to the “Themes” folder of  sdk plugins folder. Then create the theme:

create jarconnection “Jarconnection Theme”
(where jarconnection is the name of the theme and “Jarconnection Theme” is a description of it)

Fig. 2. Creating the theme files

If you look at the “Theme” folder, you’ll see a new folder with the name you gave to, followed by “-theme”.

Create the project in Eclipse. Go to “File”->”New”->”Other” and select “Java Project”. Then clic “Next”. Write out the project name and select “Create project from existing source”. Click on “Browse” and select your theme folder (in C:\liferay-plugins-sdk-5.2.3\themes\jarconnection-theme). Finally, click on “Finish”.

Fig. 3. Theme project in Eclipse

Delete “src” folder. Now go to the project and edit “build.xml” file and change the value of property “theme.parent” to “classic” instead of “_styled”. Drag “build.xml” file and drop it into “ant” window. Execute it (double click). You’ll see the theme structure in the package explorer window.

Fig.4. Theme structure

If you see “C:\sdk\dist”, there’ll be a war file (your war theme). If you execute liferay portal, you’ll see your theme is available (but now is a copy of classic theme).

It’s time to develope the theme. Create a folder named “templates” in “_diffs” folder. Then copy “portal_normal.vm” file in this folder and open it.

Note: “_diffs” folder lets you add and overwrite templates, images, javascript code, …

If you see the code, there’ll be HTML code and other tags. This is velocity code. Most of the code are velocity variables, defined on “init.vm” (you can find the file at “C:\liferay-portal-5.2.3\tomcat-6.0.18\webapps\ROOT\html\themes\_unstyled\templates”).

Paste your HTML design on “portal_normal.vm” file (on “_diffs” folder). Be carefull not to delete these variables, you have to place them in your HTML where they better fit.

Create a “css” folder in “_diffs” folder. Create a “custom.css” in it and your css design. Here you can overwrite css default styles of the theme. If you have images in your css design, create a “images” folder and paste it in “_diffs” folder. Create a new folder in it called “css” and paste your images. Remember to change the path in your css code. The new path will be:

background-image:url(../images/css/butllet.gif);

Fig. 5. _diffs folder structure

If you have to add a javascript file, create a folder in “_diffs” called “javascript” and paste your javascript file in it.

Now it’s time to build the theme. Execute build file on ant window and wait until appears “Build successful” on console window.

To set this theme, you have to login as an admin and go to “Manage pages” at dock menu. Click on “Look & feel” tab and select your theme. Click on “Return to Full Page” to see your Homepage with the new theme.

Fig. 6. Theme

Note: each time you modify anyhing of the theme, you’ll have to build the theme again and verify at the Tomcat console the theme is available for use.

Now you can modify and desing your theme.

You can download a pdf version here

After looking in several posts and blogs and aiming us to display them in the css file (why we would not do it?) I found an interesting post about Velocity objects.

And now the is an application:

<a href=”#”><img src=”$themeDisplay.getPathThemeImages()/theme/logo.gif” alt=”Logo”></a>

In the “Theme” scenario, we have the “$themeDisplay” variable. We can get the name of the css class, its folder path, the logo name, …

All these variables are in the “init.vm” file in :

{your root\liferay-portal-5.2.3\tomcat-6.0.18\webapps\ROOT\html\themes\_unstyled\templates

Velocity is a Java-based template engine.  As we use Velocity for web development, web designers can work in parallel with Java programmers to develop web sites according to the Model-View-Controller (MVC) model. That means that web page designers can focus wholly on creating a site with an awesome, and programmers can focus solely on writing code.
Velocity separates Java code from the web pages, making the web site more maintainable over its lifespan and providing a viable alternative to Java Server Pages (JSPs) or PHP .

But Velocity’s capabilities reach well beyond the realm of the web; for example, it can be used to generate SQL, PostScript and XML from templates. It can be used either as a standalone utility for generating source code and reports, or as an integrated component of other systems. For instance, Velocity provides template services for the Turbine web application framework, together resulting in a view engine facilitating development of web applications according to a true MVC model.

Here are some links:
Apache Velocity Project
Velocity on the Wikipedia