How You will Create Your Own Theme
With Liferay IDE In EclipsWith Liferay Plugin
Creating theme from Liferay IDE In Eclips:
We need follwing resource for development of theme in liferay
Step 1:
1.liferay-plugins-sdk (Zip file)
2.eclipse-jee (Zip file)
3.liferay-portal-tomcat (Zip file)
Extract these file in the same folder
Step 2:
Open Eclips and go to the Help menu single click on it ->Install new software ->click on it a new window will be open In the drop down pest http://releases.liferay.com/tools/ide/eclipse/helios/stable/
(For IDE)
->select all -> next-> finish
Step 3:
Go to the Window menu ->click on it ->go preferences->Liferay->click on it and go to the Installed Plugin SDK-> click on it ->add->browse-> select Plugin SDK folder which you have extract in folder ->tick check box ->ok
same way go to server click on it and set runtime Enviroment
step 4:
go file menu->new->liferay Project ->
Give theme Name(Example2 theme) ->tick radio button->ok
Note : Open build.xml file wirte classic in place of _Style
In the red circle there is docroot and under docroot there is following folder :
1._diffs
2 .css
3 .images
4. js
5 .templetes
=> coppy css, images, js, templetes and pest these four folder into _diff folder
=> expend _diffs =>expend css folder =>IT look like this
1.Application.css
2.Forms.css
3.Base.css
4.Layout.css
5.Custom.css
6.Main.css
7.Custom_common.css
8.Navigation.css
9.Dockbar.css
10.Portlet.css
=> go to the custom.css and OPEN it
Note:
you showld change any thing in custom.css file
What is CSS?
Styles define how to display HTML elements
External Style Sheets can save a lot of work like Make a global change ,More flexibility ,Change the appearance and layout of all the pages
selector Value Properties
h1 {color : red font-size: 10px;}
Properties Value
A CSS comment begins with "/*", and ends with "*/", like this
/*This is a comment*/p{text-align:center;
/*This is another comment*/color:black;font-family:arial;}
id Selector Example
#para1{text-align:center;color:red;}
class Selector Example
.center {text-align:center;}
p.center {text- align:center;}
3.Velocity
Velocity Language consist of.......
Java-based template engine
` Open source software project
Reference objects defined in java code
Control statements
Arbitrary java methods
Java code cannot be embedded in pages
And here is it application :
a.Web applications.
b.Source code generation.
c.Automatic emails.
d.XML transformation.
Example:
#set( $z = "Velocity" )
Here : References begin with $ to get something. Directives begin with # to do something.]
here is examole of Hello attuneinfocom world
<html>
<body>
#set( $foo = "Attuneinfocom" )
Hello $foo World!
</body>
</html>
The result is a web page that prints "Hello Attuneinfocom World!".
Coment in velocity
## This is a single line comment
#*
Thus begins a multi-line comment
*#
#** This is a VTL comment block *#
Types of references in the VTL:
Variables Examples: $foo , $mudSlinger, $mud-slinger, $mud_slinger
Properties
Example : $customer.Address, $purchase.Total
Methods Example: $purchase.getTotal(),
$page.setTitle( "My Home Page" ), $person.setAttributes( ["Strage","Weid“, “Excited"] )
Logical Pration
ogical AND
#if( $foo && $bar )
<strong> This AND that</strong>
#end
logical OR
#if( $foo || $bar )
<strong>This OR That</strong>
#end
logical NOT
#if( !$foo )
<strong>NOT that</strong>
#end
Velocity templates default files
init_custom.vm: This file allows you to override and define new velocity variables.You can initialize custom Velocity variables in this template. You can also set values to the existing variables to override their existing values. The variables defined here can be referenced in the other four templates.
navigation.vm: This file is called by portal_normal.vm and provides the HTML to make the navigation menus
portal_normal.vm: This file controls the basic skeleton HTML of the page that Liferay will serve.
portal_pop_up.vm: This file controls the layout of portal templates for pop-up notifications.
portlet.vm: This file wraps the content of every portlet.
Note : If you want to change any thing in your css you should only use portal_nomal.vm file
How to give directives :
include directive
#include( "snippet.html" )
parse directive.
#parse ("navigation.vm")
stop directive
#stop
No comments:
Post a Comment