JTouch

Mobile Extension for Joomla! User

Guide
A Mobilization Plugin & Touch Friendly Template for Joomla! 3
Author: Huy Nguyen Co-Author: John Nguyen

ABSTRACT
The JTouch Mobile extension was created for Joomla! 3 website developers and
administrators to quickly and easily utilize the very popular jQuery Mobile
framework to create a touch friendly and responsive template for mobile
devices. This extension consists of to parts, the plugin and the mobile
template. This document will also explain how to configure the plugin
parameters and customize the mobile template. The JTouch Mobile extension
is an open source project and was developed under the GPL 2 license. Please
feel free to use, modify or redistribute. The Griddy Designs team will continue
to work hard to bring you quality open source products. Please support us by
following us on Facebook and Twitter. To receive additional benefits and
advanced support, please subscribe to our Platinum membership program. For
more details about membership benefits, please visit
http://www.griddydesigns.com/membership.html

Table of Contents
1 ABOUT THIS DOCUMENT

2 INTRODUCTION

3 REQUIREMENTS

4 INSTALLING

4.1 INSTALLING THE JTOUCH MOBILE EXTENSION

4.2 CONFIGURING PLUGIN SETTINGS
4.3 CONFIGURING TEMPLATE SETTINGS

5
6
9

5 UPGRADING AND UNINSTALLING

25

5.1 UPGRADING
5.2 UNINSTALLING

25
25

6 CUSTOMIZING THE JTOUCH MOBILE TEMPLATE

26

6.1
6.2
6.3
6.4
6.5
6.6
6.7
6.8
6.9

27
28
29
29
32
32
32
33
33

CHANGING THE HEADER BANNER LOGO

ADDING A CUSTOMIZED MENU
ADDING A SWITCH TO MOBILE BUTTON
CREATING A NAVIGATION MENU WITH ICON
CREATING A PANEL
CREATING A FOOTER MENU
ENABLING HORIZONTAL SCROLLING FOR CONTENT OVERFLOW
CREATING A CLICK TO CALL BUTTON
CREATING A TOUCH STYLE MENU

7 CUSTOMIZING THE THEME

34

7.1 CUSTOMIZING WITH JQUERY MOBILE THEMEROLLER

7.2 CUSTOMIZING THE JOOMLA! JTOUCH MOBILE JTOUCH3 TEMPLATE

34
41

8 THINGS TO KNOW

42

8.1 COMPATIBILITY ISSUES

8.2 JQUERY & JQUERY MOBILE

42
43

9 OPEN SOURCE

43

10 PROFESSIONAL SERVICES

43

11 FAQS

44

1 About This Document

This document describes the basic steps to install and setup the JTouch Mobile extension
for Joomla! 3. It also provides some tips on how to use some of its key features.

2 Introduction
The JTouch Mobile extension was developed based on the jQuery Mobile framework. It
was designed to provide an easy way to mobilize Joomla! 3 using the many great
features of jQuery Mobile by simply using the familiar Joomla! UI (User Interface). The
plugin and mobile template provided with the extension has been optimized and created
for Joomla!. Griddy Designs also provides several other mobile templates for popular
Joomla! exstensions like Kunena 3.x, VirtueMart 2.x, and jComments 3.x.


Key features:
Provides a jQuery Mobile based plugin and mobile template for Joomla! 3
Utilizes HTML5 + CSS3
Auto-detects mobile devices to display mobile optimized template
Built based on the jQuery Mobile framework
Open source


For more information or support, please visit our official website at
http://www.griddydesigns.com.

Follow us on Twitter at https://www.twitter.com/jtouchmobile.

For professional services and business development, please contact us at
proservices@griddydesigns.com.

3 Requirements

The following requirements must be met to install the JTouch plugin and mobile
template.
Website running Joomla! 3.3.x
If you are using Kunena, it must be version 3.0.3 or above. The Kunena mobile
template is available to Gold and Platinum Members Only.

Note: The following versions were used when this document was written.
Joomla 3.3.0
JTouch Mobile 3.2.0-beta.2
jQuery Mobile 1.4.2

4 Installing

First, download the latest release of the JTouch Mobile Extension at

https://www.griddydesigns.com/jtouch-mobile.html. You will need to unzip the
download first.

There are 3 main steps to get the JTouch Mobile extension up and running.

1. Install the JTouch Mobile extension (pak_jtouch3.zip)
2. Configure plugin settings
3. Configure template settings

After completing these 3 main steps, you are on your way to setting up your mobile
version of your Joomla! website!

4.1 Installing the JTouch Mobile Extension

Installing the JTouch Mobile extension is the same as any other extension. Simply go to
the Joomla! extension manager to upload and install. For those of you that are new to
Joomla!, please follow these instructions.

1. Log in to your Joomla! admin.
2. Go to Extensions > Extension Manager.
3. Under the Install section, browse to the file pak_jtouch3.zip that was extracted
from the download earlier and then click on the Upload & Install button to install
the package.

Figure 1

The following message will be displayed upon successful installation. Please pay close
attention to the next steps section of the message. There are 2 quick links to enable the
JTouch plugin and configure the mobile template (see figure 2).

Figure 2

4.2 Configuring Plugin Settings

To start using the JTouch mobile template, the JTouch3 plugin must be enabled.
1. Go to Menu > Extensions > Plugin.
2. Search for the keyword JTouch.
3. Click on the System - JTouch Mobile 3 Controller plugin.
4. Under the Details page, set the Status to Enabled. Set Access to Public.

[Mobile Detection Tab]
Under the Mobile Detection section, set the Enable Template Switcher to Yes. This will
automatically switch the website template to the JTouch3 template for mobile devices.
Set Switch to Template setting to jtouch3. To use the JTouch3 template for tablets, set
Include Tablets to Yes. For Mobile Home Page, select Use the following page and
select the desired page.




Mobile Domain: Specify a FQDN (Fully Qualified Domain Domain) for your mobile site.
Please remember to create a DNS record for this FQDN (eg. m.griddydesigns.com).

Force Mobile Domain: Set Yes to force users from mobile devices to use the mobile
domain.

Note: If you have another template for your mobile site other than the JTouch3
template, you can select it from the Switch to Template dropdown box. If you want
to make the desktop template home page to be your mobile site home page, select
As desktop for Mobile Home Page option.


[Mobile Output Tab]



Remove scripts: You can enter the script filename or relative path of the script
(javascript of css) that you want to remove from the <head> tag. Below is an example of
2 scripts that are loaded from the head.

<link rel="stylesheet"
href="modules/mod_jtm_accordion_menu/assets/jtmastyle.css" type="text/css" />
<script src="/jtouch3/media/system/js/mootools-core.js"
type="text/javascript"></script>

To remove these two scripts, we just need to enter two lines:

jtma-style.css
mootools-core.js

Or you can enter the relative path:

assets/jtma-style.css
js/mootools-core.js

Those scripts then will be removed from the head tag on the JTouch mobile template.


Add CSS Files: Enter the full path to the CSS file or files that you want to add to the
<head> tag. Please enter 1 path per line.

8

Example:

templates/protostar/css/protostar-template.css
templates/protostar/css/mystyle.css

Add JS Files: Enter the full path to the JavaScript file or files that you want to add to the
<head> tag. Please enter 1 path per line.

Desktop Components: Enter the components that are not displaying correctly on the
mobile template. This is will output the desktop code on the mobile template instead of
the JTouch code. Please enter 1 component per line.

Example:

com_kunena
com_k2

Display Redirect Message: Select Yes to display a message when there is no mobile
version available.

Redirect Message: Enter redirect message.

4.3 Configuring Template Settings

Click on the Click here link from step 1 of the welcome message above to go to your
Template Manager page. Then click on JTouch3 under the style column to open its
settings page.

Note: Another way to access this page is by going to Extensions > Template Manager.
**Do NOT set the JTouch template as your default template.**


[Look and Feel Tab]

Link Color: Set the link color here. These settings will take precedence over all other CSS
settings.

Link Hover Color: Set the hover state color here. These settings will take precedence
over all other CSS settings

Google Font for Heading: Enter the Google font family to use for headings: h1, h2, h3, h4.

Please visit http://www.google.com/fonts to see available fonts. You can obtain the font
family from the code provided by this site.

1. Go to http://www.google.com/fonts
2. Choose the font you want to use.
10


3. Click on the Quick Use icon
.
4. Go to section 3 and you will see the code that will have the font family name
proceeding family (eg. family=Kite+One). Kite+One is the font family in this
example.

5. Enter the name Kite+One in the Google Font for Heading field.

Google Font for Body: Enter the Google font family to use for the body section. Follow
the same instructions provided for the Google Font for Heading field.

Page Theme: Select a built-in theme for the mobile website. There are 2 pre-defined
color swatches named: A (White) & B (Black).


Notes: See how you can create more swatches by visiting
http://jquerymobile.com/demos/1.1.0/docs/api/themes.html.

Page Transition: Select the transition effect: Fade, Pop, Flip Turn, Flow, Slide Fade, Slide,
Slide Up or None. Example of a page transition is when the Menu or Back button is
pressed.

Notes: Some devices do not support fixed header, flip or turn effects.

11

[Look and Feel Tab Contd]

Main Banner URL: This is the URL to the image used by the top banner. The URL can be
a relative or absolute (i.e. images/mybanner.png or
http://www.yourdomain.com/images/mybanner.png). You may upload your custom
banner image anywhere just as long you have the proper URL to the file.


Notes: Recommended size for the header image that fits well for most mobile
devices is 300 x 70 pixels.

Display Header: Show or hide the top banner of the mobile website. This banner is
loaded to the jtouch-banner position.

Header Theme: Select the color set for the main header bar.

Fixed Header: Select Yes to always display or stick the header bar on top of the screen
while scrolling through the page.

12



Header Button: Select the layout of your header buttons: Text and Image, Only Text, or
Only Image.

Show Back Button: Show or hide a Back button on the header bar. You can select to
display the button with text and image, just text, or turn it off.

Footer Theme: Select the theme for footer bar.

Fixed Footer: Select Yes to always display or stick the footer bar at the bottom of the
screen while scrolling through page.

[Look and Feel Tab Contd]

Panel Type: Select the panel type.
Overlay

13

14

Reveal

Push



Note: See it in action at http://demos.jquerymobile.com/1.4.2/panel

Swipe to Open Panel: Select Yes to enable swipe feature to display panel.

Switch to Desktop Button: No Display, On Top of the Menu Page, or At Bottom of the
Menu Page. The button can be hidden, displayed on the top or displayed at the bottom of
the menu page. This button allows site visitor to toggle between desktop and mobile
versions of website.

15




Desktop Page: If you have enabled the desktop/mobile template switching, the desktop
page can be configured to stay on the current page of the site or it can be redirected to
another page from the dropdown list.

From the previous 2 pictures above, the Switch to Desktop button is set to display at the
top of the Menu screen. If the site visitor clicks on this button, he or she will be
redirected to the Forum page.

The mobile site can be previewed interactively at any time by clicking on the Preview
Mobile Version button.

16

Important!

JTouch3 can remember your last viewing mode (i.e. desktop or mobile). If a
preview of the mobile site is done on a desktop browser, the mobile version will be
displayed the next time the page is access by that browser, instead of the desktop
version.

To make JTouch3 to switch back to the desktop view, remember to click on the TOP
bar of the preview to close the preview mode. Clearing cookies on the web
browser will also revert back to desktop view for your desktop browser.

17

[Icons & iOS Devices Tab]

Add to Home Screen: Select Yes to display a dialog box that will ask the site visitor to
add a website icon to the iOS home screen. This dialog is displayed the first time the
visitor visits your website or if the website icon has not been added to the home screen.

Figure 17

You can change the default JTouch Mobile logo by replacing it in the icons folder located
in the mobile template directory.

Icons Folder: This folder is located in the templates/JTouch3 directory. It contains the
icon files that are used to display the favicon and web app icon for iOS devices. To
customize the icons, simply create new ones with the same attributes (i.e. image size and
file type) as the ones located in the folder and then upload and replace the files.

18



If you decide to create a different folder to store your customize icons be sure to update
the Icons Folder field in the Icons & iOS Devices tab. Below is an example configuration
where the icons are located in a folder named myicons.

Icon on Header Bar: You can change the icon on the header bar by entering the icon
names. Please visit http://api.jquerymobile.com/icons for more icon options.


Default Icons:

19

[Advanced Parameters Tab]

Compress: Select No for this option to use un-compressed JavaScript and CSS files and
gather diagnostics information. This is very useful for developers to troubleshoot issues
and should only be turned on for that purpose. Outputting debug information may cause
performance issues in loading time and should be turned off when troubleshooting is
completed.

Important!
Since version 2.5.20, a caching feature was added to the JTouch Mobile template.
All main CSS and JavaScript files will be merged as compressed and then saved to
Joomla!s JTouch3 cache folder ([ROOT]/cache/jtouch3).

To clear the JTouch mobile template cache, go to the JTouch3 template and under
the Advanced Parameters, click the Clear Cache button. You may also go to Site >
Maintenance to clear this cache.

20

Note: Try deleting the JTouch3 cache when template style changes are not
updating.

Use Built-in jQuery: Select Yes to use the jQuery library provided with the JTouch
Mobile template. Select No if you have your own jQuery library already installed. If
you decide to use the jQuery that is already installed, please make sure that the jQuery
version is 1.10.1 or higher.

Load Font Awesome: Select Yes to include CSS file that includes the Font Awesome
icon library. This will allow you to insert Font Awesome icons in Joomla! articles. For
more information, you can visit the developer page at
http://fortawesome.github.io/Font-Awesome/icons. Font Awesome is also included in
the Bootstrap library. If Bootstrap is already loaded on your mobile website, you can set
this to "No".

jQuery Mobile CSS: Select which type of CSS you would like to use for your mobile
website, full version (FULL) or structure only (STRUCTURE ONLY).

Important!
Only use Structure Only CSS when you have a fully customized theme. Please
read the section Customize Theme for more info.

Show Powered By: Select Yes to display a link to GriddyDesigns.com. Please support us
by setting this to Yes. This will help us continue our development and maintenance for
our open source mobile solutions for Joomla!.

[Advanced Parameters Tab Contd]

21



Module Mapping: You can map existing positions that are used in other templates to
positions located in the mobile template by entering the existing position names next to
the corresponding positions on the mobile template. For example: if you want to display
modules that are located on the 'left' position of your desktop template to the 'jtouch-
user1' position on the JTouch Mobile template (JTouch3), type in 'left' in the field next to
'jtouch-user1'. Please see figure 60 to view the available positions provided with the
JTouch Mobile template.

22


Top:

Bottom:

Main:

23

[Google Settings Tab]

Use ReCaptcha: Select Yes to enable ReCaptcha.


ReCaptcha Public Key: If you are using ReCaptcha on the login/registration forms, please
re-enter the same public key from Google ReCaptcha.


Use Google Analytics: Selecte Yes to enable Google Analytics. You can add your Google
Analytics code (account and domain) to enable tracking by your Google Analytics
service.

Enable Google AdSense: Use this option to enable Google AdSense display on all pages of
your website. You can select Top, Bottom or both.

24

Note: This option only applies to the JTouch Mobile template and does not affect the
desktop template.

Script Type: Select your preferred type of Google AdSense script, PHP code or Native
(JavaScript) code. Both types have the same function of displaying the Google AdSense
on all of your mobile pages. This option provides the flexibility of choosing what works
best in different environments.

Script Type: Enter your Google AdSense slot name.

Banner Width: Enter your Google AdSense banner width in pixels. Default is 320.

Banner Height: Enter your Google AdSense banner height in pixels. Default is 50.

5 Upgrading and Uninstalling

5.1 Upgrading
With Joomla! 3, the upgrading process is the same as a new installation process. The
JTouch Mobile extension was designed to keep the previous settings from the previous
version for both the plugin and the template.

Important: Make sure to do a full backup before any new installations or upgrades.
We recommend using the Akeeba Backup extension to perform Joomla! backups.
More information can be found at http://www.akeebabackup.com.

5.2 Uninstalling
1.
2.
3.
4.
5.

Login to the Joomla! admin.

Go to Extensions > Extension Manager.
Click on the Manage tab.
Search for keyword jtouch
Select the 2 extensions: System - JTouch Mobile 3 Controller and jtouch3, then click
the Uninstall button on the top right to complete the uninstallation.

25

6 Customizing the JTouch Mobile Template

Modules can easily be displayed on the JTouch Mobile template. The mobile template
follows the same guidelines as any other Joomla! template. There are currently 8
positions that are available to use that should cover most requirements.

Note: The default JTouch Mobile template positions will have the prefix jtouch-.
This allows you to easily identify positions related to the JTouch Mobile template.
Not all modules designed for the desktop template will work with the JTouch Mobile
template. It is important to test all modules that are being placed in JTouch Mobile
template positions. You may choose to use the default JTouch position names are
you can map existing desktop template positions to the mobile template. To edit or
re-map the JTouch Mobile template positions, go to the JTouch3 templates
Advanced Parameters, Module Mapping section. You may also refer to section 4.3
Module Mapping for more information.

Note: There are 2 new positions, jtouch-left-panel and jtouch-right-panel. This
features gives you 2 panels than can be used for your mobile template.
26

See figure below for positions information. The filename for this diagram is
JTouch3.template.positions.jpg and it is included in the JTouch Mobile extension
download package. The 2 new jtouch left and right panels are not shown in this
figure but is available to use. The panels can slide in from the left or right and can
contain Joomla modules like menus, login form, etc.

Top:

Bottom:

Main:

6.1 Changing the Header Banner Logo

The recommended size for the header banner is 300 x 70px. Simply create one and
upload it to the website. Set the Main Banner path to the actual location of the new
banner.

27

6.2 Adding a Customized Menu

There may be cases where the desktop Joomla! menu has more tabs and information you
would need to display on mobile devices. In this situation, it is sometimes better to
create a custom menu just for mobile devices and assign it to the jtouch-menu position.
This custom menu can be displayed instead of the one used for the desktop template.

To create a custom menu for mobile devices, perform the following tasks.

1. Go to Menus > Menu Manager > Add New Menu.
2. Enter a Title, Menu Type and Description (optional but recommended).
3. Create desired menu items for that newly created menu.
4. Go to Extensions > Module Manager.
5. Create a new menu module (do this by selecting Menu for module type).
6. Enter in a title and select jtouch-menu position.
7. Under the Basic Options, select the newly created menu from step 1.
28


Note: If your new menu does not display on the mobile device, it is probably because
your previous mobile menu module is still published in the jtouch-menu position. Please
remember to un-publish the previous mobile menu module in the module manager.
These parameters are located under the Module tab of the module.

Make sure that you select jtouch-menu for the Position.

Set Start Level to 1, End Level to All, and Show Sub-menu Items to Yes.

6.3 Adding a Switch to Mobile Button

If you want to add a link on your desktop template menu to switch to your JTouch
Mobile template, simply create a web link with the following URL.

http://www.your-domain.com/index.php?jtpl=X

Where X is the ID of our JTouch3 template style. You can find the ID on the Template
Manager list on the far right column.

http://www.your-domain.com/index.php?jtpl=9

6.4 Creating a Navigation Menu with Icon

To create a new navigation menu with an icon, perform the following tasks.

1. Create a new menu and add menu items.
2. Go to Extensions > Module Manager.

29

3. Click on New to create new menu module.

4. Select Menu.
5. Select jtouch-nav position.
6. Under Basic Options, select the JTouch menu.
7. Set Start Level to 1.
8. Set End Level to 1.
9. Set Show Sub-menu Items to No.
10. Under Advanced Options, select jtouch-nav for Alternate Layout
11. Click Save.
12. Go back to the menu item in your new menu. Under the Link Type Options, Select
image for the Link Image field. See Figure 61.

Module Tab:

30


Advanced Tab:

The result of this configuration should look similar to the following image.

Notes: Icons will appear if the Link Image is specified. It is not recommended to put
more than 3 menu items on the navigation bar due to the space limitations on
mobile devices.

31

6.5 Creating a Panel

To create a Panel, perform the following tasks.
1. Go to Extensions > Template Manager.
2. Click on the JTouch3 template under the Style column.
3. In the Look and Feel section, select the Panel Type: Overlay, Reveal or Push
4. Place any existing module or create a new module and set the position to jtouch-
left-panel or jtouch-right-panel.

See Figure below to see an example of the Joomla! login module placed in the jtouch-
left-panel position.

6.6 Creating a Footer Menu

To create a footer menu, perform the following tasks.

1. Create a new menu and add new menu items.
2. Go to Extensions > Module Manager.
3. Click on New to create new Custom HTML module (be sure to select Custom
HTML for module type).
4. Select jtouch-footer position.
5. Click Save.

The following is an example of a custom HTML footer.

6.7 Enabling Horizontal Scrolling for Content Overflow

To enable a horizontal scrolling for pages larger than the horizontal viewing area, use
the following HTML snippet.

32

<div style="width:100%; overflow:scroll;">

<div style="width:800px;">Your content code here</div>
</div>


Adjust the width value to your preference.

Note: Not all mobile devices support the overflow feature.

6.8 Creating a Click to Call Button

To enable click to call links for the mobile browser, please refer to
http://www.mobilexweb.com/blog/click-to-call-links-mobile-browsers.

6.9 Creating a Touch Style Menu

To add a touch style menu to your content page, simply use HTML tags with special
attributes.

To create the following menu, simply create an unordered list.

Figure 41

<ul>

<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>

Then add some attributes to the <ul> tag.

<ul data-role="listview" data-theme="a">

33


Or you can simply create a button with the data-role=button.

<a href="index.html" data-role="button">Link button</a>

JTouch utilizes the jQuery Mobile framework to take advantage of its simplicity.

7 Customizing the Theme

JTouch mobile template has a CSS override functionality allowing customizations

without affecting core files. This allows Joomla! to be upgraded without worrying about
customizations being overwritten.

The CSS can be customized in 2 ways.

Customizing with jQuery Mobile ThemeRoller
Customizing the Joomla! JTouch Mobile JTouch3 template

The following sections require advanced web development knowledge.

7.1 Customizing with jQuery Mobile ThemeRoller

JTouch mobile template uses the jQuery Mobile framework to create its template. With
jQuery Mobile, you can create a new theme in just a few minutes.

There is a visual editor that makes this task very easy. Here are a few quick steps on
how to create a theme using ThemeRoller.

1. Visit http://jquerymobile.com/themeroller
2. Click on the Version and select 1.4.2. You can find out the version of current
JTouch on top of the tab Look and Feel, in JTouch template settings page.

Figure 42

34

3. Remove current swatches by clicking on Delete of each swatch panel. We just

need to design one theme.

Figure 43

35

4. Click the Inspector button to turn it on.

Figure 44

5. Now you have a very interactive interface to customize your theme.

Figure 45

6. When you are satisfied with the theme, click on the Download button.

36

Figure 46

7. Enter jtouch.mobile.custom for the Theme Name and then click on Download
Zip to download the theme.

8. Unzip the downloaded file.

Figure 47

9. Copy the file jtouch.monbile.custom.min.css to the /template/jtouch3/css
folder of your Joomla! installation and then rename the file to
jtouch.mobile.custom.css.

Figure 48

10. Go to the JTouch3 template settings page and select the corresponding theme
swatch (A is the theme swatch in this example) for both the page theme and
header theme.

37

Figure 49

38

11. Under the Advanced Parameters tab, make sure that the Compress Resources is
set to No.

Figure 50

12. Then set the jQuery Mobile CSS setting to Structure Only. This will help
minimize CSS duplication.

Figure 51

13. Save settings and your new template will be applied.

39

Figure 51

40

14. If everything looks satisfactory, remember to go back and set the Debug option to
Off. Also click the Clear Cache button to flush out all old files.

7.2 Customizing the Joomla! JTouch Mobile JTouch3 Template

The jQuery Mobile ThemeRoller updates the entire layout. Let say you want to simply
modify an individual element of your template like and H tag. To do this, follow the
following instructions.

Figure 52

1. Go to the /templates/jtouch3/css/_mytheme.css.

41

2. Rename the -mytheme.css file to mytheme.css and then open it in a plain

text/css editor, and enter your custom CSS code here.

3. Save the changes and go back to the mobile site and see the changes.

Before

After

8 Things to Know
8.1 Compatibility Issues

JTouch mobile template requires jQuery/jQuery Mobile libraries which may not
be compatible with all of your installed extensions. Common issues would be
jQuery conflicts (i.e. MooTools and jQuery).
JTouch uses the latest web technologies, HTML5 and CSS3, which works well on
most major latest released browsers. It will not work on old browsers like IE7,
Firefox 3. It may have issues running on slow CPU devices.
Make sure that the browsers support JavaScript.
JTouch mobile template is optimized for current releases of compatible mobile
operating systems.
The following is a list of Joomla! extensions officially supported by JTouch mobile
template.
1.
2.
3.
4.
5.
6.

42

com_content: section, front-page, category, and article layouts

com_contact: category & contact layouts
com_search: form and results layouts
com_user: all layouts
mod_login
mod_search: search form

7. mod_articles_news: add slide-show mode

8. com_kunena: Kunena 3.0, download its layout from a separate package.
For more information, please go to
http://www.griddydesigns.com/downloads/member-downloads/jt-
mobile-kunena-2-template
9. jComments: Requires mobile layout from a separate package which is only
available for Platinum members.

Note: There have been some positive reports that the JTouch3 template works well
with sh404SEF and uddeIM extensions.

8.2 jQuery & jQuery Mobile

The JTouch3 template was built based on jQuery 1.9+ and jQuery Mobile 1.4+. JTouch
Mobile will continue to update the platform as these 2 frameworks evolve. Because
jQuery conflict is a common issue when sites have multiple modules using jQuery,
JTouch built in the option to load or unload its library. You can do this by going to the
JTouch template settings page and under the Advanced Parameters tab. set Use Default
jQuery to No.

9 Open Source

JTouch3 is a free and open source project, released under the GPL 2 license. You are free
to use it, customize it, and redistribute it without permission from the author; however,
we ask that you keep the license and authors names and notes in the JTouch3 source
code. We thank you for your support and we will continue to work on improving and
making this the best mobile solution for the Joomla! platform.

The following are useful resources when using or customizing the JTouch3 template.

Learn more about jQuery Mobile: http://jquerymobile.com
Design and customize the JTouch3 theme: http://jquerymobile.com/themeroller

For basic support, please feel free to post it on our forum at
http://www.griddydesigns.com/forum.

10 Professional Services

We know that there may be times when advanced professional services is needed to
meet some of the more complex requirements. Griddy Designs offers professional
services at very reasonable rates. We welcome developers or companies at any level.
We are very skilled and what we do and using our professional services also supports
our open source endeavors. If there is a need for our services, please feel free to contact
us at proservices@griddydesigns.com.

43

Note: Please do not send support questions to the above email address. You can post
your support questions or search for answers on our forum. For support requirements
higher than our basic level, please consider subscribing to our membership programs.

11 FAQs
Q: Why do I see the mobile version on a desktop browser instead of the desktop
version?

A. If you previewed the mobile site in the template manager and did not click on the top
bar of that preview window to close it, then the web browser for that computer that you
are on will now see the mobile version of the site. To get the desktop version back on that
computer, simply go back to the JTouch Mobile template and click on Preview Mobile
Version under the Look and Feel section. This time, be sure to click on the top bar of the
preview window to close it. This will restore the desktop version for the web browser on
that computer.


Q: Where is the Switch to Desktop button?

A: The Switch to Desktop button is display at the jtouch-menu position. This means that
the JTouch Mobile template requires a module assigned to this position to display this
button. If you are adding a menu to call this module, please refer to the Adding a Custom
Menu section of this document.


Q: Why is loading the mobile site so slow when browsing for the first time or
every time I make a change to the JTouch Mobile template settings?

A: Starting with JTouch Mobile 2.5.20, a cache folder was created and used as a buffer for
CSS and JavaScript files. This caching folder is located at /cache/jtouch3. It will take a
little longer for the first time to merge files, compress the content, and save it to the cache
folder. This is also true when a change in the JTouch Mobile template settings is made to
ensure the latest settings are being used. Once the cache is in place, subsequent visits will
be faster.

Q: Why do I not see the theme and style changes on my mobile device?

A: Make sure your /cache folder is writable (permission 775). You can also try clearing
your cache under the Advanced Parameters tab of the JTouch Mobile template.

44