Saturday, May 11, 2013

Mobile Theme in Liferay

Now no need to do any nightmare work for creating mobile theme. No need to find User Agents and writting different CSS for different device. Single CSS will work for all device.

You are just few steps away for becoming expert in Mobile Theme.

NOTE :- Considering that you are aware of creating the Basic Theme in Liferay.

1) Create a Simple theme as we are creating for normal website portal(Make CSS code as percentage specific rather than Pixel specific for width Especially.).

2) While creating theme, Don't forget to add two most important things.
  •      In the portal_normal.vm, header section put the below line
    <meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1, maximum-scale=1">
  •      In the Script part add below line
     AUI().use('aui-viewport');

Above Two lines will handle your theme according to your device.

3) Complete your coding part that you required for creating the theme( Navigation , footer, etc).

4) Once the Development part is done from your end then you need to do the Configuration part for different device.  

5) Now no need to find user-Agent in Liferay with if and else conditions on the Code of theme. Liferay has solved that problem for us now. Liferay has introduced Mobile Device Rules which will do our work.

6) In order to make it compatible with different Devices like Iphone,Ipad,Android Devices you need to install plugins called WURFL.

 http://sourceforge.net/projects/lportal/files/Liferay%20Plugins/6.1.0%20GA1/wurfl-web-6.1.0.1-ce-ga1-20120106155615760.war/download

7)
Once You installed Plugins. Follow the below Video to create different rules for different devices.



8)
If you don't have device with you for testing then Install User-Agent Switcher in browser for Chrome and also for Firefox ( Required to restart the browser once you switch the User-Agent).

Thank You Guys for reading. Please post your comments and reviews.

8 comments:

  1. Replies
  2. It is good to read...Very useful ...Add source code if there is any possibility..

    ReplyDelete
  3. Superb content nice blog. Complete description of the topic you have chosen to share. I hope you stuff some more relevant information apart from the main topic so this blog can be use as miscellaneous purpose.
    cell phone detector

    ReplyDelete