Tuesday, 2 July 2013

how to create Responsive theme in liferay ?

Hi Friend ,

Step By Step I will Explain to create responsive theme in liferay.

  create New liferay Project In eclipse.click on liferay IDE Icon & select  "New Lifray Project".

 Then select Give Project name & at last select "Theme" option.

Now You get below package structure .





Now explore docroot folder then you get sub folder like css,image,js,template etc..

For customization, we need to copy css, js, images and template folder into “_diffs” folder. Now your theme folder structure is look like below image.
For Responsive theme liferay provide AUI view port functionality,so you have to update main.js
under _diffs/js folder.

Write one line in ready function

AUI().use('aui-viewport');

For Example

AUI().ready(
function() {
AUI().use('aui-viewport');
}
);

Then You deploy your them through ant .

Now question rise how to check we are implement is right or wrong.
Then just go to browser & inspect element then you check below line in  html tags.

<html class="aui-view-gt320 aui-view-gt480 aui-view-gt720 aui-view-gt960 aui-view-960">

You have to right css for particular device according size.

.aui-view-320

.aui-view-lt320 // Less than

.aui-view-gt320 //greater then


below is some sample css class


#wrapper
{
background: none; margin: 0 auto; position: relative;
 }
.aui-view-320 #wrapper
{
 width: 320px; //Mobile device
}
.aui-view-480 #wrapper
{
width: 480px; //Smart Phone
}
 .aui-view-720 #wrapper
{
 width: 720px; //Tablets and Desktop
}
.aui-view-960 #wrapper
{
width: 960px; //Laptop and Desktop
 }
You can check your implementation by re-sizing browser.

If any query plz do comment or mail us at:
chiragmsc007it@gmail.com
mehdisunasara@gmail.com