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 CSSHere are the descriptions for each of the CSS files:
main.cssthis file includes all of the other css files. This file can be edited, but probably should not be.
custom.cssThis 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.cssThis 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.cssThis file contains all css styling related to form elements on the page.
layout.cssThis 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.cssThis file contains all of the styling related to the navigation, as well as the dock.
portlet.cssThis file contains all of the styling related to the portlets, including the JSR-168 class-names.
tabs.cssThis file includes all of the styling related to the tabs in the portlets.
deprecated.cssThis 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.vmthis 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.vmthis file contains all of the HTML for the dock.
navigation.vmthis file contains all of the html for the navigation
portal_pop_up.vmthis file contains the entire html structure for popup windows.
portlet.vmthis file contains the HTML that wraps every portlet, including the portlet title and portlet-icons.
Customization of templates:Example portal_normal.vmIf 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