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


For Example

function() {

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-lt320 // Less than

.aui-view-gt320 //greater then

below is some sample css class

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: