To modify the output of your Mobile Joomla! site, you need to configure it from settings.
The first tab is the overall settings
- Title: Mobile site title (full site title will be used if empty)
- Rescaled quality (0-100): Quality of rescaled jpeg images.
- Adaptation method: in what way images will be adapted to fit mobile screen
- Force as homepage: set special page to be mobile homepage
- Display component: display or hide component output on homepage (e.g. to display menu only on homepage)
- Server caching: use serverside caching for mobile content
- Device caching: use clientside caching to speed-up navigation
- Gzip compression: Use gzip compression for mobile devices
- Template width (reference): Approximate width of the PC template (used in image 'proportional' processing)
- Force style: hardcode image size in styles to fix incorrect styles of some 3rdparty extensions
- Remove unsupported tags: remove tags like object, applet, embed, etc. that are unsupported by mobile devices
- URL: main site url (used to redirect mobile browsers to full version)
- Redirection: 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.
- Subdomains: Show mobile versions on specified domains
After that it's time for individual configuration for different kind of devices
The template contains some positions for modules for which we can apply names in the settings.
- Template: template name to use in this mode (can be set to empty in the case of responsive main template)
- Width margin: keep extra margin in image rescaling (so that maximal image width is screen_width minus width_margin)
- Convert html-entities to symbols: Convert html-entities to symbols using html_entity_decode funtion
- Content type: Output Content-type header
- Use head: Use standard or simplified block
- Allow extended editors: Allow to load extended editors (TinyMCE etc)
- Embed CSS: Embed user-defined css-style into page or load it as external file
- Use xml-head: Use html with xml preambule (
- DOCTYPE-head: Specifies which DOCTYPE to use for our pages.
- xmlns in html-head: Specifies if we tag should include the xmlns attribute.
Smartphone Template Modules:
- Top module #1, #2, #3: names of positions for top modules (above component area)
- Mid module #1, #2, #3: names of positions for middle modules (between component area and footer)
- Footer module #1, #2, #3: names of positions for footer modules
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 new templates, each for different 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 mobile pages: Mobile Header (mod_mj_header), Mobile Menu (mod_mj_menu) and Select Markup (mod_mj_markupchooser). In your Joomla! back end Extensions -> Module Manager, you get to edit their names, positions and other variables.
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. -> Templates tab. For example, choose 'mobile_smartphone' template. On the upper right hand corner you'll find the link to 'Edit css/custom.css'. By choosing it you can use Joomla's editor to add new css styles to change the outlook of your template.