Liferay themes are the one of Liferay plugin to change look
and feel of the Liferay portal.
Liferay have provided theme mechanism so that we can apply
different look and feel to portal and it’s very easy to develop Liferay themes
and we can change look and feel of portals.
Liferay themes are working like independent application that
is called plugin in Liferay terminology.
Liferay Portal already implemented some of default themes it
will part of Liferay portal application and these themes have basic look and
feel.
When we start to develop Liferay themes instead of starting
from scratch we will inherited these basic theme into our newly developed themes
so that we will change some CSS and some of templates files as for our requirement
so that finally we can give new look and feel to the portals.
The following theme Hierarchy of Thames in Liferay Portal
The above themes are reside in in Liferay portal so that
when we come from top to bottom in each theme Liferay added new styles so that
finally it made good look and feel to the portal.
Liferay Portal use Classic theme is default theme so that
when we install Liferay portal the portal look and feel is from classic theme.
The above specified themes are resided in the Liferay portal
application which is in themes directory of porta (\tomcat-7.0.42\webapps\ROOT\html\themes)
The following is
General Overview of Liferay Themes
Generally when we change the look and feel of application we
need to use css, java scripts and templates. Same way Liferay themes consist of
all files that are css, java script and templates.
CSS files used to apply look and feel related things like
colors, font size, padding, margin and backgrounds to the pages.
Java Script is used to do some actions and some dynamically
changes elements in the pages like when we click on button we want open popup,
when we click on some text then some animated images need to show such a we
will use java script.
Templates are used to design page structure like body section,
header section, left menu and right menu such way we will use templates to
design structures to the page.
Images are used to make user friendly understand in the pages
like some of slide shows, some background for pages.
Generally when we start new theme we will use existed theme
files then we will override as for our needs. To make original files safe
Liferay have created new directory called _diff there we will maintain same
files and folder structure that we can see in original theme.
So all modifications is take place in the _diff
directory files so that at the time of deployment original files will be
overridden by the _diff directory files so that new changes will be applied.
From source side it’s separated as original files, directory
and also we have _diff but after packaging or deployment the original files
reflected by new changes that we already made in the _diff. finally all
together become as theme with original directory structure.
Liferay Portal Theme CSS files
The following is
CSS files we will use to change the styles
Instead of writing CSS styles in each file Liferay have
given one file called custom.css there we can write all
new CSS styles so that it will be applied.
Liferay had made all portal with predefined CSS class names
and ID for html elements. Whenever we are going to change the CSS properties we
need identify the appropriate CSS class name and ID then we needs to write new
CSS styles in custom.css file.
To know CSS class name for portal we can use browser inspect
element feature so that we can identify the CSS class names and its CSS
properties.
Liferay Portal Theme Template files
Liferay have used template implementation to aggregate dynamic
content and to made portal structure as one page for this Liferay used Velocity
Templates and Free Marker Templates.
When we develop custom theme we can use any one and that is
based on our convenient. Before Liferay 6.2 we have only velocity templates and
from Liferay 6.2 version we have another choice is free market templates while
develop our custom themes.
portal_noraml.vm/portal_noraml.ftl:
We have many template files all files are included in portal_noraml.vm/
portal_noraml.ftl and this will aggregate all content and make
it as page.
navigation.vm/ navigation.ftl:
This file Liferay pages navigation is implemented.
portlet.vm/ portlet.ftl:
This is for aggregate Portlet content and added to main
page.
init.vm/ init.ftl:
This file consist all
requited velocity variables and free marker variable that we will use in them
get dynamic content like sign in user name and id like that.
The following is Templates files we will use to change page
structure
main.js:
Theme related java script we will write in the main.js file
this will be available in /js/main.js location.main.js java
script is loaded at the time of page loading so we can write any java script
that will be loaded at the time of page load.
Images:
We have images directory in theme to store all images
related to theme and Liferay already used many images so this will be inherited
from parent theme to our custom theme. Whenever we need new images we simply
place in the images directory.
The following screen shows image directories which contain
many sub directories inside they have images.
Posts
0 comments :
Post a Comment