Manual Do Usuário JTouch Mobile 2.5 for Joomla 2.5
Content
JTouch
Mobile
Extension
for
Joomla!
User
Guide
A
Mobilization
Plugin
&
Touch
Friendly
Template
for
Joomla!
2.5
Author:
Huy
Nguyen
Co-‐Author:
John
Nguyen
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
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.
2
Table
of
Contents
1
ABOUT
THIS
DOCUMENT
4
2
INTRODUCTION
4
3
REQUIREMENTS
4
4
INSTALLING
5
4.1
INSTALLING
THE
JTOUCH
MOBILE
EXTENSION
4.2
CONFIGURING
PLUGIN
SETTINGS
4.3
CONFIGURING
TEMPLATE
SETTINGS
5
6
8
5
UPGRADING
AND
UNINSTALLING
22
5.1
UPGRADING
5.2
UNINSTALLING
22
22
6
CUSTOMIZING
THE
JTOUCH
MOBILE
TEMPLATE
22
6.1
CHANGING
THE
HEADER
BANNER
LOGO
6.2
DISPLAYING
VIRTUEMART
MODULES
AS
TABS
ON
THE
CART
PAGE
(FOR
GOLD
AND
PLATINUM
MEMBERS
ONLY)
6.3
ADDING
A
CUSTOMIZED
MENU
6.4
ADDING
A
SWITCH
TO
MOBILE
BUTTON
6.5
CREATING
A
NAVIGATION
MENU
WITH
ICON
6.6
CREATING
A
PANEL
6.7
CREATING
A
FOOTER
MENU
6.8
CREATING
A
SWIPABLE
BANNER
SLIDER
WITH
ARTICLES
6.9
CREATING
AN
ARTICLES
CATEGORY
ARTICLE
LISTING
WITH
THUMBNAILS
6.10
ENABLING
HORIZONTAL
SCROLLING
FOR
CONTENT
OVERFLOW
6.11
CREATING
A
CLICK
TO
CALL
BUTTON
6.12
CREATING
A
TOUCH
STYLE
MENU
24
7
CUSTOMIZING
THE
THEME
33
7.1
CUSTOMIZING
WITH
JQUERY
MOBILE
THEMEROLLER
7.2
CUSTOMIZING
THE
JOOMLA!
JTOUCH
MOBILE
JTOUCH25
TEMPLATE
33
38
8
THINGS
TO
KNOW
39
8.1
COMPATIBILITY
ISSUES
8.2
JQUERY
&
JQUERY
MOBILE
39
40
9
OPEN
SOURCE
40
10
PROFESSIONAL
SERVICES
40
11
FAQS
41
25
25
27
28
29
30
30
31
32
32
32
3
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
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!
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
4
•
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).
5
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).
6
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.
7
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
8
[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.
9
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.
10
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
11
•
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.
12
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.
13
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.
14
[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
15
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
16
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
id’s.
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
17
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
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:
Main:
Bottom:
Figure
60
19
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
ReCaptcha.
Use
Analytics:
You
can
add
your
Analytics
code
(account
and
domain)
to
enable
tracking
by
your
Analytics
service.
Enable
AdSense:
Use
this
option
to
enable
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
AdSense
script,
PHP
code
or
Native
(JavaScript)
code.
Both
types
have
the
same
function
of
displaying
the
AdSense
on
all
of
your
mobile
pages.
This
option
provides
the
flexibility
of
choosing
what
works
best
in
different
environments.
20
[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.
21
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.
2.
3.
4.
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”
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
22
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
template’s
Advanced
Parameters,
Module
Mapping
section.
You
may
also
refer
to
section
4.3
–
Module
Mapping
for
more
information.
Figure
27
23
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:
Main:
Bottom:
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.
24
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.
25
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.
26
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.
27
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
28
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.
29
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.
30
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.
31
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>
</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.
32
Figure
41
<ul>
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>
Then
add
some
attributes
to
the
<ul>
tag.
<ul data-role="listview" data-theme="a">
Or
you
can
simply
create
a
button
with
the
data-‐role=”button”.
<a href="index.html" data-role="button">Link button</a>
JTouch
utilizes
the
jQuery
Mobile
framework
to
take
advantage
of
its
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.
33
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
34
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.
35
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
36
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.
37
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
38
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
Figure
55
After
8 Things
to
Know
8.1 Compatibility
Issues
•
•
•
•
•
JTouch
mobile
template
requires
jQuery/jQuery
Mobile
libraries
which
may
not
be
compatible
with
all
of
your
installed
extensions.
Common
issues
would
be
jQuery
conflicts
(i.e.
MooTools
and
jQuery).
JTouch
uses
the
latest
web
technologies,
HTML5
and
CSS3,
which
works
well
on
most
major
latest
released
browsers.
It
will
not
work
on
old
browsers
like
IE7,
Firefox
3.
It
may
have
issues
running
on
slow
CPU
devices.
Make
sure
that
the
browsers
support
JavaScript.
JTouch
mobile
template
is
optimized
for
current
releases
of
compatible
mobile
operating
systems.
The
following
is
a
list
of
Joomla!
extensions
officially
supported
by
JTouch
mobile
template.
1.
2.
3.
4.
com_content:
section,
front-‐page,
category,
and
article
layouts
com_contact:
category
&
contact
layouts
com_search:
form
and
results
layouts
com_user:
all
layouts
39
5.
6.
7.
8.
9.
mod_login
mod_search:
search
form
mod_articles_news:
add
slide-‐show
mode
com_virtuemart:
VirtueMart
2
(VirtueMart
1
is
not
supported)
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
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.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
40
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].
Note:
Please
do
not
send
support
questions
to
the
above
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.
41
