Mobile_Basic Mobile Joomla! Template
1. Overview
Mobile_Basic is a clean, extendible and high performance Mobile Joomla! template based on JQuery Mobile framework. For full list of features and Mobile Joomla! extension compatibility, see Mobile_Basic Mobile Joomla! template page.
You can direct your mobile browser to demo.mobilejoomla.com and see how Mobile_Basic Mobile Joomla! template looks and feels. Please note that demo site may have premium extensions, which may require separate purchase.
2. Support Ads
It takes a lot of time, effort and money to develop and maintain a great open source project. In order to make sure a healthy and on going project, this free template displays Support Ads on your mobile website. Active Mobile Joomla! Basic/Pro/Club subscription removes the Support Ads.
3. Device support
Mobile_Basic is supported on majority of latest mobile devices and platforms, such as iOS, Android, Symbian, BlackBerry, Windows Phone. Since Mobile_Basic template is based on JQuery mobile framework, device compatibilities are in parallel. More information is available at Mobile Graded Browser Support page of JQuery Mobile project.
4. Installation
Mobile_Basic template is installed as any other Mobile Joomla! template. You can find detailed instructions in How to install a Mobile Joomla! template article.
After installing you should select this template in Mobile Joomla! extension settings. Click on Components → Mobile Joomla and select this template in the Mobile Template field.
Mobile_Basic Mobile Joomla! template requires Mobile Joomla! 2.1.49 or later.
5. Configuration
You can access Mobile_Basic template settings by selecting mobile_basic from Extensions, Template Manager.
Mobile_Basic template has various setting parameters, so that you can fine tune your mobile site into perfection.
5.1 Show in Header
You can define what will be displayed in your mobile web header.
Options:
Logo: Displays a logo, replacing the header title for the main page only. A logo image patch should be defined below.
Title (default): Displays only title text on all mobile pages.
Logo and title: Displays both logo and title on mobile pages.
5.2 Logo Image Path
If you select logo or logo & title options above, you can give logo image path here (/templates/mobile_basic/logo.png by default). Please make sure that logo's are 42px high (recommended values are w:150px, h:42px, transparent PNG)
5.3 Page Swatch
Mobile_Basic Mobile Joomla! template uses jQuery Mobile rich theme system, giving you full control over page styles. Default Theme includes 2 "swatches" (color themes) that are given letters (A and B) for quick reference. Default swatches for modules, pagination and message area inherit swatch of corresponding container (content or footer).
Options:
Light (A): Light color swatch
Dark (B): Dark color swatch
5.4 Header Swatch & Footer Swatch & Content Swatch
Swatches for header, footer and content areas correspondingly.
5.5 Footer Swatch
Swatches for modules titles and content.
5.6 Module Title Swatch & Module Content Swatch
Swatches for modules titles and content.
5.7 Pagination Swatch
Swatch used for pagination links and for Previous and Next buttons.
5.8 Message Area Title Swatch & Message Area Text Swatch
Swatches for title and content of Joomla system messages.
6. Module Positions
Mobile_Basic template supports the following list of module positions:
mj_top, mj_top2, mj_top3, mj_middle, mj_middle2, mj_footer, mj_footer2, mj_panel.
7. Module Styles
A module with hidden title (you can show or hide a module title in a module's settings page) is displayed as is, without expand/collapse. A module with a title is displayed as a collapsed block with title where full module content is displayed when tapped. Behavior of this feature may be changed by setting "Module Class Suffix" module’s parameter to the following values:
open – Display module expanded initially
popup - Display module as a button and display content in popup after tapping
nostyle – Don’t apply jQuery Mobile styling at all
inset – Apply inset style to listviews. It is applicable to modules with listviews (Menus, Latest Articles, etc.) and make it to be inset instead of full width.
8. Advanced Customization
8.1 Custom CSS
Mobile_Basic template can be customized further, using css/custom.css file. You can define CSS rules in such file and customize Mobile_Basic template for your needs or site compatibility. This file will not be overwritten if you update your template. But we recommend you to back it up regularly.
8.2 Custom Javascript
Similar to css/custom.css, the js/custom.js file has the same purpose but for javascripts. To access jQuery object use global jqm variable.
8.3 Javascripts and CSS Loading Manipulation
Some 3rdparty extensions may conflict with jQueryMobile framework. In this case it's reasonable to exclude some js/css files from loading, or reorder them. Mobile_Basic template provides such a functionality via js/custom_preload.txt and css/custom_preload.txt files. Each line of these files describe certain action depending on its first character:
# : comment
- : this URL shouldn't be loaded
* : this URL should be included before jQueryMobile
otherwise: this URL should be included after jQueryMobile (in standard way)
9. Compatibility
Mobile_Basic Mobile Joomla! template supports all native Joomla! features, (almost) all existing Mobile Joomla! extensions and all upcoming ones. 3rd party Joomla! extensions are not supported, unless they are listed at Mobile_Basic Mobile Joomla! Template Compatibility page.
10. Support
Our official channel for Mobile_Basic template support is Mobile Joomla! Forum. You are welcome there to ask any questions/problems you may have.
11. Licensing
Please visit Mobile Joomla! Licensing FAQ.
