Joomla Tutorials and Blog Posts

Mobile Joomla Tutorial

October 29, 2010 | 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.

tutuploadsmedia_1288368349453.png

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

tutuploadsmedia_1288369874228.png

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.

tutuploadsmedia_1288368669948.png

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:

tutuploadsmedia_1288370203602.png

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

tutuploadsmedia_1288369055073.png
tutuploadsmedia_1288369078935.png

Android / WAP / PDA Screenshots

tutuploadsmedia_1288370329742.png
tutuploadsmedia_1288370385526.png

Mobile Joomla Module Positions

tutuploadsmedia_1288370839807.png

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:

tutuploadsmedia_1288370752560.png

Configuring Mobile Joomla

tutuploadsmedia_1288371418956.png

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:

tutuploadsmedia_1288371448524.png


 

 


To sign up for complete classes and support

 

Comments  

 
#1 Pedro Matos 2010-10-30 07:18
Very good...
 
 
#2 Mikko Ohtamaa 2010-11-01 09: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 07: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-13 22:07
i have installed but i can see the page at pc but in the iphone i can, why?
 
 
#5 BorisDDS 2010-11-17 21: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 12:39
Thanks, but, what admin template do you use in the video?

its looks great!

greetings from spain
 
 
#7 Newbie 2010-11-20 11: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 12: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!
 

Add comment


 


To sign up for complete classes and support