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
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 .
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
No comments:
Post a Comment