Creating a new Theme

In the $PLUGINS_SDK/themes folder run:

ant -Dtheme.name=newtheme -Dtheme.display.name="My New Theme" create

"newtheme" will be the theme name we would like to give.

"My New Theme" will the display name of our theme.

Navigate to the newly created $PLUGINS_SDK/themes/newtheme/_diffs and add some customizations to the default theme.

After this, In the $PLUGINS_SDK/themes folder run:

ant war

The war file of our theme will be created in the $PLUGINS_SDK/themes/dist .

Now deploy this war file.

You can go to your deploy (webapps) directory and see the new theme folder being created there.

Once your theme has been deployed, and you're ready to modify the CSS, use the custom.css file to change and override the default styling, leaving all of the other CSS files alone. You can modify any of the javascript files, image files, and template files, but the CSS changes should be restricted to custom.css.

Once you're done modifying your files, you must place them in your _diffs directory with the same directory structure as the actual theme.we'll assume that you've modified the custom.css file, an image file in the dock, and two template

files: portal_normal.vm and portlet.vm. With those files, your _diffs directory would look like this:

plugins/themes/newtheme/

_diffs/

css/

custom.css

images/

dock/

menu_bar.png

templates/

portal_normal.vm

portlet.vm

The order in which your theme is built goes something like this:

It creates the directory and adds the appropriate build files, and XML files needed. It then copies all of the files from the _unstyled/ directory, and after that, the files from _styled/ are copied over, and the last step is that your files in the _diffs directory are copied over. So this means you will place all of your new files and changed files into the _diffs directory.

Color Schemes

In your liferay-look-and-feel.xml (located in WEB-INF), you would specify the class names like so:

<theme id="my_theme" name="My Theme">

<root-path>/my_theme</root-path>

<templates-path>${root-path}/templates</templates-path>

<images-path>${root-path}/images</images-path>

<template-extension>vm</template-extension>

<color-scheme id="01" name="Blue">

<css-class>blue</css-class>

<color-scheme-images-path>${images-path}/color_schemes/${css-class}</color-scheme-images-path>

</color-scheme>

<color-scheme id="02" name="Green">

<css-class>green</css-class>

</color-scheme>

</theme>

The way you would style your different color schemes is like so:

Inside of your css directory, create a folder called "color_schemes". Inside of that directory, place a css file for each of your color schemes. In the case above, we would could either have just one called green.css and let the default styling handle the first color scheme, or you could have both blue.css and green.css.

Now, inside of your custom.css, you would place the following lines:

@import url(color_schemes/blue.css);

@import url(color_schemes/green.css);

The way you would identify the styling for the css is this way: In blue.css you would prefix all of your css styles like this:

.blue a {color: #06C;}

.blue h1 {border-bottom: 1px solid #06C}


And in green.css you would prefix all of your css styles like this:

.green a {color: #0C6;}

.green h1 {border-bottom: 1px solid #0C6}


Customization of CSS

Here are the descriptions for each of the CSS files:


main.css

this file includes all of the other css files. This file can be edited, but probably should not be.

custom.css

This file is where the developer should place all of their css that is different from the other files, unless they are not concerned about upgrading their theme later on. By placing their custom CSS in this file, and not touching the other files, they can be assured that the upgrading of their theme later on will be much smoother.

base.css

This file contains all of the base styling that is fairly generic, such as the styling for all elements not directly related to another aspect of the site, such as the forms or navigation or dock.

forms.css

This file contains all css styling related to form elements on the page.

layout.css

This file contains all of the styling related to the layouts. It is fairly low level, and should most likely not be edited, unless there is something specific they need.

navigation.css

This file contains all of the styling related to the navigation, as well as the dock.

portlet.css

This file contains all of the styling related to the portlets, including the JSR-168 class-names.

tabs.css

This file includes all of the styling related to the tabs in the portlets.

deprecated.css

This file contains styles that are deprecated, but included for compatibility. It can most likely be safely ignored.

Use the custom.css file to change and override the default styling, leaving all of the other CSS files alone. You can modify any of the javascript files, image files, and template files, but the CSS changes should be restricted to custom.css.

For example the body background color is defined in base.css as follows:

body {



background-color: #fff;



}

in the above example the background color used is white ,and if would like to change the color to say black then write the below css in custom.css:

body {



background-color: #000;

}

Similarly we can change the default css by rewriting them in custom.css

Templates:

Here are the descriptions for each of the templates:

portal_normal.vm

this file contains the overall site structure, from opening HTML tag to closing. It includes the header, and footer, and includes the two templates (i.e., dock.vm and navigation.vm) and it also includes the system files needed by the liferay core

dock.vm

this file contains all of the HTML for the dock.

navigation.vm

this file contains all of the html for the navigation

portal_pop_up.vm

this file contains the entire html structure for popup windows.

portlet.vm

this file contains the HTML that wraps every portlet, including the portlet title and portlet-icons.

Customization of templates:

Example portal_normal.vm

If we want the dock to appear only when the user is signed in then the following changes have to be made in portal_normal.vm

Replace the following code

#parse ("$full_templates_path/dock.vm")



with

#if ($themeDisplay.isSignedIn())




#parse ("$full_templates_path/dock.vm")




#end