Jtouch25  – В a В mobile В & В touch В friendly В template В for В Joomla В 2.5 В How В To В Install В Jtouch25 В В В Document В version: В 3.1 В Release: В 2012 В October В 28 В Author: В @nguyen, В @catacomber В of В JtouchMobile.com В В© В 2012 В JtouchMobile.com В www.jtouchmobile.com В Table В of В Contents В 1 В ABOUT В THIS В DOCUMENT В 2 В 2 В INTRODUCTION В 2 В 3 В REQUIREMENTS В 3 В 4 В INSTALL В 3 В 4.1 В INSTALL В JTOUCH В PACKAGE В 4.2 В JTOUCH В MOBILE В CONTROLLER В PLUGIN В SETTINGS В 4.3 В JTOUCH25 В TEMPLATE В SETTINGS В 3 В 4 В 6 В 5 В UPGRADE  – В UNINSTALL В 16 В 5.1 В UPGRADE В 5.2 В UNINSTALL В 16 В 16 В 6 В MODULE В POSITIONS В & В HOW В TO В SETUP В 16 В 6.1 В 6.2 В 6.3 В 6.4 В 6.5 В 6.6 В 6.7 В 6.8 В 6.9 В 18 В 19 В 19 В 21 В 22 В 23 В 24 В 24 В 24 В В CHANGE В HEADER В BANNER/LOGO В MODULES В IN В TAB: В BEST В USE В FOR В VIRTUEMART В 2 В MODULES В ADD В A В MENU В TO В MENU В SCREEN В PAGE В ADD В A  “SWITCH В TO В MOBILE” В LINK/BUTTON В CREATE В A В NAVIGATOR В MENU В WITH В ICON В ARTICLE В IMAGE В SLIDE В SHOW В MODULE, В SWIPE В MODE В TINY В BUT В COOL В ARTICLE В LISTING В MODULE В ADVANCED В -­‐ В CONTENT В OVERFLOW В ADVANCED В -­‐ В CUSTOMIZE В DESKTOP В SWITCHER В 1 В 6.10 В CREATE В A  “CLICK В TO В CALL” В BUTTON В 6.11 В MAKE В A В TOUCH В STYLE В MENU В 25 В 25 В 7 В CUSTOMIZE В THEME В 26 В 7.1 В CUSTOMIZE В JQUERYMOBILE В THEME В 7.2 В CUSTOMIZE В JOOMLA В LAYOUT В 26 В 31 В 8 В KNOW В ABOUT В LIMITS В 32 В 8.1 В MOBILE В SCREEN В AND В COMPATIBLE В ISSUES В 8.2 В JQUERY В & В JQUERYMOBILE В 32 В 33 В 9 В DO В IT В YOURSELF В 33 В 10 В BUSINESS В WITH В US В 33 В В В 1 About В this В document В This В document В describes В basic В steps В to В setup В a В template В for В Joomla В 2.5  – В Jtouch25. В It В also В provides В some В tips В to В help В you В use В some В key В features В of В Jtouch25. В В 2 Introduction В Jtouch25 В is В a В Joomla В 2.5+ В template, В designed В with  “mobile В first” В in В mind. В It В is В not В a В desktop В template, В but В designed В for В mobile. В Jtouch В helps В your В website В look В nice В and В accessible В on В the В small В screen В of В smart В phones В and В tablets. В В В Key В features:  • Tabless В design: В HTML5 В + В CSS3  • Displays В content В really В nicely В in В smart В phone В and В tablet В environments  • Mobilizes В not В only В Joomla В pages, В but В also В your В Virtuemart В web-­‐shop В and В Kunena В forum   • Built В based В on В jQueryMobile  • Open В source В В В Jtouch25 В is В a В product В of В JtouchMobile.com. В В For В more В information В or В support, В please В visit В our В official В website: В http://www.jtouchmobile.com В В В Or В follow В us В on В Twitter: В https://twitter.com/MobileMeWs В В For В business, В contact В us В at: В Nguyen В ([email protected]) В 2 В В 3 Requirements В В Your В website В is В running В on В Joomla В 2.5.6+ В В If В you В are В using В VirtueMart В or В Kunena, В make В sure В that В they В are В the В latest В versions. В В В Our В working В versions: В Joomla В 2.5.7, В jQueryMobile В 1.2 В final, В VirtueMart В 2.0.12, В Kunena В 2.0.2 В Jtouch25 В version В used В to В write В this В document: В 2.5.20-­‐beta1 В 4 Install В В Download В the В latest В release В of В the В Jtouch25 В template В by В clicking В here. В В Unzip В the В downloaded В package, В read В the В HowTo В document  – В yes, В you В are В already В doing В this. В В We В just В need В to В do В 2 В main В steps В to В install В Jtouch25, В do В not В forget В one В of В them: В 1. В Install В Jtouch В package В 2. В Do В the В plugin В settings В 3. В Do В the В template В settings В В 4.1 Install В Jtouch В package В Sine В Jtouch В 2.5.20, В we В just В need В to В install В only В one В package В for В the В whole В mobile В system. В В Log В in В to В your В Joomla В backend В Г пѓ В Extensions В Г пѓ В Extension В Manager В Г пѓ В Browse В to В file В pak_jtouch25.zip В Г пѓ В then В click В to  “Upload В & В Install” В button В to В install В the В package. В В В В If В everything В goes В fine, В you В can В see В the В welcome В message: В В В 3 В В В Do В not В skip В the В welcome В message; В there В has В links В to В 2 В steps В you В need В to В be В done В to В complete В the В installation. В В 4.2 Jtouch В Mobile В Controller В plugin В settings В We В want В to В keep В our В current В desktop В template, В and В only В when В users В access В our В website В by В using В a В mobile В device В like В Apple В iPhone В or В Nokia В Lumina, В will В Jtouch25 В be В used. В How В can В we В do В it? В В Now В follow В the В first В link В from В the В installation В welcome В message В page, В or В from В backend В Menu В Г пѓ В Extensions В Г пѓ В Plugin В and В search В for В keyword  “Jtouch” В to В open В the В plugin В setting В page. В В В В Enable В the В plugin В and В select В Public В for В Access В first. В Then В take В a В look В to В the В right В side, В where В we В can В do В some В settings В for В the В plugin: В В 4 В В В В [Tab В Mobile В Detect] В First, В we В should В enable В the В switcher В function. В If В you В do В not В set В it, В our В site В will В never В display В the В mobile В version. В You В can В select В No В for В temporary В turn В off В the В mobile В display В for В your В website. В В If В you В have В another В template В for В your В mobile В version В than В Jtouch25, В you В can В also В select В it В in В the В dropdown В box  “Switch В to В Template”. В If В not, В just В let  “jtouch25” В as В default. В В Do В you В want В to В apply В the В mobile В template В for В tablets В (iPad, В Kindle В Fire, В etc.) В or В not. В If В yes, В please В set В it В in  “Includes В tablets” В options. В В В Mobile В Home В Page: В If В you В want В to В display В a В different В page В as В home В page В for В mobile В access, В you В can В select В the В menu В item В from В the В dropdown В box. В В When В you В set В it, В every В time В user В access В to В your В index В page В from В their В mobiles, В the В system В will В redirect В to В this В new В page, В instead В of В using В them В same В default В page В as В desktop В version. В В В [Tab В For В Jtouch25] В В В В 5 В Only В Jtouch В Scripts: В Only В load В css В and В javascript В resources В that В are В provided В by В the В Jtouch25 В template, В and В remove В all В other В scripts. В В Important: В В Only В select В No В if В you’re В an В expert В in В jQueryMobile В or В the  “Yes” В selection В does В not В work В with В your В extensions. В В Remove В Mootools: В If В the  “Only В Jtouch В Scripts” В option В is В set В to  “No”, В then В you В may В want В to В include В your В resource В to В the В HTML В output; В does В it В include В Mootools В and В other В Joomla В core В javascript В (Mootools, В caption, В tooltip)? В Select  “Yes” В is В recommended В in В this В situation. В But В sometimes В we В can В select  “No” В if В your В mobile В website В requires В Mootools В script. В В Since В Jtouch В 2.5.10, В we В add В a  “.noConflict()” В option В to В all В Jtouch В core В scripts. В Now В Jtouch В can В work В with В Mootools. В В Save В your В settings В and В open В the В site В in В a В mobile В device В to В see В the В difference В between В the В desktop В and В mobile В environment. В В Q: В My В mobile В site В looks В like В the В desktop В view В even В though В I’ve В cleared В the В browser В cache? В Г пѓ В В Make В sure В you В have В installed В and В enabled В the В Jtouch В mobile В plugin. В Then В try В to В turn В off В Joomla В caching В (Menu В Site В Г пѓ В Global В Configuration В Г пѓ В System В Г пѓ В Caching В Setting). В Some В users В report В that В their В mobile В website В can’t В work В well В with В caching В on. В В 4.3 Jtouch25 В Template В settings В Click В to В the В second В link В from В the В welcome В message В above В to В visit В your В Template В Manager В page. В From В there, В you В can В click В to В the В Jtouch25 В name В to В open В its В setting В page. В В Notes: В you В also В can В open В the В settings В page В any В time В by В access В to В Menu В Extensions В Г пѓ В Template В Manager В В В В В There В are В some В options В you В can В change В for В the В template: В В 6 В В [Tab В Look В and В Feel] В В В Page В Theme: В Select В a В built-­‐in В theme В for В your В website. В We В have В 5 В defined В color В sets В named В from В A В to В E. В В В В В Notes: В See В more В color В sets В by В clicking В here. В В F В or В G В are В used В in В case В you’ve В designed В a В custom В theme В and В named В it В as  “F” В or  “G”. В You В can В find В more В info В or В design В your В own В theme В by В reading В this В section:  “Customize В jQueryMobile В theme” В В В Header В Theme: В Select В color В sets В for В the В main В header В bar. В В Header В Button: В Select В the В layout В of В your В header В buttons: В Text В and В Image, В Only В Text, В or В Only В Image. В В 7 В В В Footer В Theme: В select В theme В for В footer В bar В В Show В Back В Button: В Always В display В a  “back” В button В on В the В header В bar. В You В can В select В to В display В the В button В with В text В and В image, В or В just В text, В or В turn В it В off. В В Fixed В Header: В The В header В bar В on В top В of В the В page. В В Select  “Yes” В to В stick В it В always В on В top В of В the В screen, В even В if В you В scroll В down В the В page. В В В В В Page В Transition: В В Effect В (slide, В fade…) В when В you В click В on В the  “Menu” В or  “Back” В icon. В В Note: В Some В devices В do В not В support В fixed В header, В flip В or В turn В effects. В Keep В the В default В settings В if В you В want В those В features В to В work В on В most В devices. В В В Main В Banner: В This В is В the В URL В to В the В picture В you В want В to В show В as В your В website В logo В or В main В banner. В В A В [300 В x В 70] В px В banner В with В logo В + В slogan В is В a В good В size В for В most В mobile В screens В В The В URL В can В be В a В relative В link, В or В full В path В link, В for В example: В images/mybanner.png В or В http://www.jtouchmobile.com/images/mybanner.png В В В Switch В to В Desktop В button: В В enable В the В switching В button В or В not. В If В you В have В select В TOP В or В BOTTOM, В the В button В will В be В shown В on В Menu В screen В page. В User В can В click В there В to В switch В from В mobile В view В to В desktop В view. В 8 В В В В В Desktop В Template В ID: В You В can В enable В a  “Switch В to В Desktop” В button В on В the В Menu В screen В by В specifying В the В ID В of В your В desktop В template В here. В To В find В the В ID, В just В open В the В template В manager В page В (Extensions В Г пѓ В Template В Manager). В Those В IDs В are В in В the В right В hand В column В of В the В list. В В Desktop В page: В If В you В have В enabled В the В switching, В then В you В can В select В which В desktop В page В will В be В redirect В to В after В the В switching: В current В page  – В which В user В is В viewing В mobile В his В mobile  – В or В redirect В to В a В specific В page В from В drop-­‐down В list В В В From В the В picture В above, В we В put В the В switching В button В to В top В of В the В Menu В screen, В and В if В user В clicks В to В this В button, В he В will В be В redirect В to В the  “VirtueMart” В page В В В В 9 В And В at В any В time, В you В can В click В on В the В button В mobile В site В in В a В popup В window. В В В В В В to В preview В your В Important! В Jtouch25 В can  “remember” В your В last В viewing В mode В (i.e.: В desktop В or В mobile). В If В you В do В a В preview В of В the В mobile В site В on В a В desktop В browser, В the В next В time В access В to В the В page, В you В will В see В the В MOBILE В version, В instead В of В DESKTOP. В В To В let В Jtouch В switch В back В to В the В desktop В view, В always В remember В click В to В the В TOP В bar В of В the В preview В window В if В you В want В to В close В preview В mode. В You В also В can В clear В cookies В of В your В web В browser В to В come В back В to В your В desktop В version. В В В В [Tab В iOS В Devices] В В 10 В В Add В to В Home В Screen: В displays В a В dialog В box В which В asks В your В visitor В to В add В your В website В icon В to В their В iOS В home В screen. В This В dialog В is В displayed В the В first В time В the В visitor В visits В your В website В or В if В your В website В is В not В added В to В their В home В screen В yet. В В В В You В can В change В the В default В logo В (Jtouch В logo) В by В your В website В logo В be В follow В the В next В setting  “Icons В Folder”. В В В Icons В Folder: В This В is В a В folder В placed В in В the В Jtouch25 В template В (/templates/jtouch25), В (you В can В see В it В if В you В look В at В your В website В via В ftp). В В It В contains В icon В files, В which В are В used В to В display В your В favicon, В your В web В app В icon В (like В the В dialog В above) В on В iOS В devices. В В Please В check В this В folder В to В find В out В how В many В icons В should В be В created В and В the В size В of В each В of В them. В For В example,  “57” В indicates В a В pixel В size В of В 57.    “icons” В folder В В You В can В create В your В own В icons В in В these В sizes В and В copy В them В via В ftp В to В this В folder В in В your В site. В Then В the В name В of В the В folder В that В would В go В in В the  “Icons В Folder” В slot В under  “IOS В Devices” В tab В would В be  “icons”. В В В 11 В В В But В if В you В want В to В make В it В so В you В don’t В need В to В replace В your В icons В each В time В there В is В an В update В of В Jtouch25, В create В a В new В folder В there В via В ftp В and В place В your В personalized В icons В in В that В new В folder В using В the В same В sizes В as В above В of В your В icon. В You В could В name В the В folder, В for В example, В myicons. В Then  “myicons” В would В go В in В the  “Icons В Folder” В slot, В not  “icons”. В В [Tab В Advanced В Parameters] В В В В Turn В off В Pages: В You В may В want В to В turn В off В the В display В of В components В from В your В home В page В or В other В pages. В Just В enter В the В ID(s) В of В the В Menu В Item В that В belongs В to В the В component В that В you В want В to В turn В off В (unload), В separated В by В commas, В for В example: В 1,3,20 В В В Debug: В Turn В on В this В option В to В use В un-­‐compressed В javascript В and В css В files. В Useful В for В a В developer, В but В may В cause В slowness В in В loading В time. В Not В recommended В for В a В live В site. В В Important! В Since В version В 2.5.20, В we В have В been В added В a  “caching” В feature В to В the В Jtouch25 В template. В All В main В css В and В javascript В files В will В be В merged В compressed В and В then В save В to В folder  “jtouch25” В of В the В Joomla В cache В folder В (/cache/jtouch25) В 12 В В В В So В remember В every В time В you В turn В the В Debug В Mode В to В OFF, В please В click В to В the В Clear В Cache
button В on В top В of  “Advanced В Parameters” В tab. В It В will В open В the В caching В page, В from В there В you В can В select  “jtouch25” В folder, В delete В it В to В let В the В system В re-­‐create В new В cached В files. В В В В If В you В do В not В clear В it, В the В template В will В keep В running В with В old В css/js В files, В and В may В lost В your В new В added В code. В В В Use В Default В jQuery: В Using В the В jQuery В javascript В provided В by В Jtouch В template В or В not. В Only В select  “No” В if В you В have В your В own В jQuery В inserted В to В the В site. В Make В sure В that В the В version В of В jQuery В 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 В just В structure В (STRUCTURE В ONLY). В В В Important! В Only В use В structure В CSS В when В you В have В a В fully В customized В theme, В from В swatch В A В to В E. В Please В read В the В section  “Customize В Theme” В for В more В info. В В 13 В В В Show В powered В by: В Displays В a В link В to В JtouchMobile.com. В You В can В turn В it В off, В but В please В keep В it В on В to В help В us В spread В the В Jtouch В template В to В the В world. В В В Module В Mapping: В Enter В a В position В alias В to В map В your В desktop В modules В to В mobile. В For В example: В if В you В want В to В display В modules В placed В on В the В 'left' В position В of В your В desktop В template В to В the В 'jtouch-­‐user1' В position В of В Jtouch25, В enter В 'left' В to В the В 'jtouch-­‐user1' В input В box. В В В [Tab В Google В Settings] В В В В Use В ReCaptcha: В If В you В are В using В ReCaptcha В for В login/registration В forms, В please В enable В this В option В and В also В (re) В input В the В public В key В you В got В from В Google В Recaptcha. В Jtouch25 В does В not В use В a В ReCaptcha В plugin  – В that’s В why В you В should В enter В the В key В here. В В В В В Use В Google В Analytics: В You В can В add В your В GA В codes В (account В and В domain) В to В enable В tracking В by В using В Google В Analytics В service. В В Enable В Google В AdSense: В As В GA В setup, В use В this В option В to В enable В Google В AdSense В display В on В all В pages В of В your В website. В You В can В select В top, В bottom В or В both В positions. В В В Please В note В that В this В option В is В used В in В case В you В are В using В Jtouch25 В as В your В template В for В mobile В access. В On В desktop, В you В can В find В a В ton В of В Google В AdSense В modules В in В the В Joomla В Extensions В list. В В 14 В В Script В Type: В Select В your В preferred В type В of В Google В AdSense В script: В using В PHP В code В or В Native В (javascript) В code. В These В both В have В the В same В function В of В displaying В Google В AdSense В on В all В of В your В mobile В pages. В Some В users В report В that В the В PHP В option В works В well В on В their В sites, В while В others В say В that В they В prefer В NATIVE. В В В [Tab В Other В Extensions] В В В For В VirtueMart В 2 В (2.0.11 В or В higher) В Responsive В Layout: В Select В YES В if В your В current В template В of В VirtueMart В 2 В does В not В display В well В on В mobile В screen. В Then В download В our В extra В template В for В VM, В follow В it В instruction В on В how В to В install В and В mobilize В your В shopping В cart. В В Notes: В The В VM В mobilizing В feature В is В only В available В for В our В GOLD В Donator. В Check В and В make В sure В that В you В have В these В folder В in В /templates/jtouch25/html В folder: В В В В В After В do В all В those В settings, В click В to В the В Save В or В Save В & В Close В button В to В apply В it В for В Jtouch25 В template. В В That’s В all В for В the В Jtouch25 В template В setup. В Next, В we В continue В our В work В by В configure В the В Jtouch В Mobile В Controller В plugin. В В В В 15 В В 5 Upgrade  – В Uninstall В 5.1 Upgrade В Which В Joomla В 2.5, В you В can В do В the В upgrade В just В like В install В new В extension. В Jtouch25 В is В designed В to В keep В your В previous В works В on В template В settings В or В override. В В But В we’re В always В asking В you В do В a В full В backup В first, В before В you В do В any В new В installation В or В upgrade. В AkeebarBackup В (http://akeebabackup.com) В is В a В recommended В tool В for В backup В a В Joomla! В website. В В Recommend: В If В you В are В using В Jtouch В 2.5.12, В to В upgrade В to В Jtouch В 2.5.20, В we В recommend В you В uninstall В Jtouch В first, В and В then В reinstall В it В as В a В new В setup. В В 5.2 Uninstall В From В Joomla В admin В menu В > В Extensions В > В Extension В Manager В > В click В to В tab  “Manage”: В Search В for В keyword  “jtouch25”, В select В those В 2 В extensions В and В then В click В to  “Uninstall” В icon В to В complete В the В removal. В В В В В 6 Module В positions В & В how В to В setup В We В have В about В 8 В positions В where В you В can В place В modules. В В В В Some В people В asked В us В why В they В have В different В names В than В usual:  “jtouch-­‐top”,  “jtouch-­‐menu”,  “jtouch-­‐rhtools”… В instead В of  “top”,  “right”…? В В В Г пѓ В Well, В we В can В change В them В to В the В usual В but В they В are В different В because В we В want В you В to В know В that В not В all В of В your В modules, В which В are В designed В for В desktop, В can В work В well В on В mobile. В You В need В to В test В and В make В sure В that В every В module В placed В to В the В 16 В В Jtouch В template В will В work. В You В can В change В Jtouch В naming В by В editing В options В of  “Module В Mapping” В in В Jtouch В template В settings. В __________________ В В I В can’t В find В those В positions; В say  “jtouch-­‐top”,  “jtouch-­‐user1”, В from В the  “Select В position” В list? В В Г пѓ В We В do В not В need В to В press В the  “select В position” В button, В just В put В the В name В of В the В position В in В the В input В box В В В В В 17 В Here В are В the В eight В positions В graphically: В (View В larger В size В by В opens В the В file В jtouch25.template.positions.jpg) В В Top: В Main: В В В В Bottom: В В В В В В В Some В suggestions: В В 6.1 Change В header В banner/logo В -­‐ В Design В a В 300x70px В banner В with В logo В + В slogan, В upload В it В to В your В Joomla В hosting, В set В its В path В to В the  “Main В Banner  “ В option В in В the В Jtouch25 В template В setting В to В have В a В top В banner В for В your В mobile В site, В like В this: В 18 В В В В В 6.2 Modules В in В tab: В best В use В for В Virtuemart В 2 В modules В -­‐ В Assign В VM В Cart, В VM В Category В and В Login В modules В to В jtouch-­‐tools В position В to В have В a В nice В cart В page: В В В В 6.3 Add В a В menu В to В Menu В screen В page В -­‐ В If В your В desktop В main В menu В is В too В complicated, В and В has В more В pages В than В can В work В well В in В mobile В Г пѓ В then В you В need В to В create В a В new В menu В with В less В menu В items В Г пѓ В then В put В that В menu В module В to В jtouch-­‐menu В position. В When В clicking В to В the  “Menu” В button В on В header В bar, В you В will В have В a В touch В friendly В menu В page, В like В this: В В В 19 В В В В How В do В I В do В this? В You В need В to В use В Menu В Manager В to В make В a В new В menu В for В your В mobile В view В (with В menu В items В you В want В to В display В on В mobile) В and В make В a В new В menu В module В for В your В mobile В menu В and В assign В that В module В to В the В jtouch-­‐menu В position В and В to В your В mobile В menu. В В В В For В the В new В menu: В В Go В to В Menu В Manager В and В create В a В new В menu. В Call В it В something В like В Mobile В Menu. В Then В add В new В menu В items В for В the В items В on В your В main В desktop В menu В that В you В want В to В show В up В in В your В mobile В view. В В For В example, В create В a В menu В item  “Home”, В give В it В Menu В item В type  “Menu В Item В Alias”, В call В it  “Home”. В Make В sure В you В have В created В a В module В for В your В mobile В view В in В Module В Manager. В В See В below. В When В your В new В mobile В menu В is В set В up В to В show В the В menu В items В you В want В to В display В on В mobile, В go В to В the В right В hand В side В of В the В menu В where В it В says  “Module В Assigned В for В this В Menu В Item”. В В Use В the В drop В down В menu В and В choose В the В name В of В the В Module В you В assigned В to В your В Mobile В View В for В Jtouch. В See В below. В В В For В the В new В module: В В From В Module В Manager В Г пѓ В Add В New В Г пѓ В Module В Г пѓ В on В Module В setting, В input В "jtouch-­‐
menu"  to  the  "Position"  option.   Where  it  says  "Select  Menu"  choose  the  name  of  the  special  menu  you  made  in  Menu  Manager  for  what  you  wanted  to  show  on  mobile.  For  Module  Assignment,  choose  "on  all  pages"  and  checkmark  all  the  items  that  are  in  your  menu.   20       6.4 Add  a  “Switch  to  Mobile”  link/button  In  case  you  want  to  add  a  link  on  your  desktop  menu  to  switch  back  to  mobile:   "Switch  to  Mobile  Version",  just  create  a  web  link  with  a  url  like  this:  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  your  Joomla  is  2.5,  then  X  is  the  ID  of  our  Jtouch25  template.  You  can  see  its  ID  in  the  list  of  the  Template  Manager.  For  example:  http://www.JtouchMobile.com/index.php?jtpl=118    21  6.5 Create  a  navigator  menu  with  icon  -­‐  Create  a  menu  module;  add  “-­‐nav”  to  its  Menu  class  suffix  option,  put  it  to  “jtouch-­‐nav”  position;    Module  Menu  settings:    On  the  Advanced  Options  tab:   Then  you  will  have  a  cool  navigator  menu  like  this:     Notes:  22   -­‐  The  icon  is  just  appearing  if  you  have  select  image  for  its  menu  item.  Do  it  when  create  or  edit  a  menu  item  -­‐  Do  not  put  more  than  3  items  on  a  horizontal  bar   -­‐  Create  a  custom  html  module,  put  it  to  the  “jtouch-­‐footer”  position  to  have  some  copyright  info  for  your  mobile  site,  like  this:
В В 6.6 Article В image В slide В show В module, В swipe В mode В В -­‐ В To В have В a В swipe В slide В show В for В articles, В create В a В newsflash В module, В from В the  “Advanced В options” В tab В Г пѓ В select  “jtouch-­‐slideshow” В for  “Alternative В layout”: В В В В Make В sure В that В you В have В at В least В one В picture В in В the В short В description В section В of В each В article. В В Swipe В to В left В or В right В to В see В each В slide’s В content. В В В 23 В В 6.7 Tiny В but В cool В article В listing В module В To В display В a В list В of В articles В with В a В small В picture В on В the В left, В you В can В put В an  “article В module” В to В jtouch-­‐user1 В or В jtouch-­‐user2, В and, В on В the  “Advanced В options” В tab В of В the В module В settings, В remember В to В select  “jtouch-­‐list” В for В the  “Alternative В layout” В option: В В В Alternative В layout В is В jtouch-­‐list В В В Here В it В is В В В В 6.8 Advanced В -­‐ В Content В Overflow В To В set В a В horizontal В scroll, В if В the В page В is В a В little В larger В than В the В viewing В area, В you В can В use В a В little В piece В of В javascript: В В <div style="width:100%; overflow:scroll;">
<div style="width:800px;">Put your js code here</div>
</div>
   Replace  800  by  the  size  you  need.   (But  I'm  not  sure  if  all  mobile  devices  support  the  overflow  property.)    6.9 Advanced  -­‐  Customize  Desktop  Switcher  If  you  have  a  different  home  page  for  mobile  and  desktop,  then  you  should  not  input  ID  to  "Desktop  Template  ID"  option.   You  need  to  create  an  html  static  link,  and  put  it  to  the  "jtouch-­‐menu"  position.  Here  is  the  content  for  the  static  module:   24   <a href="index.php?jtpl=YOUR_DESKTOP_TPL_ID" dataicon="gear" data-role="button" target="_self" datamini="true">Switch to Desktop version</a>
  “YOUR_DESKTOP_TPL_ID”  is  the  ID  of  the  template  you  are  using  for  desktop.  It  will  help  you  come  back  to  the  “index.php”  page  of  desktop,  whatever  the  url/page  you  have  for  your  mobile  version.    6.10 Create  a  “Click  to  Call”  button  If  you  want  to  put  “click  to  call  links”  for  your  mobile  browser,  you  can  find  help  here:  http://www.mobilexweb.com/blog/click-­‐to-­‐call-­‐links-­‐mobile-­‐browsers    6.11 Make  a  Touch  Style  Menu  And  it’s  easy  to  add  a  “touch”  style  to  your  content  page:  It  is  just  html  tags  with  some  special  attributes  added.  For  example,  if  you’d  like  to  have  a  list  view  like  our  menu        Just  create  an  ul-­‐li  as  normally  <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>
В В В And В then В add В some В attributes В to В <ul> В tag: В <ul data-role="listview" data-theme="a">
В В 25 В В Or В do В want В to В have В a В button В without В any В code? В В В В Here В is В the В code: В В <a href="index.html" data-role="button">Link button</a>
В В Easy? В Yes, В because В Jtouch В uses В jQueryMobile В as В its В core В engine. В В 7 Customize В theme В Jtouch25 В has В good В css В override В functionality В so В that В you В can В add В your В own В css В code В without В worrying В that В a В future В upgrade В of В the В template В may В remove В that В code. В В There В are В 2 В types В of В css В customization: В jQueryMobile В theme В and В your В Joomla В layout. В В If В you В are В not В a В web В developer, В we В do В not В recommend В you В following В these В steps. В Please В contact В a В developer В for В help В В 7.1 Customize В jQueryMobile В theme В Jtouch25 В uses В the В jQueryMobile В platform В to В create В the В template. В With В jQueryMobile, В you В can В create В a В new В theme В in В just В a В few В minutes. В В First, В you В should В understand В how В jQuery В builds В a В new В theme: В В http://jquerymobile.com/demos/1.2.0/docs/api/themes.html В В The В great В thing В is, В we В do В not В need В to В code, В then В build, В a В css В file, В we В have В a В visual В editor В where В you В just В need В to В click  – В click В then В click В to В download В the В theme. В Here В are В the В steps: В В Visit В http://jquerymobile.com/themeroller, В В Click В on В the  “Version” В and В select В 1.2.0 В В В В Remove В current В swatches В by В clicking В on  “Delete” В of В each В swatch В panel. В We В just В need В to В design В one В theme. В 26 В В В Click В the  “Inspector” В button В to В turn В it В on: В В В В В Now В click В the В element В and В change В its В options В to В have В a В new В layout: В В В В 27 В В In В this В sample, В the В name В of В the В new В theme  – В swatch  – В is  “A” В В When В you В think В the В new В theme В is В ok, В click В on В the  “Download” В button В В Г пѓ В enter  “jtouch-­‐custom” В for В the  “Theme В Name” В and В then В click  “Download В Zip” В to В download В the В theme В to В your В end. В В Unzip В the В downloaded В file: В В В 28 В В В В Copy В the В file  “jtouchcustom.min.css” В to  ““/template/jtouch25/css” В folder В of В your В Joomla В installation, В then В rename В the В file В to  “jtouch-­‐custom.css” В В В В Now В come В back В to В the В Jtouch25 В template В setting, В make В sure В that В you В have В selected  “A” В for В both В page В theme В and В header В theme: В В В Remember? В We В have В designed В the В new В theme В with В swatch-­‐name В is   “A”. В В On В tab  “Advanced В Parameters”, В make В sure В that В the В option  “Debug” В is В selected В to В ON: В В В 29 В В В If В you В do В a В full В customize В swatches, В from В A В to В E, В then В on В option  “JQM В CSS” В you В can В set В to В В to В reduce В duplicate В css В and В file В size. В В Save В those В settings В and В go В back В to В your В mobile В site В and В see В our В new В theme В applied: В В В New В theme В В If В everything В is В fine, В you В can В set В the  “Debug” В option В to В OFF В and В remember В to В click В to В the  “Clear В Cache” В button. В В 30 В В 7.2 Customize В Joomla В layout В В В The В jQueryMobile В theme В applies В to В the В whole В layout, В but В in В case В you В want В to В change В the В css В for В a В specific В element, В we В have В another В file В to В put В the В new В css В code В to: В В /templates/jtouch25/css/-­‐customize/mytheme.css В В В В -­‐ В Rename В the  “-­‐customize” В folder В to  “customize” В then В open В the В file  “mythem.css” В in В a В plain В text/css В editor, В and В put В your В css В code В to: В В В 31 В В Red В color В for В <h3> В tag, В italic В style В В -­‐ В Save В it, В go В back В to В your В site В and В see В how В it В looks: В В Before В В В After В В 8 Know В about В limits В 8.1 Mobile В screen В and В compatible В issues В Jtouch25 В requires В jQuery/jQueryMobile В library, В which В may В not В be В compatible В with В one В of В your В installed В extensions. В В Jtouch25 В uses В the В latest В technology В of В WWW: В HTML5 В + В CSS3 В which В works В on В most В major В + В up-­‐to-­‐date В browsers. В It В won’t В work В on В old В browsers В like В IE7, В Firefox В 3… В or В low В CPU В devices. В В В Check В and В make В sure В that В your В browsers В also В support В javascript. В В On В mobile В devices, В if В your В installed В extensions В are В not В on В the В list В of В those В supported В in В Jtouch25, В you В may В not В have В a В good В layout. В It’s В because В most В of В them В are В designed В for В desktop, В not В for В mobile В screens. В В Here В is В a В list В of В extensions В officially В supported В by В Jtouch25: В В 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 В 7. mod_articles_news: В add В slide-­‐show В mode В 8. com_virtuemart: В VirtueMart В 2 В (Sorry, В there В is В no В support В for В VM В 1) В 9. com_kunena: В Kunena В 1.7 В and В 2.0, В download В its В layout В from В a В separate В package. В You В can В find В more В info В here: В http://www.JtouchMobile.com/downloads/jtouch-­‐
ex/jtouch-­‐ex-­‐kunena-­‐template В В 32 В В В You В can В see В it В in В /templates/jtouch25/html В folder. В В Some В users В report В that В the В Jtouch25 В template В works В well В with В sh404SEF В and В uddeIM В extensions. В В 8.2 jQuery В & В jQueryMobile В Our В template В is В building В based В on В jQuery В 1.82 В & В jQueryMobile В 1.2.0; В It В is В always В upgraded В to В the В latest В version В of В those В 2 В scripts. В В If В you В have В jQuery В scripts В included В by В another В extension, В you В can В turn В off В the В version В called В by В Jtouch25 В template. В To В do В it, В please В open В the В Jtouch В template В setting В page В Г пѓ В tab В Advanced В Parameters В Г пѓ В option  “Use В default В jQuery” В set В to В NO. В В 9 Do В it В yourself В В Jtouch25 В is В a В free В and В open В source В project, В released В under В the В GPL В 3 В license. В You В can В download, В create В your В own В customization, В and В redistribute В it В without В permission В from В the В author, В but В we В ask В that В you В keep В the В license В and В author’s В name В notes В in В Jtouch25’s В source В code. В В Here В are В some В resources В that В may В be В useful В to В you:  • Learn В about В jQueryMobile: В http://jquerymobile.com  • Design В your В own В theme: В http://jquerymobile.com/themeroller В В If В you В need В a В hand, В feel В free В to В post В it В on В our В forum: В http://www.JtouchMobile.com/forum В 10 Business В with В us В For В any В business В discussion, В please В contact В us В via В [email protected]. В В В (Please В do В not В send В support В question, В you В can В post В or В search В for В answers В from В our В forum). В В В 33 В 

NM Wing Website Admin Area

SETTINGS TO BE MADE IN MOJINI WEB SITE THROUGH VPN

Creative Template Design or Static Website Design – Which One is Better?

DIY business plan template - The Social Business

Joomla! Template Blendvision v 1.0 Configuration Manual

Template Setup Guides & Guidelines

How to use.pdf

Amending and Using the Quick Letter Template - Hertfordshire Grid

Top 10 Reasons to Choose Joomla Development Services

Business Plan Template - Fast Business Plans

Mickey Mouse Clubhouse Cake Outline Template

How to Use WordPress

Weebly.com First Steps Weebly is the easiest way to build your own

Neils Really Easy Guide to Building Your Own Website

How to design an HTML and CSS web site using - click2solve

User Guide to Using the Linux Desktop

DomainDEVpro Learn How to Self-Publish Profitable - Contact

Step by Step guide to building a Wordpress site - PDF

A how-to guide and general information to help you get - Lyon 4020

Error c2079 cstring

User Manual Yaesu FT-991 Part 2

ADF Code Corner: How-to open a Bounded Task Flow in a - Oracle