Embed Size (px)
Citation preview
JTouch Mobile Extension for Joomla! User Guide A Mobilization Plugin & Touch Friendly Template for Joomla! 3
Author: Huy Nguyen Co-‐Author: John Nguyen
2
ABSTRACT The JTouch Mobile extension was created for Joomla! 3 website developers and administrators to quickly and easily utilize the very popular jQuery Mobile framework to create a touch friendly and responsive template for mobile devices. This extension consists of to parts, the plugin and the mobile template. This document will also explain how to configure the plugin parameters and customize the mobile template. The JTouch Mobile extension is an open source project and was developed under the GPL 2 license. Please feel free to use, modify or redistribute. The Griddy Designs team will continue to work hard to bring you quality open source products. Please support us by following us on Facebook and Twitter. To receive additional benefits and advanced support, please subscribe to our Platinum membership program. For more details about membership benefits, please visit http://www.griddydesigns.com/membership.html
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 9
5 UPGRADING AND UNINSTALLING 25 5.1 UPGRADING 25 5.2 UNINSTALLING 25
6 CUSTOMIZING THE JTOUCH MOBILE TEMPLATE 26 6.1 CHANGING THE HEADER BANNER LOGO 27 6.2 ADDING A CUSTOMIZED MENU 28 6.3 ADDING A SWITCH TO MOBILE BUTTON 29 6.4 CREATING A NAVIGATION MENU WITH ICON 29 6.5 CREATING A PANEL 32 6.6 CREATING A FOOTER MENU 32 6.7 ENABLING HORIZONTAL SCROLLING FOR CONTENT OVERFLOW 32 6.8 CREATING A CLICK TO CALL BUTTON 33 6.9 CREATING A TOUCH STYLE MENU 33
7 CUSTOMIZING THE THEME 34 7.1 CUSTOMIZING WITH JQUERY MOBILE THEMEROLLER 34 7.2 CUSTOMIZING THE JOOMLA! JTOUCH MOBILE JTOUCH3 TEMPLATE 41
8 THINGS TO KNOW 42 8.1 COMPATIBILITY ISSUES 42 8.2 JQUERY & JQUERY MOBILE 43
9 OPEN SOURCE 43
10 PROFESSIONAL SERVICES 43
11 FAQS 44
4
1 About This Document This document describes the basic steps to install and setup the JTouch Mobile extension for Joomla! 3. It also provides some tips on how to use some of its key features.
2 Introduction The JTouch Mobile extension was developed based on the jQuery Mobile framework. It was designed to provide an easy way to mobilize Joomla! 3 using the many great features of jQuery Mobile by simply using the familiar Joomla! UI (User Interface). The plugin and mobile template provided with the extension has been optimized and created for Joomla!. Griddy Designs also provides several other mobile templates for popular Joomla! exstensions like Kunena 3.x, VirtueMart 2.x, and jComments 3.x. Key features:
• Provides a jQuery Mobile based plugin and mobile template for Joomla! 3 • Utilizes HTML5 + CSS3 • Auto-‐detects mobile devices to display mobile optimized template • Built based on the jQuery Mobile framework • Open source
For more information or support, please visit our official website at http://www.griddydesigns.com. Follow us on Twitter at https://www.twitter.com/jtouchmobile. For professional services and business development, please contact us at [email protected].
3 Requirements The following requirements must be met to install the JTouch plugin and mobile template.
• Website running Joomla! 3.3.x • If you are using Kunena, it must be version 3.0.3 or above. The Kunena mobile
template is available to Gold and Platinum Members Only.
Note: The following versions were used when this document was written. • Joomla 3.3.0 • JTouch Mobile 3.2.0-‐beta.2 • jQuery Mobile 1.4.2
5
4 Installing First, download the latest release of the JTouch Mobile Extension at https://www.griddydesigns.com/jtouch-‐mobile.html. You will need to unzip the download first. There are 3 main steps to get the JTouch Mobile extension up and running.
1. Install the JTouch Mobile extension (pak_jtouch3.zip) 2. Configure plugin settings 3. Configure template settings
After completing these 3 main steps, you are on your way to setting up your mobile version of your Joomla! website!
4.1 Installing the JTouch Mobile Extension Installing the JTouch Mobile extension is the same as any other extension. Simply go to the Joomla! extension manager to upload and install. For those of you that are new to Joomla!, please follow these instructions.
1. Log in to your Joomla! admin. 2. Go to Extensions > Extension Manager. 3. Under the Install section, browse to the file pak_jtouch3.zip that was extracted
from the download earlier and then click on the Upload & Install button to install the package.
Figure 1 The following message will be displayed upon successful installation. Please pay close attention to the “next steps” section of the message. There are 2 quick links to enable the JTouch plugin and configure the mobile template (see figure 2).
6
Figure 2
4.2 Configuring Plugin Settings To start using the JTouch mobile template, the JTouch3 plugin must be enabled.
1. Go to Menu > Extensions > Plugin. 2. Search for the keyword “JTouch.” 3. Click on the System -‐ JTouch Mobile 3 Controller plugin. 4. Under the Details page, set the Status to “Enabled.” Set Access to “Public.”
[Mobile Detection Tab] Under the Mobile Detection section, set the Enable Template Switcher to “Yes”. This will automatically switch the website template to the JTouch3 template for mobile devices. Set Switch to Template setting to “jtouch3”. To use the JTouch3 template for tablets, set Include Tablets to “Yes”. For Mobile Home Page, select “Use the following page” and select the desired page.
7
Mobile Domain: Specify a FQDN (Fully Qualified Domain Domain) for your mobile site. Please remember to create a DNS record for this FQDN (eg. m.griddydesigns.com). Force Mobile Domain: Set Yes to force users from mobile devices to use the mobile domain.
Note: If you have another template for your mobile site other than the JTouch3 template, you can select it from the Switch to Template dropdown box. If you want to make the desktop template home page to be your mobile site home page, select “As desktop” for Mobile Home Page option.
[Mobile Output Tab]
8
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.
9
Example: templates/protostar/css/protostar-template.css templates/protostar/css/mystyle.css Add JS Files: Enter the full path to the JavaScript file or files that you want to add to the <head> tag. Please enter 1 path per line.
Desktop Components: Enter the components that are not displaying correctly on the mobile template. This is will output the desktop code on the mobile template instead of the JTouch code. Please enter 1 component per line. Example: com_kunena com_k2 Display Redirect Message: Select Yes to display a message when there is no mobile version available. Redirect Message: Enter redirect message.
4.3 Configuring Template Settings Click on the “Click here” link from step 1 of the welcome message above to go to your Template Manager page. Then click on JTouch3 under the style column to open its settings page.
Note: Another way to access this page is by going to Extensions > Template Manager. **Do NOT set the JTouch template as your default template.**
10
[Look and Feel Tab]
Link Color: Set the link color here. These settings will take precedence over all other CSS settings. Link Hover Color: Set the hover state color here. These settings will take precedence over all other CSS settings Google Font for Heading: Enter the Google font family to use for headings: h1, h2, h3, h4. Please visit http://www.google.com/fonts to see available fonts. You can obtain the font family from the code provided by this site.
1. Go to http://www.google.com/fonts 2. Choose the font you want to use.
11
3. Click on the Quick Use icon . 4. Go to section 3 and you will see the code that will have the font family name
proceeding “family” (eg. family=Kite+One). Kite+One is the font family in this example.
5. Enter the name Kite+One in the Google Font for Heading field.
Google Font for Body: Enter the Google font family to use for the body section. Follow the same instructions provided for the Google Font for Heading field. Page Theme: Select a built-‐in theme for the mobile website. There are 2 pre-‐defined color swatches named: A (White) & B (Black).
Notes: See how you can create more swatches by visiting http://jquerymobile.com/demos/1.1.0/docs/api/themes.html.
Page Transition: Select the transition effect: Fade, Pop, Flip Turn, Flow, Slide Fade, Slide, Slide Up or None. Example of a page transition is when the “Menu” or “Back” button is pressed.
Notes: Some devices do not support fixed header, flip or turn effects.
12
[Look and Feel Tab Cont’d]
Main Banner URL: This is the URL to the image used by the top banner. The URL can be a relative or absolute (i.e. images/mybanner.png or http://www.yourdomain.com/images/mybanner.png). You may upload your custom banner image anywhere just as long you have the proper URL to the file.
Notes: Recommended size for the header image that fits well for most mobile devices is 300 x 70 pixels.
Display Header: Show or hide the top banner of the mobile website. This banner is loaded to the jtouch-‐banner position.
Header Theme: Select the color set for the main header bar. Fixed Header: Select “Yes” to always display or stick the header bar on top of the screen while scrolling through the page.
13
Header Button: Select the layout of your header buttons: Text and Image, Only Text, or Only Image. Show Back Button: Show or hide a Back button on the header bar. You can select to display the button with text and image, just text, or turn it off. Footer Theme: Select the theme for footer bar. Fixed Footer: Select “Yes” to always display or stick the footer bar at the bottom of the screen while scrolling through page. [Look and Feel Tab Cont’d]
Panel Type: Select the panel type.
• Overlay
14
• Reveal
• Push
15
Note: See it in action at http://demos.jquerymobile.com/1.4.2/panel
Swipe to Open Panel: Select Yes to enable swipe feature to display panel. Switch to Desktop Button: No Display, On Top of the Menu Page, or At Bottom of the Menu Page. The button can be hidden, displayed on the top or displayed at the bottom of the menu page. This button allows site visitor to toggle between desktop and mobile versions of website.
16
Desktop Page: If you have enabled the desktop/mobile template switching, the desktop page can be configured to stay on the current page of the site or it can be redirected to another page from the dropdown list.
From the previous 2 pictures above, the Switch to Desktop button is set to display at the top of the Menu screen. If the site visitor clicks on this button, he or she will be redirected to the Forum page. The mobile site can be previewed interactively at any time by clicking on the Preview Mobile Version button.
17
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.
18
[Icons & iOS Devices Tab]
Add to Home Screen: Select “Yes” to display a dialog box that will ask the site visitor to add a website icon to the iOS home screen. This dialog is displayed the first time the visitor visits your website or if the website icon has not been added to the home screen.
Figure 17 You can change the default JTouch Mobile logo by replacing it in the icons folder located in the mobile template directory. Icons Folder: This folder is located in the templates/JTouch3 directory. It contains the icon files that are used to display the favicon and web app icon for iOS devices. To customize the icons, simply create new ones with the same attributes (i.e. image size and file type) as the ones located in the folder and then upload and replace the files.
19
If you decide to create a different folder to store your customize icons be sure to update the Icons Folder field in the Icons & iOS Devices tab. Below is an example configuration where the icons are located in a folder named “myicons”.
Icon on Header Bar: You can change the icon on the header bar by entering the icon names. Please visit http://api.jquerymobile.com/icons for more icon options. Default Icons:
20
[Advanced Parameters Tab]
Compress: Select No for this option to use un-‐compressed JavaScript and CSS files and gather diagnostics information. This is very useful for developers to troubleshoot issues and should only be turned on for that purpose. Outputting debug information may cause performance issues in loading time and should be turned off when troubleshooting is completed.
Important! Since version 2.5.20, a caching feature was added to the JTouch Mobile template. All main CSS and JavaScript files will be merged as compressed and then saved to Joomla!’s JTouch3 cache folder ([ROOT]/cache/jtouch3). To clear the JTouch mobile template cache, go to the JTouch3 template and under the Advanced Parameters, click the Clear Cache button. You may also go to Site > Maintenance to clear this cache.
Note: Try deleting the JTouch3 cache when template style changes are not updating.
21
Use Built-‐in jQuery: Select “Yes” to use the jQuery library provided with the JTouch Mobile template. Select “No” if you have your own jQuery library already installed. If you decide to use the jQuery that is already installed, please make sure that the jQuery version is 1.10.1 or higher. Load Font Awesome: Select “Yes” to include CSS file that includes the Font Awesome icon library. This will allow you to insert Font Awesome icons in Joomla! articles. For more information, you can visit the developer page at http://fortawesome.github.io/Font-‐Awesome/icons. Font Awesome is also included in the Bootstrap library. If Bootstrap is already loaded on your mobile website, you can set this to "No". jQuery Mobile CSS: Select which type of CSS you would like to use for your mobile website, full version (FULL) or structure only (STRUCTURE ONLY).
Important! Only use “Structure Only” CSS when you have a fully customized theme. Please read the section “Customize Theme” for more info.
Show Powered By: Select “Yes” to display a link to GriddyDesigns.com. Please support us by setting this to “Yes”. This will help us continue our development and maintenance for our open source mobile solutions for Joomla!. [Advanced Parameters Tab Cont’d]
22
Module Mapping: You can map existing positions that are used in other templates to positions located in the mobile template by entering the existing position names next to the corresponding positions on the mobile template. For example: if you want to display modules that are located on the 'left' position of your desktop template to the 'jtouch-‐user1' position on the JTouch Mobile template (JTouch3), type in 'left' in the field next to 'jtouch-‐user1'. Please see figure 60 to view the available positions provided with the JTouch Mobile template.
23
Top:
Bottom:
Main:
24
[Google Settings Tab]
Use ReCaptcha: Select Yes to enable ReCaptcha. ReCaptcha Public Key: If you are using ReCaptcha on the login/registration forms, please re-‐enter the same public key from Google ReCaptcha. Use Google Analytics: Selecte Yes to enable Google Analytics. You can add your Google Analytics code (account and domain) to enable tracking by your Google Analytics service. Enable Google AdSense: Use this option to enable Google AdSense display on all pages of your website. You can select Top, Bottom or both.
25
Note: This option only applies to the JTouch Mobile template and does not affect the desktop template.
Script Type: Select your preferred type of Google AdSense script, PHP code or Native (JavaScript) code. Both types have the same function of displaying the Google AdSense on all of your mobile pages. This option provides the flexibility of choosing what works best in different environments. Script Type: Enter your Google AdSense slot name. Banner Width: Enter your Google AdSense banner width in pixels. Default is 320. Banner Height: Enter your Google AdSense banner height in pixels. Default is 50.
5 Upgrading and Uninstalling
5.1 Upgrading With Joomla! 3, the upgrading process is the same as a new installation process. The JTouch Mobile extension was designed to keep the previous settings from the previous version for both the plugin and the template.
Important: Make sure to do a full backup before any new installations or upgrades. We recommend using the Akeeba Backup extension to perform Joomla! backups. More information can be found at http://www.akeebabackup.com.
5.2 Uninstalling 1. Login to the Joomla! admin. 2. Go to Extensions > Extension Manager. 3. Click on the “Manage” tab. 4. Search for keyword “jtouch” 5. Select the 2 extensions: System -‐ JTouch Mobile 3 Controller and jtouch3, then click
the “Uninstall” button on the top right to complete the uninstallation.
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 related to the JTouch Mobile template. Not all modules designed for the desktop template will work with the JTouch Mobile template. It is important to test all modules that are being placed in JTouch Mobile template positions. You may choose to use the default JTouch position names are you can map existing desktop template positions to the mobile template. To edit or re-‐map the JTouch Mobile template positions, go to the JTouch3 template’s Advanced Parameters, Module Mapping section. You may also refer to section 4.3 – Module Mapping for more information.
Note: There are 2 new positions, jtouch-‐left-‐panel and jtouch-‐right-‐panel. This features gives you 2 panels than can be used for your mobile template.
27
See figure below for positions information. The filename for this diagram is JTouch3.template.positions.jpg and it is included in the JTouch Mobile extension download package. The 2 new jtouch left and right panels are not shown in this figure but is available to use. The panels can slide in from the left or right and can contain Joomla modules like menus, login form, etc.
Top:
Bottom:
Main:
6.1 Changing the Header Banner Logo The recommended size for the header banner is 300 x 70px. Simply create one and upload it to the website. Set the Main Banner path to the actual location of the new banner.
28
6.2 Adding a Customized Menu There may be cases where the desktop Joomla! menu has more tabs and information you would need to display on mobile devices. In this situation, it is sometimes better to create a custom menu just for mobile devices and assign it to the jtouch-‐menu position. This custom menu can be displayed instead of the one used for the desktop template.
To create a custom menu for mobile devices, perform the following tasks.
1. Go to Menus > Menu Manager > Add New Menu. 2. Enter a Title, Menu Type and Description (optional but recommended). 3. Create desired menu items for that newly created menu. 4. Go to Extensions > Module Manager. 5. Create a new menu module (do this by selecting “Menu” for module type). 6. Enter in a title and select jtouch-‐menu position. 7. Under the Basic Options, select the newly created menu from step 1.
29
Note: If your new menu does not display on the mobile device, it is probably because your previous mobile menu module is still published in the jtouch-‐menu position. Please remember to un-‐publish the previous mobile menu module in the module manager. These parameters are located under the Module tab of the module.
Make sure that you select “jtouch-‐menu” for the Position.
Set Start Level to 1, End Level to All, and Show Sub-‐menu Items to Yes.
6.3 Adding a Switch to Mobile Button If you want to add a link on your desktop template menu to switch to your JTouch Mobile template, simply create a web link with the following URL. http://www.your-‐domain.com/index.php?jtpl=X Where X is the ID of our JTouch3 template style. You can find the ID on the Template Manager list on the far right column. http://www.your-‐domain.com/index.php?jtpl=9
6.4 Creating a Navigation Menu with Icon To create a new navigation menu with an icon, perform the following tasks.
1. Create a new menu and add menu items. 2. Go to Extensions > Module Manager.
30
3. Click on New to create new menu module. 4. Select Menu. 5. Select jtouch-‐nav position. 6. Under Basic Options, select the JTouch menu. 7. Set Start Level to “1”. 8. Set End Level to “1”. 9. Set Show Sub-‐menu Items to “No”. 10. Under Advanced Options, select jtouch-‐nav for Alternate Layout 11. Click Save. 12. Go back to the menu item in your new menu. Under the Link Type Options, Select
image for the Link Image field. See Figure 61. Module Tab:
31
Advanced Tab:
The result of this configuration should look similar to the following image.
Notes: Icons will appear if the Link Image is specified. It is not recommended to put more than 3 menu items on the navigation bar due to the space limitations on mobile devices.
32
6.5 Creating a Panel To create a Panel, perform the following tasks.
1. Go to Extensions > Template Manager. 2. Click on the JTouch3 template under the Style column. 3. In the Look and Feel section, select the Panel Type: Overlay, Reveal or Push 4. Place any existing module or create a new module and set the position to “jtouch-‐
left-‐panel” or “jtouch-‐right-‐panel”. See Figure below to see an example of the Joomla! login module placed in the “jtouch-‐left-‐panel” position.
6.6 Creating a Footer Menu To create a footer menu, perform the following tasks.
1. Create a new menu and add new menu items. 2. Go to Extensions > Module Manager. 3. Click on New to create new Custom HTML module (be sure to select Custom
HTML for module type). 4. Select jtouch-‐footer position. 5. Click Save.
The following is an example of a custom HTML footer.
6.7 Enabling Horizontal Scrolling for Content Overflow To enable a horizontal scrolling for pages larger than the horizontal viewing area, use the following HTML snippet.
33
<div style="width:100%; overflow:scroll;">
<div style="width:800px;">Your content code here</div> </div> Adjust the width value to your preference.
Note: Not all mobile devices support the overflow feature.
6.8 Creating a Click to Call Button To enable “click to call” links for the mobile browser, please refer to http://www.mobilexweb.com/blog/click-‐to-‐call-‐links-‐mobile-‐browsers.
6.9 Creating a Touch Style Menu To add a touch style menu to your content page, simply use HTML tags with special attributes. To create the following menu, simply create an unordered list.
Figure 41
<ul> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> </ul>
Then add some attributes to the <ul> tag.
<ul data-role="listview" data-theme="a">
34
Or you can simply create a button with the data-‐role=”button”.
<a href="index.html" data-role="button">Link button</a> JTouch utilizes the jQuery Mobile framework to take advantage of its simplicity.
7 Customizing the Theme JTouch mobile template has a CSS override functionality allowing customizations without affecting core files. This allows Joomla! to be upgraded without worrying about customizations being overwritten. The CSS can be customized in 2 ways.
• Customizing with jQuery Mobile ThemeRoller • Customizing the Joomla! JTouch Mobile JTouch3 template
The following sections require advanced web development knowledge.
7.1 Customizing with jQuery Mobile ThemeRoller JTouch mobile template uses the jQuery Mobile framework to create its template. With jQuery Mobile, you can create a new theme in just a few minutes. There is a visual editor that makes this task very easy. Here are a few quick steps on how to create a theme using ThemeRoller.
1. Visit http://jquerymobile.com/themeroller 2. Click on the “Version” and select 1.4.2. You can find out the version of current
JTouch on top of the tab “Look and Feel”, in JTouch template settings page.
Figure 42
35
3. Remove current swatches by clicking on “Delete” of each swatch panel. We just need to design one theme.
Figure 43
36
4. Click the “Inspector” button to turn it on.
Figure 44
5. Now you have a very interactive interface to customize your theme.
Figure 45
6. When you are satisfied with the theme, click on the “Download” button.
Figure 46
7. Enter “jtouch.mobile.custom” for the Theme Name and then click on Download Zip to download the theme.
37
8. Unzip the downloaded file.
Figure 47
9. Copy the file “jtouch.monbile.custom.min.css” to the “/template/jtouch3/css” folder of your Joomla! installation and then rename the file to “jtouch.mobile.custom.css”.
Figure 48
10. Go to the JTouch3 template settings page and select the corresponding theme
swatch (“A” is the theme swatch in this example) for both the page theme and header theme.
38
Figure 49
39
11. Under the Advanced Parameters tab, make sure that the Compress Resources is set to “No”.
Figure 50
12. Then set the jQuery Mobile CSS setting to “Structure Only”. This will help minimize CSS duplication.
Figure 51
13. Save settings and your new template will be applied.
40
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.
41
7.2 Customizing the Joomla! JTouch Mobile JTouch3 Template The jQuery Mobile ThemeRoller updates the entire layout. Let say you want to simply modify an individual element of your template like and H tag. To do this, follow the following instructions.
Figure 52
1. Go to the /templates/jtouch3/css/_mytheme.css.
42
2. Rename the “-‐mytheme.css” file to “mytheme.css” and then open it in a plain text/css editor, and enter your custom CSS code here.
3. Save the changes and go back to the mobile site and see the changes.
Before After
8 Things to Know
8.1 Compatibility Issues • JTouch mobile template requires jQuery/jQuery Mobile libraries which may not
be compatible with all of your installed extensions. Common issues would be jQuery conflicts (i.e. MooTools and jQuery).
• JTouch uses the latest web technologies, HTML5 and CSS3, which works well on most major latest released browsers. It will not work on old browsers like IE7, Firefox 3. It may have issues running on slow CPU devices.
• Make sure that the browsers support JavaScript. • JTouch mobile template is optimized for current releases of compatible mobile
operating systems. • The following is a list of Joomla! extensions officially supported by JTouch mobile
template.
1. 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
43
7. mod_articles_news: add slide-‐show mode 8. com_kunena: Kunena 3.0, download its layout from a separate package.
For more information, please go to http://www.griddydesigns.com/downloads/member-‐downloads/jt-‐mobile-‐kunena-‐2-‐template
9. jComments: Requires mobile layout from a separate package which is only available for Platinum members.
Note: There have been some positive reports that the JTouch3 template works well with sh404SEF and uddeIM extensions.
8.2 jQuery & jQuery Mobile The JTouch3 template was built based on jQuery 1.9+ and jQuery Mobile 1.4+. JTouch Mobile will continue to update the platform as these 2 frameworks evolve. Because jQuery conflict is a common issue when sites have multiple modules using jQuery, JTouch built in the option to load or unload its library. You can do this by going to the JTouch template settings page and under the Advanced Parameters tab. set Use Default jQuery to “No”.
9 Open Source JTouch3 is a free and open source project, released under the GPL 2 license. You are free to use it, customize it, and redistribute it without permission from the author; however, we ask that you keep the license and author’s names and notes in the JTouch3 source code. We thank you for your support and we will continue to work on improving and making this the best mobile solution for the Joomla! platform. The following are useful resources when using or customizing the JTouch3 template.
• Learn more about jQuery Mobile: http://jquerymobile.com • Design and customize the JTouch3 theme: http://jquerymobile.com/themeroller
For basic support, please feel free to post it on our forum at http://www.griddydesigns.com/forum.
10 Professional Services We know that there may be times when advanced professional services is needed to meet some of the more complex requirements. Griddy Designs offers professional services at very reasonable rates. We welcome developers or companies at any level. We are very skilled and what we do and using our professional services also supports our open source endeavors. If there is a need for our services, please feel free to contact us at [email protected].
44
Note: Please do not send support questions to the above email address. You can post your support questions or search for answers on our forum. For support requirements higher than our basic level, please consider subscribing to our membership programs.
11 FAQs Q: Why do I see the mobile version on a desktop browser instead of the desktop version? A. If you previewed the mobile site in the template manager and did not click on the top bar of that preview window to close it, then the web browser for that computer that you are on will now see the mobile version of the site. To get the desktop version back on that computer, simply go back to the JTouch Mobile template and click on Preview Mobile Version under the Look and Feel section. This time, be sure to click on the top bar of the preview window to close it. This will restore the desktop version for the web browser on that computer. Q: Where is the Switch to Desktop button? A: The Switch to Desktop button is display at the jtouch-‐menu position. This means that the JTouch Mobile template requires a module assigned to this position to display this button. If you are adding a menu to call this module, please refer to the “Adding a Custom Menu” section of this document. Q: Why is loading the mobile site so slow when browsing for the first time or every time I make a change to the JTouch Mobile template settings? A: Starting with JTouch Mobile 2.5.20, a “cache” folder was created and used as a buffer for CSS and JavaScript files. This caching folder is located at /cache/jtouch3. It will take a little longer for the first time to merge files, compress the content, and save it to the cache folder. This is also true when a change in the JTouch Mobile template settings is made to ensure the latest settings are being used. Once the cache is in place, subsequent visits will be faster. Q: Why do I not see the theme and style changes on my mobile device? A: Make sure your /cache folder is writable (permission 775). You can also try clearing your cache under the Advanced Parameters tab of the JTouch Mobile template.
