Sunteți pe pagina 1din 44

JTouch Mobile Extension for Joomla! User Guide

A Mobilization Plugin & Touch Friendly Template for Joomla! 3

Author: Huy Nguyen Co - Author: John Nguyen

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

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 det ails about membership benefits, please visit http://www. griddydesigns.com /membership.html

Table of C ontents

1

ABOUT THIS DOCUMENT

4

2

INTRODUCTION

4

3

REQUIREMENTS

4

4

INSTALLING

5

4.1

I NSTALLING THE JT OUCH M OBILE E XTENSION

5

4.2

C ONFIGURING P LUGIN S ETTINGS

6

4.3

C ONFIGURING T EMPLATE S ETTINGS

9

5

UPGRADING AND UNINST ALLING

25

5.1

U

PGRADING

25

5.2

U

NINSTALLING

25

6

CUSTOMIZING THE JTOU CH MOBILE TEMPLATE

26

6.1

C HANGING THE H EADER B ANNER L OGO

27

6.2

A DDING A C USTOMIZED M ENU

28

6.3

A DDING A S WITCH TO M OBILE B UTTON

29

6.4

C REATING A N AVIGATION M ENU WITH I CON

29

6.5

C REATING A P ANEL

32

6.6

C REATING A F OOTER M ENU

32

6.7

E NABLING H ORIZONTAL S CROLLING FOR C ONTENT O VERFLOW

32

6.8

C REATING A C LICK TO C ALL B UTTON

33

6.9

C REATING A T OUCH S TYLE M ENU

33

7

CUSTOMIZING THE THEM E

34

7.1

C USTOMIZING WITH J Q UERY M OBILE T HEME R OLLER

34

7.2

C USTOMIZING THE J OO MLA ! JT OUCH M OBILE JT OUCH 3 T EMPLATE

41

8

THINGS TO KNOW

42

8.1

C OMPATIBILITY I SSUES

42

8.2

J Q UERY & J Q UERY M OBILE

43

9

OPEN SOURCE

43

10

PROFESSIONAL SERVICE S

43

11

FAQS

44

1

About This D ocument

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 wa s 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! ex stensions like Kunena 3. x, VirtueMart 2.x, and jCommen ts 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 inst all 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 v ersions were used when this document was written .

Joomla 3.3.0

JTouch Mobile 3.2 .0 -beta.2

j Query Mobile 1.4.2

4 Install ing

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 Install ing 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! a dmin.

2. Go to Extensions > Extension Manager.

3. Under the Install section, b rowse to the file pak_jt ouch 3 .zip that was extracted from the download earlier and then click on the Upload & Install button to install the package .

the Upload & Install button to install the package . Figure 1 The following message will

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 JTouc h mobile template, the

Figure 2

4.2 Configuring Plugin Settings

To start using the JTouc h mobile template, the JTouch3 plugin must be enabled.

1. Go to Menu > Extensions > Plugin.

2. S earch 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 Detect ion section , set the Enable Template Switcher to “Yes”. This will automatically switch the webs ite 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

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 mob ile site home page, select “As desktop” for Mobile Home Page option.

[Mobile Ou t put Tab ]

Remove scripts : You can enter the script file name or relative path of the

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/jtma-

style.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.

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.

to the <head> tag. Pl ease enter 1 path per line. Desktop Components : Enter the

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 S ettings

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 setting s 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

[Look and Feel Tab ]

[ Look and Feel Tab ] Link Color: Set the link color here. These settings will

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 heading s: 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.

. 3. Click on the Quick Use icon 4. Go to section 3 and you
.
.

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.

Kite+One is the font family in this example. 5. Enter the name Kite+One in the Google

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

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

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 fix ed header, flip or turn effects .

[Look and Feel Tab Cont’d]

[Look and Feel Tab Cont’d] Main Banner URL : This is the URL to the image

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 pi x els.

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

banner is loaded to the jtouch - banner position . Header Theme : Select the color

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.

Header Button : Select the layout of your header buttons: Text an d Image, Only

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

Show Back Button: Show or hide a B ack 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 Cont’d]

screen while scrolling through page. [Look and Feel Tab Cont’d] Panel Type: Select the panel type

Panel Type: Select the panel type .

Overlay

• Reveal • Push 14

Reveal

• Reveal • Push 14

Push

Note: See it in action at http://demos.jquerymobile.com/1.4.2/panel Swipe to Open Panel : Select Yes to

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 B utton: No Display, On Top of the Menu Page, or At Bottom of the Menu Page. The b utton 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.

Desktop P age : If you have enabled the desktop/mobil e template switching, the desktop

Desktop P age: If you have enabled the desktop/mobil e 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.

can be redirected to another page from the dropdown list. From the previous 2 picture s

From the previous 2 pictures above, the Switch to Desktop button is set to display at the top of the Menu screen. I f the site visitor clicks on this button, he or she will be redirect ed to the Forum p age.

The mobile site can be pre viewed interactively at any time by cl icking on the Preview Mobile Version button.

. The mobile site can be pre viewed interactively at any time by cl icking on
Important! JTouch3 can “ remember ” your last viewing mode (i.e. desktop or mobile). If

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 .

[Icons & iOS Devices Tab ]

[Icons & iOS Device s Tab ] Add to Home Screen : Select “Yes” to display

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.

the website icon has not been added to the home screen. Figure 17 You can change

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 t hat 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.

If y ou decide to create a different folder to store yo ur customize icons

If y ou 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”.

the icons are located in a folder named “myicons”. Icon on Header Bar : You can

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:

bar by entering the icon names. Please visit http://api.jquerymobile.com/icons for more icon options. Default Icons: 19
bar by entering the icon names. Please visit http://api.jquerymobile.com/icons for more icon options. Default Icons: 19

[Advanced Paramet ers Tab ]

[ Advanced Paramet ers Tab ] Compress : Select No for this option to use un

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 tu rned 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 comp ressed 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 t o clear this cache.

also go to Site > Maintenance t o clear this cache. Note: Try deleting the JTouch3

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

Use Built -in jQuery: Select “Yes” to use t he jQuery library provided with the JTouch M obile template. S elect “No” if you have your own jQuery libra ry 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 Aw esome: Select “Yes” to i nclude 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 yo u have a fully customized theme. Please read the section “Customize Theme” for more info.

Show Powered B y: Select “Yes” to display a link to GriddyDesigns.com . Please support us by setting this to “Yes”. This will hel p us continue our development and maintenance for our open source mobile solution s for Joomla !.

[Advanced Parameters Tab Cont’d ]

Module Mapping : You can map existing positi ons that are used in other templates

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 'jt ouch - user1' position on the JTouch M obile template (JTouch3 ), type in 'left' in the field next to 'jt ouch - user1' . Please see figure 60 to view the available positions provided with the JTouch Mobile template.

Top: Main: Bottom:
Top:
Main:
Bottom:

[Google Settings Tab ]

[Google Settings Tab ] Use ReCaptcha : Select Yes to enable ReCaptcha. ReCaptcha Public Key :

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 enab le 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.

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. B oth 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 Uninstall ing

5.1 Upgrad ing

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 installation s or upgrade s. We recommend using the Akeeba Backup extension to perform Joomla! backups. More information can be found at http://www.akeebabackup.com.

5.2 Uninstall ing

1. Login to the Joomla! admin.

2. Go to Extensions > E xtension Manager.

3. Click on the “Manage” tab.

4. Search for keyword “ jtouch

5. S elect the 2 extensions: System - JTouch Mobile 3 Contr oller and jtouch3 , then click the “Uninstall” button on the top right to complete the uninstallation .

oller and jtouch3 , then click the “Uninstall” button on the top right to complete the

6

Customizing the JTouch Mobile Template

Modules can easily be displayed on the JTouch M obile 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 “jt ouch -“. This allows you to easily identify positions related to the JTouch Mobile template. Not all modules designed for the desk t op 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 template ’s Advanced P arameters, Module Mapping section . You may also refer to section 4.3 – Module Mapping for more information.

to section 4.3 – Module Mapping for more information. Note: There are 2 new positions, jtouch

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.

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: Main: Bottom:
Top:
Main:
Bottom:

6.1 Chang ing 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.

6.2 Adding a Customized Menu There may be cases where the desktop Joomla! menu has

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.

displayed instead of the one used for the desktop template. To create a custom menu for

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

1. Go to Men us > 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.

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

parameters are located under the Module tab of the module. Make sure that you select “jtouch

Make sure that you select “jtouch -menu” for the P osition .

that you select “jtouch -menu” for the P osition . Set Start Level to 1, End

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

6.3 Add ing 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.

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. U nder the Link Type Options, Select image for the Link Image field. See Figure 61.

Module Tab:

in your new menu. U nde r the Link Type Options, Select image for the Link

Advanced Tab:

Advanced T ab: The result of this configuration should look similar to the following image. Notes:

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

configuration should look similar to the following image. Notes: Icons will appear if the Link 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.

6.5

Creating a Panel

To create a Panel, perform the following tasks.

1. Go to Extensions > Template Manager.

2. Click on the JTouch3 templa te 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.

module placed in the “jtouch- left - panel” position. 6.6 Creating a Footer Menu To c

6.6 Creating a Footer Menu

To c reate 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.

Save. Th e following is an example of a custom HTML footer. 6.7 Enabling Horizontal Scrolling

6.7 Enabling Horizontal Scrolling for Content Overflow

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

<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 B utton

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 M enu

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

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

create the following menu, simply create an unordered list. Figure 41 <ul> <li><a

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">

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 simpl icity.

7 Customizing the T heme

JTouch mobile template has a CSS override functionality allowing customizations without affecting core files. This allows Joomla! to be upgraded without worry ing about customizations being overwritten.

The CSS can be customized in 2 ways.

Customizing with jQuery Mobile ThemeRoller

Customizing the Joomla ! JTouch Mobile JTouch3 t emplate

The following sections require advanced web development knowledge.

7.1 Customizing with jQuery Mobile T heme Roller

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.

the version of current JTouch on top of the tab “Look and Feel”, in JTouch template

Figure 42

3.

Remove current swatches by clicking on “Delete” of each swatch panel . W e just need to design one theme.

current swatches by clicking on “Delete” of each swatch panel . W e just need to

Figure 43

4.

Click the “Inspect or” button to turn it on.

4. Click the “Inspect or” button to turn it on. Figure 44 5. Now you have

Figure 44

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

have a very interactive interface to customize your theme. Figure 45 6. When you are satisfied

Figure 45

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

with the theme , click on the “Download” button. Figure 46 7. E nter “ jt

Figure 46

7. E nter “ jt ouch .mobile. custom ” for the Theme Name and then click on Download Zip to download the them e.

8.

Unzip the downloaded file.

8. Unzip the downloaded file. Figure 4 7 9. Copy the file “ jt ouch .monbile.

Figure 4 7

9. Copy the file “ jt ouch .monbile. custom.min. css” to the “/template/ jt ouch3 / cssfolder of your Joomla ! installation and then rename the file to

jt ouch .mobile. custom. css” .

the file to “ jt ouch .mobile. custom. css ” . Figure 48 10. Go to

Figure 48

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

Figure 49 38

Figure 49

11.

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

sure that the Compress Resources is set to “ No ” . Figure 50 12. Then

Figure 50

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

Only”. This will help minimize CSS duplication. Figure 51 13. Save settings and your new template

Figure 51

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

Figure 51 14. If everything looks satisfactory , remember to go back and set the

Figure 51

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.

H tag . To do this, follow the following instructions. Figure 52 1. Go to the

Figure 52

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

To do this, follow the following instructions. Figure 52 1. Go to the /templates/ jtouch3 /

2.

R ename the “ - mytheme.cssfile to “ mytheme.css and then open it in a plain text / css editor, and enter your custom CSS code here.

/ css editor, and enter your custom CSS code here. 3. Save the changes and go

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

and go back to the mobile site and see the changes. Before 8 Things to Know

Before

8 Things to Know

8.1 Compatibility I ssues

changes. Before 8 Things to Know 8.1 Compatibility I ssues After • JTouch mobile template requires

After

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 tech nologies, 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. com_content: section, front - page, category, and article layouts

2. com_contact: category & contact layouts

3. com_search: form and results layouts

4. com_user: all layouts

5. mod_login

6. mod_search: search form

7. mod_articles_news: add slide- show mode

8. com_kunena: Kunena 3.0, download its layout from a separate pa ckage. 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 work s 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 Op en 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 author ’s names and notes in the JTouch3 source code. We thank you for you r 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 e ndeavors. If there is a need for our services, please feel free to contact us at proservices@griddydesigns.com.

Note: Please do not send support questions to the above email address. You can post you r suppor t 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 P review 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 S witch to Desktop button?

A: The Switch to Desktop but ton is display at the jt ouch -menu position. This means that the JTouch Mobile template r equires 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 : W hy 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 setting s 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.