liferay theme development tutorial :
how to create liferay portal theme
Liferay Theme is use to change liferay website look.
Description:
1>Create Theme
Using eclips, Theme is very easy to create see below
file->new->Liferay project
When u select liferay project then display a window in which give name of project.
After that click “Next” button,see after click “next” button there is there some option
like
1>portlet
2>Ext
3>hook
4>theme
5> layout
We select theme option then click “Finish” button to create theme.
2> Anatomy of theme:
/deep-blue-theme/
/docroot/
/WEB-INF/
liferay-plugin-package.properties
/_diffs/ (subfolders not created by default)
/css/
/images/
/js/
/templates/
/css/
application.css
base.css
custom.css
dockbar.css
extras.css
forms.css
layout.css
main.css
navigation.css
portlet.css
/images/
(many directories)
/js/
main.js
/templates/
init_custom.vm
navigation.vm
portal_normal.vm
portal_pop_up.vm
3>Customize theme:
To devlope easy way to use this trick.
In our theme has buil.xml file,to edit file.In editing just replace “_style” word with “classic” word. Then deploy theme, then u see that many folders r ctreated in theme. They all are “classic”
theme folder. When deploye theme “built.xml” file copy classic theme from liferay tomcat and past in our theme.
Now, theme has for five folders
1>_diffs
2>css
3>templet
4>images
5>JS
4>CSS in theme:
We use to css file to make attractive web look.
Now,In CSS folder has many diffrent css file for diffrent web part, such that NAVIGATION part has navigation.css file and so on.
But we are not use every css file,only use custom.css file for modify theme. Custom.css file is load after all .css file are loaded.So that Custom.css file is override attributes which are define in another .css file.
It important to kwonlege of css and html tag,attributes and so on.
4.1>Some Useful css attribute
1>Backgroung image
->We r set two images in background at diffrent position,use below command.
background: url("../images/pimage/a.jpg") no-repeat right top
,url("../images/pimage/about_line.jpg") no-repeat left bottom;
->use WIDTH attributes which increase distance between “right top” and
“left bottom” images.
2>Border
->For border style,use BORDER attributes in css class.
->BORDER has three attributes type
1>border-width:In pixel.
2>border-style:give diffrent border like solid,doted and so more.
3>border-color:give color we assing.
->give three attribute in single line use below syntex
border:width type color;
3>Border-radius
->It is give curve to rectangle border.
->Synrex:-> border-radius:20px;
->Diffrent Browser has diffrent border-radius attribute,for example mozile firefox
use -mz-border-radious.
4>Border-shadow
->give shadow effect to border with diffrent color
->Syntex:
effect of
darkness
|
\/
border-shadow:10px 15px 5px red <-- color of shadow
/\ /\
| |
move to move to
right bottom
Now,to make horizontal navigtion menu using css,use below attributes
Making horizontal menu we use <ul>
<li> <a>Menu name </a></li>
<li><a>Menu name </a></li>
. . . . .
. . . . .
</ul>
Above code give vertical menu, for horizontal menu give below style.
5>List-style
->This attributes give <ul></ul> tag.
-><ul> tag display circle,square,upper-roman and lower-roman,but these r not use in menu. So use below syntex:
List-style-type : none
->LIST-STYLE has three attributes
1>list-style-type
2>list-style-position : inside,outide
3>list-style-image : url(“”)
->Above code is assing in single line
Syntex:
list-style : type image-url position
6>Display
->Display attribute use in <li> </li> tag, this attribute has diffrent values.
->We use “INLINE” value which display elemaent in horizontal which is required fer horizontal menu.
->Other use is DISPLAY attributes we hide element.It defined by NONE value.
->Syntex:
display : none ; <---value
display : inline;
There are many css attributes for creating theme, some css attributes r below.
7>Mergine
->It is use to make gap between two border
->It is out side of border
8>Padding
->It is use to make gap between border and element(context)
->Is is inside of border
9>Pointer
->To change mouse curser image
10>Visibility
->Hidden value is hide data but it make gap for data.
->Compare with Display : none
-> 'Display : none ' not make gap for data.