How you will Create Your Own Theme
1. With Liferay IDE In Eclips
2. With Liferay Plugin
2. With Liferay Plugin
Creating theme from Liferay IDE In Eclips:
We need following resource for development of theme in liferay
Step 1:
We need following resource for development of theme in liferay
Step 1:
- liferay-plugins-sdk (Zip file)
- eclipse-jee (Zip file)
- 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/
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/
->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 Environment
Step 4:
go file menu->new->liferay Project ->
go file menu->new->liferay Project ->
Give theme Name (Example2 theme) ->tick radio button->
Note : Open build.xml file write classic in place of _Style
In the red circle there is docroot and under docroot there is following folder:
1._diffs
1. css
2. images
3. js
4. templetes
5. Web-INF
1. css
2. images
3. js
4. templetes
5. Web-INF
=> coppy css, images, js, templetes and pest these four folder into _diff folder
=> expend _diffs =>expend css folder =>IT look like this
- Application.css
- Forms.css
- Base.css
- Layout.css
- Custom.css
- Main.css
- Custom_common.css
- Navigation.css
- Dockbar.css
- Portlet.css
=> go to the custom.css and OPEN it
Note:
You showld change anything in custom.css file
You showld change anything 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
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
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;}
/*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;}
#para1 {text-align:center;color:red;}
class Selector Example
.center {text-align:center;}
p.center {text- align:center;}
3. Velocity
- Velocity Language consists 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.
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.]
#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!”.
<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 *#
## 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"] )
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
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
#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.
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
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” )
#include( “snippet.html” )
parse directive.
#parse (“navigation.vm”)
#parse (“navigation.vm”)
stop directive
#stop
======================
$theme_display
The theme display object
$portlet_display
The portlet display object
$css_class
The css class specified for the "color scheme" in the liferay-look-and-feel.xml
$css_folder
The absolute path to the css directory
$images_folder
The absolute path to the images directory
$javascript_folder
The absolute path to the javascript directory
$templates_folder
The absolute path to the templates directory
$full_css_path
The absolute path to the css directory
$full_templates_path
The absolute path to the templates directory
$css_main_file
The absolute path to the css/main.css file
$js_main_file
The absolute path to the javascript/javascript.js file
Company specific variablesShow
$company_id
The company id (specified in Admin Portlet > Settings)
$company_name
The name of the company (specified in Admin Portlet > Settings)
$company_logo
The absolute path to the image of the company logo (specified in Admin Portlet > Settings)
$company_url
The URL of the company (specified in the Admin Portlet > Settings)
User specific variablesShow
$user_greeting
The greeting that the user get's upon page visit (specfied in My Account or Admin > Users)
$user_email_address
The user's email address (specfied in My Account or Admin > Users)
$user_id
The user's id (set in My Account)
$language_id
The ID of the user's language (specfied in My Account or Admin > Users)
$time_zone
The users's time zone (specfied in My Account)
$user_comments
The comments related to the user (specfied in My Account or Admin > Users)
$user_login_ip
The IP address that the user is currently logged on from
$user_last_login_ip
The last IP address the user logged on from
$is_default_user
A boolean that specifies if the current user is the default one
$user_location
The user's location
$user_organization
The user's organization
$user_group
The group that the user belongs to
$user_birthday
The user's birthday
$is_male
A boolean that specifies if the user is male
$is_female
A boolean that specifies if the user is female
$user_name
The user's full name
$user_first_name
The user's first name
$user_middle_name
The user's middle name (if any)
$user_last_name
The user's last name
Dock specific variablesShow
$show_add_content
Boolean set to specify that the add content link can be displayed
$add_content_text
The text that gets displayed if the add content link is enabled
$add_content_url
The url where the add content link points to
$layout_text
The text to be displayed for the "Change Layout" link
$layout_url
The url where the "Change Layout" link points to
$show_home
Boolean set to specify that the "Home" link can be displayed
$home_text
The text to be displayed for the "Home" link
$home_url
The url where the "Home" link points to
$show_my_account
Boolean set to specify that the "My Account" link can be displayed
$my_account_text
The text to be displayed for the "My Account" link
$my_account_url
The url where the "My Account" link points to
$show_page_settings
Boolean set to specify that the "Page Settings" link can be displayed
$page_settings_text
The text to be displayed for the "Page Settings" link
$page_settings_url
The url where the "Page Settings" link points to
$show_sign_in
Boolean set to specify that the "Sign In" link can be displayed
$sign_in_text
The text to be displayed for the "Sign In" link
$sign_in_url
The url where the "Sign In" link points to
$show_sign_out
Boolean set to specify that the "Sign Out" link can be displayed
$sign_out_text
The text to be displayed for the "Sign Out" link
$sign_out_url
The url where the "Sign Out" link points to
Page specific variablesShow
$selectable
A boolean set that specifies whether a page is "selectable", meaning is it part of the navigation
$page
The current page/layout object
$the_title
The current title of the page
Navigation specific variablesShow
$nav_items
An object that contains all of the pages that are part of the navigation. To set the styling for each navigation item, you must loop through the $nav_items object with a #foreach.
$has_navigation
A boolean set to whether or not there are any pages in the $nav_items object
These methods exist on each sub-object eg. when you're looping through the $nav_items object, you would do $foreach ($nav_item in $nav_items) and you would call $nav_item.METHOD_NAME()
isSelected()
This returns a boolean that indicates whether a navigation item is currently selected.
getURL()
This returns a string that contains the navigation item's URL.
getTarget()
This returns a string that contains the navigation item's target (as defined in the Page Settings).
getName()
This returns a string that contains the navigation item's page name.
hasChildren()
This returns a boolean that indicates whether a navigation item has children.
getChildren()
This returns an object that is has the same methods and variables as the $nav_items object, but contains the current navigation item's children pages.
#stop
======================
Liferay 6 theme variables.
## ———- Common variables ———- ##
$theme_display
$portlet_display
$theme_timestamp
$theme_settings
$css_class
$layout
$page_group
$liferay_toggle_controls
$liferay_dockbar_pinned
$css_folder
$images_folder
$javascript_folder
$templates_folder
$full_css_path
$full_templates_path
$css_main_file
$js_main_file
$company_id
$company_name
$company_logo
$company_logo_height
$company_logo_width
$company_url
$portlet_display
$theme_timestamp
$theme_settings
$css_class
$layout
$page_group
$liferay_toggle_controls
$liferay_dockbar_pinned
$css_folder
$images_folder
$javascript_folder
$templates_folder
$full_css_path
$full_templates_path
$css_main_file
$js_main_file
$company_id
$company_name
$company_logo
$company_logo_height
$company_logo_width
$company_url
$user_id
$is_default_user
$user_first_name
$user_middle_name
$user_last_name
$user_name
$is_male
$is_female
$user_birthday
$user_email_address
$language_id
$w3c_language_id
$time_zone
$user_greeting
$user_comments
$user_login_ip
$user_last_login_ip
$is_signed_in
$group_id
$is_default_user
$user_first_name
$user_middle_name
$user_last_name
$user_name
$is_male
$is_female
$user_birthday
$user_email_address
$language_id
$w3c_language_id
$time_zone
$user_greeting
$user_comments
$user_login_ip
$user_last_login_ip
$is_signed_in
$group_id
## ———- URLs ———- ##
$show_add_content
$add_content_text
$add_content_url
$layout_text
$layout_url
$show_control_panel
$control_panel_text
$control_panel_url
$show_home
$home_text
$home_url
$show_my_account
$my_account_text
$my_account_url
$show_page_settings
$page_settings_text
$page_settings_url
$show_sign_in
$sign_in_text
$sign_in_url
$show_sign_out
$sign_out_text
$sign_out_url
$show_toggle_controls
$toggle_controls_text
$toggle_controls_url
$update_available_url
$show_add_content
$add_content_text
$add_content_url
$layout_text
$layout_url
$show_control_panel
$control_panel_text
$control_panel_url
$show_home
$home_text
$home_url
$show_my_account
$my_account_text
$my_account_url
$show_page_settings
$page_settings_text
$page_settings_url
$show_sign_in
$sign_in_text
$sign_in_url
$show_sign_out
$sign_out_text
$sign_out_url
$show_toggle_controls
$toggle_controls_text
$toggle_controls_url
$update_available_url
## ———- Page ———- ##
$the_title
$selectable
$is_maximized
$is_freeform
$selectable
$is_maximized
$is_freeform
$page_javascript_1
$page_javascript_2
$page_javascript_3
$layout
$page = $layout
$is_first_child
$is_first_parent
$the_title
$is_portlet_page
$page_javascript_2
$page_javascript_3
$layout
$page = $layout
$is_first_child
$is_first_parent
$the_title
$is_portlet_page
$all_portlets
$column_1_portlets
$column_2_portlets
$column_3_portlets
$column_4_portlets
$column_5_portlets
$maximized_portlet_id
$typeSettingsProperties
$page_javascript_1
$page_javascript_2
$page_javascript_3
$community_name
$css_class
$my_places_portlet_url
$community_default_public_url
$community_default_private_url
$community_default_url
$the_title
$layouts
$pages
$column_1_portlets
$column_2_portlets
$column_3_portlets
$column_4_portlets
$column_5_portlets
$maximized_portlet_id
$typeSettingsProperties
$page_javascript_1
$page_javascript_2
$page_javascript_3
$community_name
$css_class
$my_places_portlet_url
$community_default_public_url
$community_default_private_url
$community_default_url
$the_title
$layouts
$pages
## ———- Navigation ———- ##
$nav_items
$has_navigation
$nav_items
$has_navigation
## ———- Staging ———- ##
$show_staging
$staging_text
## ———- My places ———- ##
$show_my_places
$my_places_text
$show_staging
$staging_text
## ———- My places ———- ##
$show_my_places
$my_places_text
## ———- Includes ———- ##
$dir_include
$bottom_include
$bottom_ext_include
$content_include
$top_head_include
$top_messages_include
$dir_include
$bottom_include
$bottom_ext_include
$content_include
$top_head_include
$top_messages_include
## ———- Date ———- ##
$date
$current_time
$the_year
$theme_display
The theme display object
$portlet_display
The portlet display object
$css_class
The css class specified for the "color scheme" in the liferay-look-and-feel.xml
$css_folder
The absolute path to the css directory
$images_folder
The absolute path to the images directory
$javascript_folder
The absolute path to the javascript directory
$templates_folder
The absolute path to the templates directory
$full_css_path
The absolute path to the css directory
$full_templates_path
The absolute path to the templates directory
$css_main_file
The absolute path to the css/main.css file
$js_main_file
The absolute path to the javascript/javascript.js file
Company specific variablesShow
$company_id
The company id (specified in Admin Portlet > Settings)
$company_name
The name of the company (specified in Admin Portlet > Settings)
$company_logo
The absolute path to the image of the company logo (specified in Admin Portlet > Settings)
$company_url
The URL of the company (specified in the Admin Portlet > Settings)
User specific variablesShow
$user_greeting
The greeting that the user get's upon page visit (specfied in My Account or Admin > Users)
$user_email_address
The user's email address (specfied in My Account or Admin > Users)
$user_id
The user's id (set in My Account)
$language_id
The ID of the user's language (specfied in My Account or Admin > Users)
$time_zone
The users's time zone (specfied in My Account)
$user_comments
The comments related to the user (specfied in My Account or Admin > Users)
$user_login_ip
The IP address that the user is currently logged on from
$user_last_login_ip
The last IP address the user logged on from
$is_default_user
A boolean that specifies if the current user is the default one
$user_location
The user's location
$user_organization
The user's organization
$user_group
The group that the user belongs to
$user_birthday
The user's birthday
$is_male
A boolean that specifies if the user is male
$is_female
A boolean that specifies if the user is female
$user_name
The user's full name
$user_first_name
The user's first name
$user_middle_name
The user's middle name (if any)
$user_last_name
The user's last name
Dock specific variablesShow
$show_add_content
Boolean set to specify that the add content link can be displayed
$add_content_text
The text that gets displayed if the add content link is enabled
$add_content_url
The url where the add content link points to
$layout_text
The text to be displayed for the "Change Layout" link
$layout_url
The url where the "Change Layout" link points to
$show_home
Boolean set to specify that the "Home" link can be displayed
$home_text
The text to be displayed for the "Home" link
$home_url
The url where the "Home" link points to
$show_my_account
Boolean set to specify that the "My Account" link can be displayed
$my_account_text
The text to be displayed for the "My Account" link
$my_account_url
The url where the "My Account" link points to
$show_page_settings
Boolean set to specify that the "Page Settings" link can be displayed
$page_settings_text
The text to be displayed for the "Page Settings" link
$page_settings_url
The url where the "Page Settings" link points to
$show_sign_in
Boolean set to specify that the "Sign In" link can be displayed
$sign_in_text
The text to be displayed for the "Sign In" link
$sign_in_url
The url where the "Sign In" link points to
$show_sign_out
Boolean set to specify that the "Sign Out" link can be displayed
$sign_out_text
The text to be displayed for the "Sign Out" link
$sign_out_url
The url where the "Sign Out" link points to
Page specific variablesShow
$selectable
A boolean set that specifies whether a page is "selectable", meaning is it part of the navigation
$page
The current page/layout object
$the_title
The current title of the page
Navigation specific variablesShow
$nav_items
An object that contains all of the pages that are part of the navigation. To set the styling for each navigation item, you must loop through the $nav_items object with a #foreach.
$has_navigation
A boolean set to whether or not there are any pages in the $nav_items object
These methods exist on each sub-object eg. when you're looping through the $nav_items object, you would do $foreach ($nav_item in $nav_items) and you would call $nav_item.METHOD_NAME()
isSelected()
This returns a boolean that indicates whether a navigation item is currently selected.
getURL()
This returns a string that contains the navigation item's URL.
getTarget()
This returns a string that contains the navigation item's target (as defined in the Page Settings).
getName()
This returns a string that contains the navigation item's page name.
hasChildren()
This returns a boolean that indicates whether a navigation item has children.
getChildren()
This returns an object that is has the same methods and variables as the $nav_items object, but contains the current navigation item's children pages.
No comments:
Post a Comment