Mobile Joomla Tutorial

October 29, 2010 | Joomla Tutorials | Written by Steve Burge

There are several ways to make sure that your Joomla site is easy to read and browser on mobile phones. Recently we wrote The Ultimate Mobile Joomla Guide which covered 5 options in detail. In this tutorial we're going to explain more about Mobile Joomla which is one of the fastest and easiest ways to make your site mobile. It is particularly useful if you already have a site template and don't want to redesign everything just to get ready for mobile phone.

Mobile Joomla Video

Installing Mobile Joomla.

Go to http://MobileJoomla.com. You will need to register on the site in order to download the files.

In your site's administrator area, go to Extensions >> Install/Uninstall, click Browse to find the file and click Upload File & Install to complete the upload.

It might take a while to upload because it's installing a component plus templates, plugins and more.

If you go to Extensions >> Plugin Manager you'll see four plugins and in Extensions >> Template Manager you'll see four different plugins, each one designed for a different type of phone:

The mobile version of your site should be up and working immediately so you can start seeing what your site looks like on mobile phones:

iPhone / iPad / iPod Touch Screenshots

Android / WAP / PDA Screenshots

Mobile Joomla Module Positions

Mobile Joomla also has the ability for you to add modules to your mobile display. Each template comes with six positions: two in the header, two in the middle and two in the footer. This is an overview of the template positions for the iPhone/iPad/iPod Touch display:

Configuring Mobile Joomla

Mobile Joomla has a wide range of configuration options. On the first "Global Settings" screen you can set up a subdomain for each of the four main mobile versions (see the videos for more details on this). Each one also has it's own configuration options for the homepage, image management and more:

Comments

#1 Pedro Matos 2010-10-30 12:18

Very good...

#2 Mikko Ohtamaa 2010-11-01 14:45

Hi,

I put a link to this tutorial on mj.com website:

mobilejoomla.com/.../...

I hope this is ok.

#3 Yofie Setiawan 2010-11-04 12:46

Really great, but i wish you also tell us how to fix the problem with the images which going out of the box...

#4 martin 2010-11-14 03:07

i have installed but i can see the page at pc but in the iphone i can, why?

#5 BorisDDS 2010-11-18 02:16

Thank you this is the best extention I have tried to date.

As I am venturing into it I got three questions:
Q1) Can I make the MobileJoomla dispay same on the Android phones as it does on Iphone? (I like that simple menu type view)

Q2) Can I make a contact page on mobile joomla that would allow to click a button and turn on the phone navigation?

Q3) Can I make a "Contact Us" Button that would transfer the phone into the Phone Dialer in the Iphone and Android?
(i.e. I have an HTC Evo and if you hold any phone on any webpage it would insert it into a dialer)

#6 Antonio 2010-11-19 17:39

Thanks, but, what admin template do you use in the video?

its looks great!

greetings from spain

#7 Newbie 2010-11-20 16:54

I have the problem of the infinite looping issue with the subdomain. What exactly do I need to add (verbage) and where (before or after what line) in the .htaccess file in order to fix my issue? It is sort of hard to see what exactly you did to fix this and I do not want to hose my entire site if you know what I mean?

Any help is greatly appreciated!

Newbie....but loving it!

#8 Newbie 2010-11-20 17:08

Problem 1 out of the way: I found the htaccess file in the root of my website folder.

Problem 2 still an issue:
I squinted really hard and tried to figure out what you had done with the htaccess file but apparently I have something wrong because it did not work....so here is what I added to the file for the website in question:

RewriteCond %{HTTP_HOST} ^pbxtend.net$ [NC]
RewriteRule ^(.*)$ www.pbxtend.net/$1 [R=301,L]

This was inserted after the following section in the htaccess file:

#
# mod_rewrite in use

RewriteEngine On

It all worked fine until I tried to add the subdomain stuff.....and I did make sure the subdomains pointed to the root of the website (mirrored is the selection for dreamhost).

Any help is greatly appreciated!

I am a Newbie!

#9 pwalsh 2010-12-03 17:21

great tutorial thanks

#10 Yuriy 2011-01-14 12:20

Hello,
Everything works except the iphone.
I created a subdomain to iPhone, I must go there to copy all my site or not?

#11 Ricardo Bustamante 2011-03-08 04:30

This doesn't work, all I see is the same site. No mobile version.

#12 Vinod Patidar 2011-07-16 10:42

Hi,

how can i test in local PC

Thanks

#13 tecmobeto 2011-07-21 23:21

gracias, me sirvo

saludos

#14 Myles Kleinfeld 2011-08-01 17:06

Does anyone have a list of which phones work with the plugin and which do not?

#15 Ana 2011-09-06 14:11

Thanks I've installed it on www.bellezachic.com/ but still haven't found where the template modules positions are...! thanks for any help

#16 kranthi 2011-09-20 12:03

hi,
i have installed mobilejoomla on my site but unable to redirect for example for iphone.mywebsit e.com its showing as Forbidden

You don't have permission to access / on this server.

what is the code need to add in .htaccess file to redirect

please let me know its urgent

thank you

#17 byman64 2011-12-26 04:59

Did you create your subdomains?
If you have a control panel for your domain, may be you are able to create sub-domain like iphone.yourdomain.com.
Otherwise ask to your hosting service provider.

#18 Fahad Ali 2011-12-29 05:54

Hi,
i am using mobile joomla and it is really great component. I have a question here. I have developed a site for my client who wants to sms a link to any user, that will load google map. The url will contain parameters as well, like latitude and longitude. But when i try to load the page in iphone simulator, it gives error. It does not load the site when there are parameters in the link. Please help regarding this issue?

#19 Al 2012-02-01 19:21

Hi. I downloaded the mobile Joomla and it looks awesome but I have only one simple issue. Can you tell me why Google Map doesn't show on my contact menu on my mobile version?
Thanks

#20 Al 2012-02-04 00:32

Thanks. Please ignore my previous question. It was my coding problem. This extension works great and I can not believe how it could save my time and make my clients happy.
Thanks again

#21 Caroline 2012-02-17 15:45

Excellent tutorial! Very helpful and easy to follow.
Many thanks.

#22 Leon 2012-03-06 23:14

So Android support.. Seems pretty weak, Android is certainly not the same as WAP, and like it or not, on current projections likely to overtake iPhone in the next year or two. Perhaps I'm missing something but my Galaxy SII isn't picked up either as a Smartphone or a WAP device.

#23 Miikka Kukkosuo 2012-03-07 11:32

@Leon: sounds a bit weird, Android is definitely well supported as major platform, and all Android devices should be recognized as smartphones. You could try our Forum at MobileJoomla.co m for detailed help.

We would like to point out that everyone using Mobile Joomla! should upgrade to our latest 1.0.1 (stable) version which includes important security and stability updates. It also includes much improved and clearer user interface so that new users are able to get around easier, and offering more flexibility for advanced users. This also means the above instructions and screens are now slightly outdated - the new UI is easier.

Also we are releasing new mobile Joomla templates for more stylish mobile website look and feel, and Joomla extension mobilizations for the most popular Joomla extensions.

#24 David Bennett 2012-04-09 09:12

Having trouble reading what to insert to the htaccess file. I set up a sub domain as shown and it is ok. Can you help by supplying the lines to add?

#25 Diederik 2012-05-14 13:50

Newbie

You need to add http:// in front of your domain name.
RewriteCond %{HTTP_HOST} ^pbxtend.net$ [NC]
RewriteRule ^(.*)$ www.pbxtend.net/$1 [R=301,L]

You must change it to
RewriteCond %{HTTP_HOST} ^pbxtend.net$ [NC]
RewriteRule ^(.*)$ www.pbxtend.net/$1 [R=301,L]

#26 MAC 2012-06-19 22:52

Very very good.
thanks for your works

#27 George 2012-07-23 22:15

This is outdated, I installed a new version and it has NONE these settings?

Thanks

#28 George 2012-07-23 22:17

1.1.0 is the version i have install on a 2.5.6 joomla

#29 marcuscb 2012-10-14 09:55

hey, thanks a lot for the tutorial, very informative and useful!

#30 Guest 2012-10-18 19:53

HI I CANT GET THE CURRENT PROGRAM 1.2.0 TO WORK IT COMES UP INVALID USE OF MOBILE

#31 web developer 2013-01-14 05:44

Hi..
Thank you for making the only actual tutorial that I’ve been able to find. Other ‘tutorials’ haven’a actually explained how to do things, but you did so, very clearly.
Thanks..

#32 adedamola 2013-04-13 12:36

Thanks for the tutorial, I just install the mobile joomla on my website and it seems to be working perfectly the only problem is that while all my menu appear my homepage is left blank. What can I do to rectify this situation.

Add comment

Start Online Training

Members get access to all our video training. That's 1,142 training sessions in Joomla, Drupal, WordPress and Coding.

Manage All Your Joomla Sites

With Admincredible you can update and manage all your Joomla sites. If you have 5 or 500 sites, Admincredible will make your life easier! Visit Admincredible.com.

Latest Blog Posts and Tutorials

Blog Categories

Latest Comments

JPrc Cronjobs Provides Cron for Joomla
Comment by Gosling Cools
If want to run on your 'local' website. Can you leave out www.domain.com/index/php?
10 Options for Multi-Vendor Shopping Carts
Comment by Dinesh
I just tried Magento before a year of time for one of my website and currently I was in ...
400 Joomla and Drupal Classes
Comment by shah kash
Hi Steve I'am beginner in drupal I make a simple quiz using webform and radio button but ...
10 Drupal Commercial Theme Companies
Comment by Christopher V
Grateful to see ThemeBrain in your list. We also have our themes price updated, not ...
Create a Joomla Test Site Using Akeeba Backup
Comment by Mikias
very detailed and thanks! I really really need your help please. i have installed the ...

The License for Our Tutorials

All of our tutorials are published under the Creative Commons Attribution-NonCommercial license. This means:

You can re-use these tutorials.
You can modify these tutorials.
You must link back to our original tutorial.
You can't use these tutorials commercially.

Click here to read the full license.

Joomla Tutorials and Blog Posts