Mobile Joomla! Wiki

Configuring MobileJoomla!

To modify the output of your Mobile Joomla! site, you need to configure it from settings.

The first tab is the overall settings

The first tab is the overall settings

General Settings:

General Settings
  • User agent checking
  • Domain (multisite) support: Show multiple versions on aliases (like pda.site.name, wap.site.name)
  • Show this page for PC: Use this setting to allow mobile devices only. For PC browser either specified page will be displayed or browser will be redirected to specified external site. Keep this parameter empty to allow visit your site from PC.
  • PC template width: Approximate width of the PC template (used in image 'proportional' processing)
  • Rescaled image quality (0-100): Quality of rescaled jpeg images.

Devices:

  • Domain name: Domain name. (e.g. wap.yoursite.com)
  • Redirect to domain: Redirect devices to this domain.

After that it's time for individual configuration for different kind of devices

PDA settings

The template contains some positions for modules for which we can apply names in the settings.

XHTML-MP/WAP2.0 Settings:

  • Template name
  • Homepage: Set this page as a homepage (e.g. index.php?option=com_content&view=article&id=12&Itemid=1)
  • Image adaptation method: Remove or resize images
  • Gzip compression: Some devices cannot display some gzip-compressed pages. Therefore it is possible to disable the use of gzip-compression completely. On the other hand, mobile contents should be as compact as possible; so you may want to enable gzip-compression for the mobile-version of a site if you know that your target audience can handle it.
  • Remove unsupported tags
  • Convert html-entities to symbols: Convet html-entities to symbols using html_entity_decode funtion
  • Content type: Output Content-type header

XHTML-MP/WAP2.0 Mobile Joomla Template API Settings:

  • 1st module position above pathway: Name of the 1st module above pathway
  • 2nd module position above pathway: Name of the 2nd module above pathway
  • Show Pathway: Show pathway on pages
  • Pathway on home page: Show pathway on home (main) page
  • 1st module position between pathway and component
  • 2nd module position between pathway and componen
  • Component on home page: Show component on home (main) page
  • 1st module position below component
  • 2nd module position below component
  • Show Joomla! footer: Show Joomla! version in footer
  • Use head: Use standard or simplified block
  • Add "noindex, nofollow" meta tag: Add to the page header
  • Allow extended editors: Allow to load extended editors (TinyMCE etc)
  • Embed CSS: Embed css-style into page
  • Use xml-head: Use html with
  • DOCTYPE-head: Specifies which DOCTYPE to use for our pages.
  • xmlns in html-head: Specifies if we should include the xmlns attribute in the html element, so that it will look like this: instead of . For dotMobi sites this should be set to 'Yes'

WAP (WML) Settings:

(all explained above)

WAP (WML) Mobile Joomla Template API Settings:

(if not explained above)

  • Module position for show modules as cards: Name of the module position for show modules as cards

iMode (CHTML) Settings / iMode (CHTML) Mobile Joomla Template API Settings:

(all explained above)

iPhone/iPod Settings / iPhone/iPod Mobile Joomla Template API Settings:

(all explained above)

Template Modularization

The last thing to do before your page is complete, is to adjust the places of your modules for the mobile page. In your Extensions -> Template Manager you can find three new templates, each for dirrefent mobile devices. These templates are used by Mobile Joomla to present your page in suitable format.

With installation of Mobile Joomla!, your system got extra modules for pda, imod and wap pages, called for example, mod_imode_menu or mod_wap_login. In your Joomla! back end Extensions -> Module Manager, you get to edit their names, positions and other variables.

Module edit

In the previous settings, you learned that mobile templates had their own names for module positions (i.e. 'pdamiddle', 'wapfooter'). This is where you type the name of the wanted position in 'Position:'. Lets put our 'Main Menu' in 'pdamiddle'. Now, in emulator we can see something like this (in all pictures, we used the opera mini emulator):

Opera Mini

The same instructions apply for other modules as well. Here are 'Latest News' and 'Login' modules installed:

The color schemes are easy to change. It happens by modifying the .css file of the template. You can do it right in the back end of your Joomla in Extensions -> Template Manager. For example, choose 'mobile_pda' template. On the upper right hand corner you'll find the option to 'Edit CSS'

Edit CSS

By choosing it you can use Joomla's editor to change the outlook of your template.

Emulator