39
JTouch for Joomla! User Guide A Mobile & Touch Friendly Template for Joomla! 2.5 Author: Huy Nguyen CoAuthor: John Nguyen
| Date post: | 28-Dec-2015 |
| Category: |
Documents |
| Upload: | gnujavasergio |
| View: | 36 times |
| Download: | 5 times |
JTouch for Joomla! User Guide A Mobile & Touch Friendly Template for Joomla! 2.5
Author: Huy Nguyen Co-‐Author: John Nguyen
2
ABSTRACT The JTouch mobile template was developed by JTouch Mobile, a Griddy Designs company. It was created for web developers who use Joomla! 2.5 to quickly install and utilize a responsive template for mobile devices. This document will also explain how web developers can customize the JTouch mobile template to their liking or their customers’ requirements. The JTouch mobile template is an open source project and was developed under the GPL 2 license. Please feel free to use, modify or redistribute. The JTouch Mobile 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.jtouchmobile.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 FOR JOOMLA MOBILE TEMPLATE PACKAGE 5 4.2 CONFIGURING PLUGIN SETTINGS 6 4.3 CONFIGURING TEMPLATE SETTINGS 8
5 UPGRADING AND UNINSTALLING 20 5.1 UPGRADING 20 5.2 UNINSTALLING 20
6 CUSTOMIZING THE JTOUCH MOBILE TEMPLATE 20 6.1 CHANGING THE HEADER BANNER LOGO 22 6.2 DISPLAYING VIRTUEMART MODULES AS TABS ON THE CART PAGE (FOR PLATINUM MEMBERS ONLY) 23 6.3 ADDING A CUSTOMIZED MENU 23 6.4 ADDING A SWITCH TO MOBILE BUTTON 25 6.5 CREATING A NAVIGATION MENU WITH ICON 26 6.6 CREATING A PANEL 27 6.7 CREATING A FOOTER MENU 28 6.8 CREATING A SWIPE SLIDE SHOW ARTICLE 28 6.9 CREATING AN ARTICLE LISTING WITH THUMBNAILS 29 6.10 ENABLING HORIZONTAL SCROLLING FOR CONTENT OVERFLOW 29 6.11 CREATING A CLICK TO CALL BUTTON 30 6.12 CREATING A TOUCH STYLE MENU 30
7 CUSTOMIZING THE THEME 31 7.1 CUSTOMIZING WITH JQUERY MOBILE THEMEROLLER 31 7.2 CUSTOMIZING THE JOOMLA! JTOUCH25 TEMPLATE 36
8 THINGS TO KNOW 37 8.1 COMPATIBILITY ISSUES 37 8.2 JQUERY & JQUERY MOBILE 38
9 OPEN SOURCE 38
10 PROFESSIONAL SERVICES 38
11 FAQS 39
4
1 About This Document This document describes basic steps to install and setup the JTouch mobile template for Joomla! 2.5.x. It also provides some tips on how to use some of its key features.
2 Introduction The JTouch mobile template is based off the jQuery Mobile framework. It is a Joomla! 2.5.x template designed and optimized for mobile devices. This template was developed to function like any other Joomla! template which allows developers that are familiar with the Joomla! template structure to quickly learn how to customize it. Key features:
• Provides 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.JTouchMobile.com. Follow us on Twitter at https://www.twitter.com/jtouchmobile. For professional services and business development, please contact us at [email protected].
3 Requirements The following requirements must be met to install the JTouch mobile template.
• Website running Joomla! 2.5.x • If you are using VirtueMart, it must be version 2.0.18+ (For Platinum Members
Only) • If you are using Kunena, it must be version 2.0.4+ (For Gold and Platinum
Members Only)
Note: The following versions were used when this document was written. • Joomla 2.5.9 • JTouch25 2.5.27 • jQuery Mobile 1.3.1 final • VirtueMart 2.0.20 • Kunena 2.0.4
5
4 Installing First, download the latest release of the JTouch mobile template by clicking here. Unzip the downloaded package and read the JTouch Mobile Template User Guide document before proceeding with the installation. There are 3 main steps to get the JTouch mobile template up and running.
1. Install JTouch mobile template package (pak_jtouch25.zip) 2. Configure plugin settings 3. Configure template settings
4.1 Installing the JTouch for Joomla Mobile Template Package Beginning with JTouch version 2.5.20, the installation only requires uploading the pak_jouch25.zip file via the Joomla! Extension Manager. Log in to your Joomla! admin. Go to Extensions > Extension Manager. Under the Install section, browse to the file pak_jtouch25.zip that was downloaded earlier and then click on the Upload & Install button to install the package (see figure 1).
Figure 1 The following message will displayed upon successful installation. Please pay close attention to the “next steps” section of the message. There are 2 links for the next 2 steps to be performed to complete the installation (see figure 2).
Figure 2
6
4.2 Configuring Plugin Settings To start using the JTouch mobile template, the JTouch25 plugin must be enabled. Go to Menu > Extensions > Plugin and search for the keyword “JTouch”. Click on the JTouch25 Mobile Controller plugin to configure its settings. 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 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).
Figure 3
7
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 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 use 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 defined color swatches named from A to E.
10
Figure 9
Notes: See how you can create more swatches by clicking here. 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 link or absolute link (i.e. images/mybanner.png or http://www.jtouchmobile.com/images/mybanner.png).
Notes: Recommended size for image that fits well for most mobile devices is 300 x 70 px.
Display Header: Show or hide the top banner of the mobile website. This banner calls the jtouch-‐banner position.
Figure 10 Header Theme: Select the color sets 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.
11
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 yet.
Figure 17 You can change the default JTouch 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 icons, simply create new ones with the same attributes (i.e. 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 Item that belongs to the component that you want to turn off (unload), separated by commas (i.e. 1,3,20). 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 is complete.
Important! Since version 2.5.20, a caching feature was added to the JTouch 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 the Site Maintenance tab 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 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).
18
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 JTouchMobile.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: Enter a position alias to map your desktop modules to mobile. For example: if you want to display modules placed on the 'left' position of your desktop template to the 'jtouch-‐user1' position of JTouch25, enter 'left' to the 'JTouch-‐user1' input box. [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. JTouch25 does not use a ReCaptcha plugin. This is why you need to re-‐enter the key here. Use Google Analytics: You can add your Google Analytics code (account and domain) to enable tracking by using 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.
19
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. [Other Extensions Tab]
Figure 24 For VirtueMart 2 (2.0.11 or higher) Responsive Layout: Select “Yes” if your current template of VirtueMart does not display well on mobile devices. Then download our extra template for VirtueMart. Follow the instructions on how to install and mobilize your shopping cart.
Notes: The VirtueMart mobilizing feature is only available for our subscribers only. Check and make sure that you have the following highlighted folders.
Figure 25 After making all the desired settings for you JTouch25 template, please remember to click Save or Save & Close to a save and apply the settings. The JTouch template will now be displayed on mobile devices.
20
Note: If you do not see the JTouch template on mobile devices, make sure that the JTouch25 – Mobile Controller plugin is enabled.
5 Upgrading and Uninstalling
5.1 Upgrading With Joomla 2.5, the upgrading process is the same as a new installation process. JTouch25 is designed to keep the previous settings from the previous template.
Important: Make sure to do a full backup before any new installations or upgrades. We recommend using the AkeebaBackup extenstion to perform Joomla! backups. More information can be found at http://www.akeebabackup.com.
Note: If you are upgrading from JTouch 2.5.12 to version 2.5.20, we highly recommend uninstalling JTouch first and then reinstalling the new version.
5.2 Uninstalling From Joomla admin menu, go to Extensions > Extension Manager. Click on the “Manage” tab. Search for keyword “JTouch25”, select the 2 extensions and click the “Uninstall” icon to complete the removal.
Figure 26
6 Customizing the JTouch Mobile Template Modules can easily be ported to the JTouch mobile template. There are currently 8 positions where modules can be placed.
Note: The JTouch mobile template positions will have the prefix “jtouch-‐“. This allows you to easily identify positions designed for the JTouch mobile template. Not
21
all modules designed for the desktop template will work with the JTouch mobile template. It is important to test all modules that being ported over to the JTouch mobile template. To edit the JTouch mobile template position names, go to the JTouch25 template’s Advanced Parameters, Module Mapping section.
Figure 27
22
See figure 28 below for position information. The filename for this diagram is jtouch25.template.positions.jpg and is included in the template 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 hosting location. Set the Main Banner path to the actual location of the new banner.
23
Figure 29
6.2 Displaying VirtueMart Modules as Tabs on the Cart Page (For Platinum Members Only)
To display the following VirtueMart modules as tabs on the Cart page, simply set their positions to jtouch-‐tools.
• VM – Categories • VM -‐ Login
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 will be displayed instead of the one used for the desktop template.
24
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 new 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. Remember to unpublish the previous mobile menu module in the module manager.
25
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 Switch to 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.
26
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 to the menu item and under the Link Type Options, upload select and image
for the Link Image field. Module Menu settings:
Figure 34 On the Advanced Options tab:
Figure 35
27
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.
6.6 Creating a Panel To create a Panel, perform the following tasks.
1. Go to Extensions > Template Manager. 2. Click on the JTouch25 templete 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.
Figure 59
28
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 Swipe Slide Show Article 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
Article -‐ 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.
Figure 38
29
Figure 39. Swipe left or right to see slide content.
6.9 Creating an Article Listing with Thumbnails To display a list of articles with thumbnails on the left, create an article module and place it in the jtouch-‐user1 or jtouch-‐user2 position. Under the Advanced Options tab of the module settings, set “jtouch-‐list” as the Alternative layout.
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.
<div style="width:100%; overflow:scroll;"> <div style="width:800px;">JavaScript code here</div>
30
</div>
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.
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”.
31
<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.
• jQuery Mobile ThemeRoller • Joomla! JTouch Template
The following sections requires 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. 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
32
3. Remove current swatches by clicking on “Delete” of each swatch panel. We just need to design one theme.
Figure 43
33
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.
34
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
35
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.
36
7.2 Customizing the Joomla! 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
37
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
38
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.jtouchmobile.com/downloads/jtouch-‐ex/jtouch-‐ex-‐kunena-‐template.
10. jComments: Requires mobile layout from a separate package which is only available for Platinum member
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 author’s 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.JTouchMobile.com/forum.
10 Professional Services We know that sometimes 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 or companies at
39
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 [email protected].
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 preview the mobile site in the template manager and did not click on the top bar of that preview window to close it, then the browser will “remember” the mobile version. To get the desktop version back, simply go back to the template and preview mobile site again, but this time, remember to click on the top bar of the preview window to close it. This will restore the desktop version on the desktop browser. Q: Where is the Switch to Desktop button? A: The Switch to Desktop button is display at the jtouch-‐menu position. This means that JTouch25 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 version for the first time or every time I make a change to the JTouch25 template settings really slow? A: Starting with JTouch 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 JTouch25 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) and you can also try clearing your cache under the Advanced Parameters tab of the JTouch25 template.
