You are on page 1of 41

 

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

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  Twitter  at  https://www.twitter.com/jtouchmobile.  
 
For  professional  services  and  business  development,  please  contact  us  at  
proservices@griddydesigns.com.  

3 Requirements  
The  following  requirements  must  be  met  to  install  the  JTouch  plugin  and  mobile  
template.      
• Website  running  Joomla!  2.5.x    
• If  you  are  using  VirtueMart,  it  must  be  version  2.0.18+.    The  VirtueMart  mobile  
template  is  available  to  Gold  and  Platinum  Members  Only.  
• If  you  are  using  Kunena,  it  must  be  version  2.0.4+.    The  Kunena  mobile  template  
is  available  to  Gold  and  Platinum  Members  Only.  
 
Note:    The  following  versions  were  used  when  this  document  was  written.  
• Joomla  2.5.9  
• JTouch  Mobile  2.5.27  
• jQuery  Mobile  1.3.1  final  
• VirtueMart  2.0.20  
4  

 

 the  installation  only  requires  uploading   the  pak_jouch25.4   4 Installing   First.  you  are  on  your  way  to  setting  up  your  mobile   version  of  your  Joomla!  website!!!     4.   3.•   Kunena  2.     1.20.    If  you  are  reading  this  document  now.    We  highly  recommend  reading   this  document  before  proceeding.       There  are  3  main  steps  to  get  the  JTouch  Mobile  extension  up  and  running.griddydesigns.   2. Configure  plugin  settings   3.  download  the  latest  release  of  the  JTouch  Mobile  Extension  at   http://www.    There  are  2  quick  links  for  the  next   2  steps  to  be  performed  to  complete  the  installation  (see  figure  2). Install  the  JTouch  Mobile  extension  (pak_jtouch25.5. Configure  template  settings     After  completing  these  3  main  steps.1 Installing  the  JTouch  Mobile  Extension   Beginning  with  JTouch  Mobile  version  2.0.zip  that  was  extracted   from  the  download  earlier  and  then  click  on  the  Upload  &  Install  button  to  install   the  package  (see  figure  1).  that  probably   means  successfully  unzipped  the  downloaded  package.  browse  to  the  file  pak_jtouch25. Go  to  Extensions  >  Extension  Manager.     Figure  1     The  following  message  will  be  displayed  upon  successful  installation. Log  in  to  your  Joomla!  admin.     1.       5     .com.zip  file  via  the  Joomla!  Extension  Manager.    Please  pay  close   attention  to  the  “next  steps”  section  of  the  message.zip)   2. Under  the  Install  section.

   This  will   automatically  switch  the  website  template  to  the  JTouch25  template  for  mobile  devices.”   3. Under  the  Details  page.   4.    To  use  the  JTouch25   template  for  tablets. Go  to  Menu  >  Extensions  >  Plugin.           6     .     Set  Switch  to  Template  setting  to  “jtouch25”  (see  figure  3).  set  Include  Tablets  to  “Yes”. Search  for  the  keyword  “JTouch.   Figure  2     4.”    Set  Access  to  “Public.   1.”     [Mobile  Detect  Tab]   Under  the  Mobile  Detect  section.  select  “Use  the   following  page”  and  select  the  desired  page  (see  figure  4).2 Configuring  Plugin  Settings   To  start  using  the  JTouch  mobile  template.   2.  set  the  Status  to  “Enabled.  set  the  Enable  Template  Switcher  to  “Yes”.  the  JTouch25  plugin  must  be  enabled. Click  on  the  JTouch25  Mobile  Controller  plugin  to  configure  its  settings.    For  Mobile  Home  Page.

 you  can  select  it  from  the  Switch  to  Template  dropdown  box.         [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.       7   .     Remove  MooTools:    If  your  site  requires  MooTools.  select  “No”  here.  select   “As  desktop”  for  Mobile  Home  Page  option.    If  you  want   to  make  the  desktop  template  home  page  to  be  your  mobile  site  home  page.    If  your  site  has  been   customized  to  not  use  MooTools  at  all.  then  this  option  can  be  set  to  “Yes”  to  prevent   JavaScript  conflicts.Figure  3     Figure  4     Note:    If  you  have  another  template  for  your  mobile  site  other  than  the  jtouch25   template.

   From  here.    Default  is  “No”.  JTouch  can  now  interoperate  with  extensions  or  modules  that  utilize   MooTools  without  conflict.  click  on  jtouch25  under  the  style  column  to  open  its   settings  page.       4.       Enable  Cache  Control:    Select  “Yes”  to  enable  caching.     Note:    Another  way  to  access  this  page  is  by  going  to  Extensions  >  Template  Manager.   This  significantly  improves  the  performance  of  the  web  site  and  reduces  the  workload  of   the  server.    If  the  JTouch  caching  system  is   enabled.10.5.Note:    Starting  with  JTouch  2.noConflict()”  option  was  added  to  all  JTouch   core  scripts.  the  Joomla!  caching  system  must  be  disabled  for  it  to  function  properly.  a  “.  a  separate  caching  system  was  created  to  cache  the  mobile   template.    Default  is  "No".     Use  Browser  Caching:    Select  “Yes”  to  enable  local  browser  caching.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.5.     Figure  7     8       .       [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.24.       Starting  with  JTouch  2.    Joomla!  comes  with  its  own  caching  system  configurable  in  the  Global   Configuration  which  will  cache  for  the  desktop  template.

 There  are  5  pre-­‐defined   color  swatches  named  from  A  to  E.[Look  and  Feel  Tab]     Figure  8     Page  Theme:    Select  a  built-­‐in  theme  for  the  mobile  website.       9   .

      Notes:    Recommended  size  for  the  header  image  that  fits  well  for  most  mobile   devices  is  300  x  70  pixels.png  or   http://www.html.  Flow.yourdomain.com/demos/1.png).   Figure  9     Notes:    See  how  you  can  create  more  swatches  by  visiting   http://jquerymobile.    The  URL  can  be   a  relative  or  absolute  (i.    Example  of  a  page  transition  is  when  the  “Menu”  or  “Back”  button  is   pressed.  images/mybanner.  Slide.    You  may  upload  your  custom   banner  image  anywhere  just  as  long  you  have  the  proper  URL  to  the  file.   Slide  Up  or  None.e.  Slide  Fade.1.  Flip  Turn.     Main  Banner  URL:    This  is  the  URL  to  the  image  used  by  the  top  banner.     Display  Header:    Show  or  hide  the  top  banner  of  the  mobile  website.    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.     10       .     Figure  10     Header  Theme:    Select  the  color  sets  for  the  main  header  bar.  flip  or  turn  effects.     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.  Pop.0/docs/api/themes.     Notes:    Some  devices  do  not  support  fixed  header.    This  banner  is   loaded  to  the  jtouch-­‐banner  position.com/images/mybanner.

 or   Only  Image.   • Overlay     Figure  56       11   .    You  can  select  to   display  the  button  with  text  and  image.     Footer  Theme:    Select  the  theme  for  footer  bar.       Show  Back  Button:    Show  or  hide  a  Back  button  on  the  header  bar.  or  turn  it  off.     Panel  Type:    Select  the  panel  type.     Fixed  Footer:    Select  “Yes”  to  always  display  or  stick  the  footer  bar  at  the  bottom  of  the   screen  while  scrolling  through  page.  just  text.     Show  Panel:    Select  “Yes”  to  display  panel  widget.       Figure  11     Header  Button:    Select  the  layout  of  your  header  buttons:  Text  and  Image.  Only  Text.Fixed  Header:    Select  “Yes”  to  always  display  or  stick  the  header  bar  on  top  of  the  screen   while  scrolling  through  the  page.

0-­‐ beta.html.com/demos/1.   • Reveal   • Figure  57     Push       Figure  58     Note:    See  it  in  action  at  http://jquerymobile.1/docs/panels/index.       12     .3.

 he  or  she  will  be   redirected  to  the  VirtueMart  page.         Figure  13     From  the  previous  2  pictures  above.  the  Switch  to  Desktop  button  is  set  to  display  at  the   top  of  the  Menu  screen.    The  button  can  be   displayed  on  the  top  or  bottom  of  the  menu  page.    If  the  site  visitor  clicks  on  this  button.Switch  to  Desktop  Button:    Show  or  hide  Switch  to  Desktop  button.     13   .  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.     The  mobile  site  can  be  viewed  interactively  at  any  time  by  clicking  on  the  Preview   Mobile  Version  button.    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.

    To  allow  JTouch25  to  switch  back  to  the  desktop  view.  instead  of  the  DESKTOP   version.  desktop  or  mobile).   Figure  14       Figure  15     Important!     JTouch25  can  “remember”  your  last  viewing  mode  (i.  the  MOBILE  version  will  be   displayed  the  next  time  the  page  is  access  by  that  browser.  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.e.    If  a   preview  of  the  mobile  site  is  done  on  a  desktop  browser.         14     .

   To   customize  the  icons.       Figure  17     You  can  change  the  default  JTouch  Mobile  logo  by  replacing  it  in  the  icons  folder  located   in  the  mobile  template  directory.    It  contains  the   icon  files  that  are  used  to  display  the  favicon  and  web  app  icon  for  iOS  devices.  simply  create  new  ones  with  the  same  attributes  (i.e.     Icons  Folder:    This  folder  is  located  in  the  templates/jtouch25  directory.[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.  image  size  and   file  type)  as  the  ones  located  in  the  folder  and  then  replace  them  by  uploading  via  FTP.     Figure  18       15   .    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.

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.       Figure  19     [Advanced  Parameters  Tabs]   Figure  20   16       .    Below  is  an  example  configuration  where   the  icons  are  located  in  a  folder  name  “myicons”.

   Select  “No”  if  you  have  your  own  jQuery  library  already  installed.    You  may  also  go  to     Site  >  Maintenance  to  clear  this  cache.     Important!   Since  version  2.  do  the  following.         Use  Default  jQuery:    Select  “Yes”  to  use  the  jQuery  library  provided  with  the  JTouch   Mobile  template.    Outputting  debug  information  may  cause   performance  issues  in  loading  time  and  should  be  turned  off  when  troubleshooting  has   been  complete.3.   2.     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.  separated  by   commas  (i.5.    This  is  very  useful  for  developers  to  troubleshoot  issues  and   should  only  be  turned  on  for  that  purpose.e.    To  find  the  menu  item  ID.    If     17   .Turn  off  Pages:    You  may  want  to  turn  off  the  display  of  components  from  your  home   page  or  any  other  page.   3.    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.  a  caching  feature  was  added  to  the  JTouch  Mobile  template.  1.   1. Go  to  Menus. 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. Click  on  any  menu  that  contains  the  menu  item  or  items  you  want  to  turn  off  on   mobile  template.  go  to  the  JTouch25  template  and   under  the  Advanced  Parameters.  click  the  Clear  Cache  button.20.20).       Figure  22     Note:  Try  deleting  the  JTouch25  cache  when  template  style  changes  are  not   updating.

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

   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).    Please  support  us   by  setting  this  to  “Yes”.    Please  see  figure  60  to  view  the  available  positions  provided  with  the   JTouch  Mobile  template.Important!   Only  use  “Structure  Only”  CSS  when  you  have  a  fully  customized  theme.  type  in  'left'  in  the  field  next  to   'jtouch-­‐user1'.     Show  Powered  By:    Select  “Yes”  to  display  a  link  to  GriddyDesigns.       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.com.    Please   read  the  section  “Customize  Theme”  for  more  info.       Top:   Main:         Bottom:         Figure  60       19   .    This  will  help  us  continue  our  endeavors  and  provide  the  best   open  source  website  mobile  solution  for  Joomla!.

  [Google  Settings  Tab]     Figure  23     Use  ReCaptcha:    If  you  are  using  ReCaptcha  on  the  login/registration  forms.  please   enable  this  option  and  re-­‐enter  the  public  key  from  Google  ReCaptcha.       Use  Google  Analytics:    You  can  add  your  Google  Analytics  code  (account  and  domain)  to   enable  tracking  by  your  Google  Analytics  service.     Enable  Google  AdSense:    Use  this  option  to  enable  Google  AdSense  display  on  all  pages  of   your  website.     20     .  bottom  or  both  positions.  PHP  code  or  Native   (JavaScript)  code.    You  can  select  top.       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.    This  option  provides  the  flexibility  of  choosing  what  works   best  in  different  environments.    Both  types  have  the  same  function  of  displaying  the  Google  AdSense   on  all  of  your  mobile  pages.

[Other  Extensions  Tab]     Figure  24     For  VirtueMart  2  (2.  please  remember   to  click  Save  or  Save  &  Close  to  save  and  apply  the  settings.     Check  and  make  sure  that  you  have  the  following  highlighted  folders.  Then  download  our  VirtueMart  mobile  template  (ONLY  available   for  Gold  and  Platinum  Members).    The  JTouch  Mobile  template   will  now  be  displayed  on  mobile  devices.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.         Figure  25     After  making  all  the  desired  settings  for  your  JTouch  Mobile  template.             21   .    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.  make  sure   that  the  JTouch25  –  Mobile  Controller  plugin  is  enabled.     Note:    If  you  do  not  see  the  JTouch  Mobile  template  on  mobile  devices.0.

   It  is  important  to  test  all  modules  that  are  being  placed  in  JTouch  Mobile   22     .”   Select  the  2  extensions  and  click  the  “Uninstall”  button  on  the  top  right  to   complete  the  uninstallation. From  Joomla!  admin  menu.    There  are  currently  8   positions  that  are  available  to  use  that  should  cover  most  requirements.  we  highly   recommend  uninstalling  JTouch  Mobile  first  and  then  reinstalling  the  new  version.  The   JTouch  Mobile  extension  was  designed  to  keep  the  previous  settings  from  the  previous   extension  for  both  the  plugin  and  the  template.20.    The  mobile  template   follows  the  same  guidelines  as  any  other  Joomla!  template.  the  upgrading  process  is  the  same  as  a  new  installation  process.com.  go  to  Extensions  >  Extension  Manager.akeebabackup. 3.     Not  all  modules  designed  for  the  desktop  template  will  work  with  the  JTouch  Mobile   template.   5.     Important:    Make  sure  to  do  a  full  backup  before  any  new  installations  or  upgrades.   Search  for  keyword  “JTouch25.2 Uninstalling   1.5.     We  recommend  using  the  AkeebaBackup  extension  to  perform  Joomla!  backups.1 Upgrading   With  Joomla!  2. 2.     Click  on  the  “Manage”  tab. 4.5.       Note:    The  default  JTouch  Mobile  template  positions  will  have  the  prefix  “jtouch-­‐“.   5 Upgrading  and  Uninstalling   5.5.     Note:    If  you  are  upgrading  from  JTouch  Mobile  2.       Figure  26   6 Customizing  the  JTouch  Mobile  Template   Modules  can  easily  be  displayed  on  the  JTouch  Mobile  template.     More  information  can  be  found  at  http://www.12  to  version  2.     This  allows  you  to  easily  identify  positions  designed  for  the  JTouch  Mobile  template.

   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.3  –  Module   Mapping  for  more  information.  go  to  the  JTouch25  template’s  Advanced   Parameters.    You  may  also  refer  to  section  4.  Module  Mapping  section.     Figure  27       23   .template  positions.

   The  filename  for  this  diagram  is   jtouch25.    Simply  create  one  and   upload  it  to  the  website.positions.     Top:   Main:         Bottom:           Figure  28     6.See  figure  28  for  positions  information.    Set  the  Main  Banner  path  to  the  actual  location  of  the  new   banner.jpg  and  it  is  included  in  the  JTouch  Mobile  extension   download  package.template.1 Changing  the  Header  Banner  Logo   The  recommended  size  for  the  header  banner  is  300  x  70px.   24     .

 it  is  not  recommended  to  have  more   than  3  tabs.    These   modules  are  included  in  the  com_virtuemart.gz  file.    To  display  any  of  the  following   VirtueMart  modules  as  tabs  on  the  Cart  page.tar.0.2.     This  custom  menu  can  be  displayed  instead  of  the  one  used  for  the  desktop  template.     Because  of  the  limited  space  on  mobile  devices.  it  is  sometimes  better  to   create  a  custom  menu  just  for  mobile  devices  and  assign  it  to  the  jtouch-­‐menu  position.     25   .Figure  29       6.    Be  sure  to  install  it   after  you  install  the  main  VirtueMart  extension.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.x_ext_aio.     • VM  –  Manufacturer   • VM  –  Shopping  Cart   • VM  –  Search  in  Shop   • VM  –  Featured  Products   • VM  –  Category   • VM  -­‐  Currencies     Figure  30       6.    In  this  situation.  simply  set  their  positions  to  jtouch-­‐tools.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!.

  7.  Menu  Type  and  Description  (optional  but  recommended). Create  a  new  menu  module  (do  this  by  selecting  “Menu”  for  module  type).   6.   Figure  31     To  create  a  custom  menu  for  mobile  devices. Under  the  Basic  Options.   5.    Please   remember  to  unpublish  the  previous  mobile  menu  module  in  the  module  manager. Enter  a  Title.  select  the  newly  created  menu  from  step  1.     26     . Go  to  Menus  >  Menu  Manager  >  Add  New  Menu.   2.   3. Go  to  Extensions  >  Module  Manager.  it  is  probably  because   your  previous  mobile  menu  module  is  still  published  in  the  jtouch-­‐menu  position.     Note:    If  your  new  menu  does  not  display  on  the  mobile  device.     1. Create  desired  menu  items  for  that  newly  created  menu. Enter  in  a  title  and  select  jtouch-­‐menu  position.   4.  perform  the  following  tasks.

 then  X  is  the  name  of  JTouch  template.your-­‐domain.  You  can  find  the  ID   on  the  Template  Manager  list  on  the  far  right  column.  then  X  is  the  ID  of  our  jtouch25  template.php?jtpl=X     If  you  are  using  Joomla!  1.5.com/index.     http://www.your-­‐domain.5.  simply  create  a  web  link  with  the  following  URL.     http://www.Figure  32     Figure  33         6.php?jtpl=jtouch     If  you  are  using  Joomla!  2.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.       27   .com/index.

your-­‐domain.  select  the  JTouch  menu.   9.   8. Click  Save. Set  End  Level  to  “1”.5 Creating  a  Navigation  Menu  with  Icon   To  create  a  new  navigation  menu  with  an  icon. Set  Start  Level  to  “1”.   5.  perform  the  following  tasks. Create  a  new  menu  and  add  menu  items.  Select   image  for  the  Link  Image  field.     Module  Menu  settings:       Figure  34     On  the  Advanced  Options  tab:     Figure  35   28       .com/index.    See  Figure  61.   3.   7.   2.   4. Go  to  Extensions  >  Module  Manager. Select  jtouch-­‐nav  position.http://www.   11. Under  Basic  Options. Click  on  New  to  create  new  menu  module  (be  sure  to  select  Menu  for  module   type).    Under  the  Link  Type  Options. Under  Advanced  Options. Go  back  to  the  menu  item  in  your  new  menu.  select  jtouch-­‐nav  for  Alternate  Layout   10.   6. Set  Show  Sub-­‐menu  Items  to  “No”.php?jtpl=118     6.     1.

    6.       29   .  perform  the  following  tasks. In  the  Look  and  Feel  section. Select  the  Panel  Type:    Overlay.   3.6 Creating  a  Panel   To  create  a  Panel.       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. Click  on  the  jtouch25  template  under  the  Style  column.   2. Go  to  Extensions  >  Template  Manager.   1.  Reveal  or  Push   5.Menu  Item  settings:       Figure  61       The  result  of  this  configuration  should  look  similar  to  the  following  image.   4. Place  any  existing  module  or  create  a  new  module  and  set  the  position  to  “jtouch-­‐ panel”.  enable  the  Panel  by  setting  the  Show  Panel  option  to   “On  the  LEFT”  or  “On  the  RIGHT”.     See  Figure  59  to  see  an  example  of  the  Joomla!  login  module  placed  in  the  “jtouch-­‐panel”   position.

7 Creating  a  Footer  Menu   To  create  a  footer  menu.   2. Go  to  Extensions  >  Module  Manager.     Be  sure  to  have  an  image  in  the  Article  Text  field.    Any  articles  in  the  selected  category  will  utilize  this  newsflash   module.   6. Click  Save.     1.     Figure  37       6.  perform  the  following  tasks.   5. Under  Basic  Options.   2.   30     .   5.   3. Click  on  New  to  create  a  new  Articles  –  Newsflash  module  (be  sure  to  select   Articles  -­‐  Newsflash  for  module  type).   3.     The  following  is  an  example  of  a  custom  HTML  footer. Enter  title  and  select  the  jtouch-­‐user1  position. Click  on  New  to  create  new  Custom  HTML  module  (be  sure  to  select  Custom   HTML  for  module  type). Under  the  Advanced  Options  tab.8 Creating  a  Swipable  Banner  Slider  with  Articles   To  create  a  swipe  slideshow  article.  perform  the  following  tasks.  select  the  category  for  this  module  to  include  in  the   slideshow.   4. Create  a  new  menu  and  add  new  menu  items.  select  “jtouch-­‐slideshow”  for  the  Alternative   Layout  option. Create  articles  and  add  them  to  the  category  selected  in  the  newsflash  module.Figure  59     6.     1. Select  jtouch-­‐footer  position. Got  to  Extensions  >  Module  Manager.   4.

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

"> <div style="width:800px.       Note:    Not  all  mobile  devices  support  the  overflow  feature.  simply  create  an  unordered  list.  please  refer  to   http://www.12 Creating  a  Touch  Style  Menu   To  add  a  touch  style  menu  to  your  content  page.     <div style="width:100%.com/blog/click-­‐to-­‐call-­‐links-­‐mobile-­‐browsers.     6. overflow:scroll.">JavaScript code here</div> </div>      Adjust  the  width  value  to  your  preference.       32     .     To  create  the  following  menu.       6.   Figure  40.  simply  use  HTML  tags  with  special   attributes.  use   the  following  JavaScript  snippet.11 Creating  a  Click  to  Call  Button   To  enable  “click  to  call”  links  for  the  mobile  browser.10 Enabling  Horizontal  Scrolling  for  Content  Overflow   To  enable  a  horizontal  scrolling  for  pages  larger  than  the  horizontal  viewing  area.mobilexweb.    Alternative  layout  is  set  to  jtouch-­‐list               6.

html">BMW</a></li> </ul>      Then  add  some  attributes  to  the  <ul>  tag.      <a href="index.html">Acura</a></li> <li><a href="audi.   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.1 Customizing  with  jQuery  Mobile  ThemeRoller   JTouch  mobile  template  uses  the  jQuery  Mobile  framework  to  create  its  template.     • Customizing  with  jQuery  Mobile  ThemeRoller   • Customizing  the  Joomla!  JTouch  Mobile  JTouch25  template     The  following  sections  require  advanced  web  development  knowledge.  you  can  create  a  new  theme  in  just  a  few  minutes.html">Audi</a></li> <li><a href="bmw.Figure  41     <ul>   <li><a href="acura.html" data-role="button">Link button</a>    JTouch  utilizes  the  jQuery  Mobile  framework  to  take  advantage  of  its  simplicity.     7.    With   jQuery  Mobile.     The  CSS  can  be  customized  in  2  ways.     33   .     <ul data-role="listview" data-theme="a">    Or  you  can  simply  create  a  button  with  the  data-­‐role=”button”.

com/demos/1.html.      Here  are  a  few  quick  steps  on   how  to  create  a  theme  using  ThemeRoller.       Figure  42     3.     1.  We  just   need  to  design  one  theme.0/docs/api/themes. Remove  current  swatches  by  clicking  on  “Delete”  of  each  swatch  panel. Click  on  the  “Version”  and  select  1.  you  should  understand  how  jQuery  Mobile  builds  a  new  theme.     There  is  a  visual  editor  that  makes  this  task  very  easy.       Figure  43       34       .    For  more   information  please  go  to  http://jquerymobile. Visit  http://jquerymobile.First.1.com/themeroller.0-­‐rc.   2.3.2.

            Figure  46     7.       Figure  44     5. When  you  are  satisfied  with  the  theme.  click  on  the  “Download”  button. Enter  “jtouch-­‐custom”  for  the  Theme  Name  and  then  click  on  Download  Zip  to   download  the  theme. Click  the  “Inspector”  button  to  turn  it  on.       35   . Now  click  the  element  and  change  its  options  to  have  a  new  layout.       Figure  45     6.4.

css”  to  the  “/template/jtouch25/css”  folder  of   your  Joomla!  installation  and  then  rename  the  file  to  “jtouch-­‐custom.       Figure  48     10. Copy  the  file  “jtouchcustom. Unzip  the  downloaded  file.8.       Figure  49       36       .min.     Figure  47     9.css”. 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.

   Also  click  the  Clear  Cache  button  to  flush  out  all  old  files.  from  A  to  E. If  everything  looks  satisfactory.       Figure  50     12.11.  remember  to  go  back  and  set  the  Debug  option  to   “Off”.             Figure  51   14.  make  sure  that  the  Debug  option  is  set  to   “On”.    This  will  help  minimize  CSS  duplication. Under  the  Advanced  Parameters  tab.       37   .         Figure  51     13.  then  set  the  JQM  CSS  setting  to   “Structure  Only”. Save  settings  and  your  new  template  will  be  applied. If  you  fully  customized  all  swatches.

Go  to  the  /templates/jtouch25/css/-­‐customize/mytheme.    To  do  this.       Figure  53       38         .7.css.   follow  the  following  instructions.     Figure  52     1.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).

          Figure  54   3.2.     Make  sure  that  the  browsers  support  JavaScript.  HTML5  and  CSS3. Rename  the  “-­‐customize”  folder  to  “customize”  and  then  open  the  file   “mythem. 3.    It  may  have  issues  running  on  slow  CPU  devices.  and  article  layouts   com_contact:    category  &  contact  layouts   com_search:    form  and  results  layouts   com_user:    all  layouts   39   .    Common  issues  would  be   jQuery  conflicts  (i.   com_content:    section.   JTouch  mobile  template  is  optimized  for  current  releases  of  compatible  mobile   operating  systems.  It  will  not  work  on  old  browsers  like  IE7.  MooTools  and  jQuery).css”  in  a  plain  text/css  editor.1 Compatibility  Issues   • • • • •   JTouch  mobile  template  requires  jQuery/jQuery  Mobile  libraries  which  may  not   be  compatible  with  all  of  your  installed  extensions. 2.  front-­‐page.   1.  and  enter  your  custom  CSS  code  here. Save  the  changes  and  go  back  to  the  mobile  site  and  see  the  changes.   Firefox  3.     Before   Figure  55       After       8 Things  to  Know   8.   JTouch  uses  the  latest  web  technologies. 4.  category.  which  works  well  on   most  major  latest  released  browsers.     The  following  is  a  list  of  Joomla!  extensions  officially  supported  by  JTouch  mobile   template.e.

      8.   however.com/forum.  released  under  the  GPL  3  license.    Because   jQuery  conflict  is  a  common  issue  when  sites  have  multiple  modules  using  jQuery.    You  are   free  to  use  it.0.    JTouch  Mobile. 7.5.  and  redistribute  it  without  permission  from  the  author.  please  go  to   http://www.    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.82  and  jQuery  Mobile  1.  please  feel  free  to  post  it  on  our  forum  at   http://www.   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.com   • Design  and  customize  the  JTouch25  theme:   http://jquerymobile.7  and  2.     The  following  are  useful  resources  when  using  or  customizing  the  JTouch25  template.  offers  professional  services  at  very  reasonable  rates.     9 Open  Source   JTouch25  is  a  free  and  open  source  project.2 jQuery  &  jQuery  Mobile   The  JTouch25  template  was  built  based  on  jQuery  1. 8.    We  welcome  developers   40     . 6.0.  a  Griddy  Designs   company.griddydesigns.    You  can  do  this  by  going  to  the   JTouch  template  settings  page  and  under  the  Advanced  Parameters  tab.  customize  it.2.griddydesigns.    JTouch   Mobile  will  continue  to  update  the  platform  as  these  2  frameworks  evolve.     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.  we  ask  that  you  keep  the  license  and  author’s  names  and  notes  in  the  JTouch25   source  code.     • Learn  more  about  jQuery  Mobile:    http://jquerymobile.  set  Use  Default   jQuery  to  “No”.  For  more  information. 9.com/themeroller     For  basic  support.com/downloads/jtouch-­‐ex/jtouch-­‐ex-­‐kunena-­‐ template.     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  built  in  the  option  to  load  or  unload  its  library.  download  its  layout  from  a  separate   package.

   This  is  also  true  when  a  change  in  the  JTouch  Mobile  template  settings  is  made  to   ensure  the  latest  settings  are  being  used.5.    If  there  is  a  need  for  our   services.    This  means  that   the  JTouch  Mobile  template  requires  a  module  assigned  to  this  position  to  display  this   button.  compress  the  content.  simply  go  back  to  the  JTouch  Mobile  template  and  click  on  Preview  Mobile   Version  under  the  Look  and  Feel  section.       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).    This  will  restore  the  desktop  version  for  the  web  browser  on   that  computer.    For  support  requirements   higher  than  our  basic  level.  then  the  web  browser  for  that  computer  that  you   are  on  will  now  see  the  mobile  version  of  the  site.  and  save  it  to  the  cache   folder.    This  caching  folder  is  located  at  /cache/jtouch25.           41   .    Once  the  cache  is  in  place.    You  can  also  try  clearing   your  cache  under  the  Advanced  Parameters  tab  of  the  JTouch  Mobile  template.    You  can  post   your  support  questions  or  search  for  answers  on  our  forum.    This  time.  subsequent  visits  will   be  faster.       Note:    Please  do  not  send  support  questions  to  the  above  email  address.or  companies  at  any  level.  To  get  the  desktop  version  back  on  that   computer.  a  “cache”  folder  was  created  and  used  as  a  buffer  for   CSS  and  JavaScript  files.  please  refer  to  the  “Adding  a  Custom   Menu”  section  of  this  document.    We  are  very  skilled  and  what  we  do  and  using  our   professional  services  also  supports  our  open  source  endeavors.com.       Q:    Where  is  the  Switch  to  Desktop  button?     A:    The  Switch  to  Desktop  button  is  display  at  the  jtouch-­‐menu  position.       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.    If  you  are  adding  a  menu  to  call  this  module.  be  sure  to  click  on  the  top  bar  of  the   preview  window  to  close  it.     11 FAQs   Q:    Why  do  I  see  the  mobile  version  on  a  desktop  browser  instead  of  the  desktop   version?     A.  please  consider  subscribing  to  our  membership  programs.    It  will  take  a   little  longer  for  the  first  time  to  merge  files.20.  please  feel  free  to  contact  us  at  proservices@griddydesigns.    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.