hwo to create liferay theme

Liferay theme development tutorial

In this tutorial we will cover the essential files and code needed to create a basic liferay theme.

1. CSS
2. HTML
3. Velocity
4. Java script
5. Jquery
6. Alloy

1. CSS
CSS stands for (Cascading style sheet)
Styles define how to display HTML elements on page

Why CSS is Used in Liferay theme?

Css is used to give good formatting and style for text
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Make a global change
More flexibility
Change the appearance and layout of all the pages

2. HTML in Liferay theme
HTML is simple but use to giving structure of template for the theme
Using Html we make table in template HTML is used only developed Static page

3. Velocity liferay theme

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.

4. Java Script in liferay theme

JavaScript is important to provide functionality of event that means using java script we can create input box, button, list box drop down etc
The Main use of JavaScript in theme is:
1. Functionality
2. Validate forms
3. Communicate with the serve
5. Jquery used in liferay theme

Query is a library of JavaScript Functions.

jQuery is a lightweight "write less, do more" JavaScript library.

The jQuery library contains the following features:

• HTML element selections
• HTML element manipulation
• CSS manipulation
• HTML event functions
• JavaScript Effects and animations
• HTML DOM traversal and modification
• AJAX
• Utilities
6. Alloy in liferay theme
• Is Liferay's open-source JavaScript library.
• It is a JavaScript library,
• CSS framework,
• set of HTML recipes and a taglib library.
Important of Alloy:
Simple code for professional UI
Custom form tags
Classes are available for Alloy Modules
Improve coding efficiency
Browser compatibility

Structure of liferay theme

2. Creating liferay theme from Plug-in
Open command prompt and write


Create "“

For More Liferay Tutorial : Liferay Theme Development Training