JTouch Mobile Extension for Joomla! User Guide A Mobilization Plugin & Touch Friendly Template for Joomla! 2.5

Author: Huy Nguyen Co-Author: John Nguyen

2

ABSTRACT The JTouch Mobile extension was developed by Griddy Designs. This extension was created for Joomla! 2.5 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.

3

Table of Contents

1 ABOUT THIS DOCUMENT 4 2 INTRODUCTION 4 3 REQUIREMENTS 4 4 INSTALLING 5 4.1 INSTALLING THE JTOUCH MOBILE EXTENSION 5 4.2 CONFIGURING PLUGIN SETTINGS 6 4.3 CONFIGURING TEMPLATE SETTINGS 8 5 UPGRADING AND UNINSTALLING 22 5.1 UPGRADING 22 5.2 UNINSTALLING 22 6 CUSTOMIZING THE JTOUCH MOBILE TEMPLATE 22 6.1 CHANGING THE HEADER BANNER LOGO 24 6.2 DISPLAYING VIRTUEMART MODULES AS TABS ON THE CART PAGE (FOR GOLD AND PLATINUM MEMBERS ONLY) 25 6.3 ADDING A CUSTOMIZED MENU 25 6.4 ADDING A SWITCH TO MOBILE BUTTON 27 6.5 CREATING A NAVIGATION MENU WITH ICON 28 6.6 CREATING A PANEL 29 6.7 CREATING A FOOTER MENU 30 6.8 CREATING A SWIPABLE BANNER SLIDER WITH ARTICLES 30 6.9 CREATING AN ARTICLES CATEGORY ARTICLE LISTING WITH THUMBNAILS 31 6.10 ENABLING HORIZONTAL SCROLLING FOR CONTENT OVERFLOW 32 6.11 CREATING A CLICK TO CALL BUTTON 32 6.12 CREATING A TOUCH STYLE MENU 32 7 CUSTOMIZING THE THEME 33 7.1 CUSTOMIZING WITH JQUERY MOBILE THEMEROLLER 33 7.2 CUSTOMIZING THE JOOMLA! JTOUCH MOBILE JTOUCH25 TEMPLATE 38 8 THINGS TO KNOW 39 8.1 COMPATIBILITY ISSUES 39 8.2 JQUERY & JQUERY MOBILE 40 9 OPEN SOURCE 40 10 PROFESSIONAL SERVICES 40 11 FAQS 41

4

1 About This Document This document describes the basic steps to install and setup the JTouch Mobile extension for Joomla! 2.5.x. It also provides some tips on how to use some of its key features. 2 Introduction The JTouch Mobile extension was developed by Griddy Designs based on the jQuery Mobile framework. It was designed to provide an easy way to mobilize Joomla! 2.5.x 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! extensions like Kunena 2.x, VirtueMart 2.x, and jComments 2.x. Key features:

Provides a jQuery Mobile based plugin and mobile template for Joomla! 2.5.x 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! 2.5.x If you are using VirtueMart, it must be version 2.0.18+. The VirtueMart mobile template is available to Gold and Platinum Members Only. If you are using Kunena, it must be version 2.0.4+. The Kunena mobile template is available to Gold and Platinum Members Only. Note: The following versions were used when this document was written.

Joomla 2.5.9 JTouch Mobile 2.5.27 jQuery Mobile 1.3.1 final VirtueMart 2.0.20

5

Kunena 2.0.4

4 Installing First, download the latest release of the JTouch Mobile Extension at http://www.griddydesigns.com. If you are reading this document now, that probably means successfully unzipped the downloaded package. We highly recommend reading this document before proceeding. There are 3 main steps to get the JTouch Mobile extension up and running. 1. Install the JTouch Mobile extension (pak_jtouch25.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 Beginning with JTouch Mobile version 2.5.20, the installation only requires uploading the pak_jouch25.zip file via the Joomla! Extension Manager. 1. Log in to your Joomla! admin. 2. Go to Extensions > Extension Manager. 3. Under the Install section, browse to the file pak_jtouch25.zip that was extracted from the download earlier and then click on the Upload & Install button to install the package (see figure 1).

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 for the next 2 steps to be performed to complete the installation (see figure 2).

6

Figure 2 4.2 Configuring Plugin Settings To start using the JTouch mobile template, the JTouch25 plugin must be enabled.

1. Go to Menu > Extensions > Plugin. 2. Search for the keyword JTouch. 3. Click on the JTouch25 Mobile Controller plugin to configure its settings. 4. Under the Details page, set the Status to Enabled. Set Access to Public.

[Mobile Detect Tab] Under the Mobile Detect section, set the Enable Template Switcher to Yes. This will automatically switch the website template to the JTouch25 template for mobile devices. Set Switch to Template setting to jtouch25 (see figure 3). To use the JTouch25 template for tablets, set Include Tablets to Yes. For Mobile Home Page, select Use the following page and select the desired page (see figure 4).

7

Figure 3

Figure 4

Note: If you have another template for your mobile site other than the jtouch25 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.

[For JTouch25 Template Tab]

Figure 5 Only JTouch Scripts: Select Yes to only load the CSS and JavaScript resources provided by the JTouch Mobile template. Remove MooTools: If your site requires MooTools, select No here. If your site has been customized to not use MooTools at all, then this option can be set to Yes to prevent JavaScript conflicts.

8

Note: Starting with JTouch 2.5.10, a .noConflict() option was added to all JTouch core scripts. JTouch can now interoperate with extensions or modules that utilize MooTools without conflict.

[Cache Control Tab]

Figure 6 Page caching allows the web server to save snapshots of pages and uses them when serving same pages again without having to reload them entirely from the web server. This significantly improves the performance of the web site and reduces the workload of the server. Starting with JTouch 2.5.24, a separate caching system was created to cache the mobile template. Joomla! comes with its own caching system configurable in the Global Configuration which will cache for the desktop template. If the JTouch caching system is enabled, the Joomla! caching system must be disabled for it to function properly. Enable Cache Control: Select Yes to enable caching. Default is No. Use Browser Caching: Select Yes to enable local browser caching. Default is "No". 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. From here, click on jtouch25 under the style column to open its settings page.

Note: Another way to access this page is by going to Extensions > Template Manager.

Figure 7

9

[Look and Feel Tab]

Figure 8 Page Theme: Select a built-in theme for the mobile website. There are 5 pre-defined color swatches named from A to E.

10

Figure 9

Notes: See how you can create more swatches by visiting http://jquerymobile.com/demos/1.1.0/docs/api/themes.html. Swatches F and G are used in the case where a custom designed theme named F and G were created using the jQuery Mobile ThemeRoller web app. You can find more information about customizing your own theme by reading the Customizing with jQuery Mobile ThemeRoller

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.

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.

Figure 10 Header Theme: Select the color sets for the main header bar.

11

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

Figure 11 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. Show Panel: Select Yes to display panel widget. Panel Type: Select the panel type.

Overlay

Figure 56

12

Reveal

Figure 57

Push

Figure 58 Note: See it in action at http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/index.html.

13

Switch to Desktop Button: Show or hide Switch to Desktop button. The button can be displayed on the top or bottom of the menu page. This button allows site visitor to toggle between desktop and mobile version of website.

Figure 12 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.

Figure 13 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 VirtueMart page. The mobile site can be viewed interactively at any time by clicking on the Preview Mobile Version button.

14

Figure 14

Figure 15

Important! JTouch25 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 allow JTouch25 to switch back to the desktop view, always 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.

15

[iOS Devices Tab]

Figure 16 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/jtouch25 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 replace them by uploading via FTP.

Figure 18

16

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

Figure 19 [Advanced Parameters Tabs]

Figure 20

17

Turn off Pages: You may want to turn off the display of components from your home page or any other page. Just enter the ID or IDs of the menu tem that links to the component that you want to turn off or unload on mobile template, separated by commas (i.e. 1,3,20). To find the menu item ID, do the following. 1. Go to Menus. 2. Click on any menu that contains the menu item or items you want to turn off on mobile template. 3. The last column on the right contains the menu ids. Debug: Turn on this option to use un-compressed JavaScript and CSS files and gather diagnostic 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 has been complete.

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 jtouch25 cache folder (/cache/jtouch25).

Figure 21 To clear the JTouch mobile template cache, go to the JTouch25 template and under the Advanced Parameters, click the Clear Cache button. You may also go to Site > Maintenance to clear this cache. Figure 22 Note: Try deleting the JTouch25 cache when template style changes are not updating.

Use Default 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

18

you decide to use the jQuery that is already installed, please make sure that the jQuery version is 1.7.1 or higher. JQM CSS: Select which type of CSS you would like to use for your mobile website, full version (FULL) or structure only (STRUCTURE ONLY).

19

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 endeavors and provide the best open source website mobile solution for Joomla!. 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 (jtouch25), 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. Top:

Bottom:

Main:

Figure 60

20

[Google Settings Tab]

Figure 23 Use ReCaptcha: If you are using ReCaptcha on the login/registration forms, please enable this option and re-enter the public key from Google ReCaptcha. Use 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 positions.

Note: This option only applies to the JTouch Mobile template and not 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.

21

[Other Extensions Tab]

Figure 24 For VirtueMart 2 (2.0.11 or higher) THIS SECTION IS ONLY AVAILABLE FOR GOLD AND PLATINUM MEMBERS Responsive Layout: Select Yes if your current template of VirtueMart does not display well on mobile devices. Then download our VirtueMart mobile template (ONLY available for Gold and Platinum Members). Follow the instructions on how to install and mobilize your shopping cart.

Notes: The VirtueMart mobile template is only available for Gold and Platinum members only. Check and make sure that you have the following highlighted folders.

Figure 25 After making all the desired settings for your JTouch Mobile template, please remember to click Save or Save & Close to save and apply the settings. The JTouch Mobile template will now be displayed on mobile devices.

Note: If you do not see the JTouch Mobile template on mobile devices, make sure that the JTouch25 Mobile Controller plugin is enabled.

22

5 Upgrading and Uninstalling 5.1 Upgrading With Joomla! 2.5, 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 extension 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 AkeebaBackup extension to perform Joomla! backups. More information can be found at http://www.akeebabackup.com. Note: If you are upgrading from JTouch Mobile 2.5.12 to version 2.5.20, we highly recommend uninstalling JTouch Mobile first and then reinstalling the new version.

5.2 Uninstalling 1. From Joomla! admin menu, go to Extensions > Extension Manager. 2. Click on the Manage tab. 3. Search for keyword JTouch25. 4. Select the 2 extensions and click the Uninstall button on the top right to complete the uninstallation.

Figure 26

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 designed for 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

23

template positions. You may choose to use the default JTouch position names are you can map existing template positions to the mobile template. To edit or re-map the JTouch Mobile template positions, go to the JTouch25 templates Advanced Parameters, Module Mapping section. You may also refer to section 4.3 Module Mapping for more information.

Figure 27

24

See figure 28 for positions information. The filename for this diagram is jtouch25.template.positions.jpg and it is included in the JTouch Mobile extension download package. Top:

Bottom:

Main:

Figure 28

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.

25

Figure 29

6.2 Displaying VirtueMart Modules as Tabs on the Cart Page (For Gold and Platinum Members Only) VirtueMart provides 6 modules with their shopping cart extensions for Joomla!. These modules are included in the com_virtuemart.2.0.x_ext_aio.tar.gz file. Be sure to install it after you install the main VirtueMart extension. To display any of the following VirtueMart modules as tabs on the Cart page, simply set their positions to jtouch-tools. Because of the limited space on mobile devices, it is not recommended to have more than 3 tabs.

VM Manufacturer VM Shopping Cart VM Search in Shop VM Featured Products VM Category VM - Currencies

Figure 30 6.3 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.

26

Figure 31 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.

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 unpublish the previous mobile menu module in the module manager.

27

Figure 32

Figure 33 6.4 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 If you are using Joomla! 1.5, then X is the name of JTouch template. http://www.your-domain.com/index.php?jtpl=jtouch If you are using Joomla! 2.5, then X is the ID of our jtouch25 template. You can find the ID on the Template Manager list on the far right column.

28

http://www.your-domain.com/index.php?jtpl=118 6.5 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 (be sure to select Menu for module type). 4. Select jtouch-nav position. 5. Under Basic Options, select the JTouch menu. 6. Set Start Level to 1. 7. Set End Level to 1. 8. Set Show Sub-menu Items to No. 9. Under Advanced Options, select jtouch-nav for Alternate Layout 10. Click Save. 11. 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 Menu settings:

Figure 34 On the Advanced Options tab:

Figure 35

29

Menu Item settings:

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

Figure 36

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.6 Creating a Panel To create a Panel, perform the following tasks. 1. Go to Extensions > Template Manager. 2. Click on the jtouch25 template under the Style column. 3. In the Look and Feel section, enable the Panel by setting the Show Panel option to On the LEFT or On the RIGHT. 4. Select the Panel Type: Overlay, Reveal or Push 5. Place any existing module or create a new module and set the position to jtouch-panel. See Figure 59 to see an example of the Joomla! login module placed in the jtouch-panel position.

30

Figure 59

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

Figure 37 6.8 Creating a Swipable Banner Slider with Articles To create a swipe slideshow article, perform the following tasks. 1. Got to Extensions > Module Manager. 2. Click on New to create a new Articles Newsflash module (be sure to select Articles - Newsflash for module type). 3. Enter title and select the jtouch-user1 position. 4. Under Basic Options, select the category for this module to include in the slideshow. Any articles in the selected category will utilize this newsflash module. 5. Under the Advanced Options tab, select jtouch-slideshow for the Alternative Layout option. 6. Create articles and add them to the category selected in the newsflash module. Be sure to have an image in the Article Text field.

31

Figure 38

Figure 39. Swipe left or right to see slide content. 6.9 Creating an Articles Category Article Listing with Thumbnails To display a list of articles with thumbnails on the left, do the following. 1. Go to Extensions > Module Manager. 2. Create a new Articles Category module. 3. Select jtouch-user1 or jtouch-user2 position. 4. Under Filtering Options tab, select the article category to display. 5. Under the Advanced Options tab of the module settings, set jtouch-list as the Alternative Layout.

32

Figure 40. Alternative layout is set to jtouch-list

6.10 Enabling Horizontal Scrolling for Content Overflow To enable a horizontal scrolling for pages larger than the horizontal viewing area, use the following JavaScript snippet. JavaScript code here Adjust the width value to your preference.

Note: Not all mobile devices support the overflow feature.

6.11 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.12 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.

33

Figure 41

Acura Audi BMW Then add some attributes to the tag. Or you can simply create a button with the data-role=button. Link button 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 JTouch25 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.

34

First, you should understand how jQuery Mobile builds a new theme. For more information please go to http://jquerymobile.com/demos/1.2.0/docs/api/themes.html. 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.3.0-rc.1.

Figure 42 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 click the element and change its options to have a new layout.

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

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

36

8. Unzip the downloaded file.

Figure 47 9. Copy the file jtouchcustom.min.css to the /template/jtouch25/css folder of your Joomla! installation and then rename the file to jtouch-custom.css.

Figure 48 10. Go to the jtouch25 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.

Figure 49

37

11. Under the Advanced Parameters tab, make sure that the Debug option is set to On.

Figure 50 12. If you fully customized all swatches, from A to E, then set the JQM CSS setting to Structure Only. This will help minimize CSS duplication.

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 Debug option to Off. Also click the Clear Cache button to flush out all old files.

38

7.2 Customizing the Joomla! JTouch Mobile JTouch25 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 (see figure 52). To do this, follow the following instructions.

Figure 52 1. Go to the /templates/jtouch25/css/-customize/mytheme.css.

Figure 53

39

2. Rename the -customize folder to customize and then open the file mythem.css in a plain text/css editor, and enter your custom CSS code here.

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

Before After

Figure 55 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. 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

40

5. mod_login 6. mod_search: search form 7. mod_articles_news: add slide-show mode 8. com_virtuemart: VirtueMart 2 (VirtueMart 1 is not supported) 9. com_kunena: Kunena 1.7 and 2.0, download its layout from a separate package. For more information, please go to http://www.griddydesigns.com/downloads/jtouch-ex/jtouch-ex-kunena-template. 10. jComments: Requires mobile layout from a separate package which is only available for Platinum members. Note: There has been some positive reports that the JTouch25 template works well with sh404SEF and uddeIM extensions.

8.2 jQuery & jQuery Mobile The JTouch25 template was built based on jQuery 1.82 and jQuery Mobile 1.2.0. 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 JTouch25 is a free and open source project, released under the GPL 3 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 JTouch25 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 JTouch25 template.

Learn more about jQuery Mobile: http://jquerymobile.com Design and customize the JTouch25 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. JTouch Mobile, a Griddy Designs company, offers professional services at very reasonable rates. We welcome developers

41

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. 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/jtouch25. 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.