liferay theme tutorial

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.