Joomla! templa tes  Presentation “Joomla! templates” - http://slideshare.net/yireo  Jisse Reitsma (jisse@yireo.com) - Twit...
My na m e is Jisse Re itsmaJoomla! enthousiastPHP programmerLead developer of YireoJoomla! templates-book (NL)     and I l...
My presenta tionPart I - Joomla! templatingPart II - Basic codePart III - Advanced designSlides: http://slideshare.net/yir...
Pa rt IJoomla! templa ting  Presentation “Joomla! templates” - http://slideshare.net/yireo  Jisse Reitsma (jisse@yireo.com...
Joomla! extensionsComponentsModulesPluginsTemplatesLibrariesLanguage packs                 Presentation “Joomla! templates...
Joomla! bootstrapComponent is loadedTemplate is loadedModules are loadedComponent-output is added to templateModule-output...
Installa tion (1 /2)Install a new template    Installing ZIP-file using Extension Manager                  Presentation “J...
Installa tion (2 /2)Upload new template through FTP   Use Discover-method in Extension Manager                Presentation...
Templa te vs StylesTemplate: Actual files on filesystemTemplate Style: Configured set of options (parameters)             ...
Exa mple: Beez options  Presentation “Joomla! templates” - http://slideshare.net/yireo  Jisse Reitsma (jisse@yireo.com) - ...
Mod ule positionsPresentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @...
Mod ule positionsPresentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @...
Menu assignm entPresentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @y...
Ge t sta rtedUse existing template    YOOtheme, RocketTheme, JoomlArt, JoomlaBambooBuild your own template    From scratch...
Pa rt II      Basic c od ePresentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - ...
Templa te-filestemplateDetails.xml                                    favicon.icoindex.php                                ...
templa teDe tails.xml (1 /3)    Presentation “Joomla! templates” - http://slideshare.net/yireo    Jisse Reitsma (jisse@yir...
templa teDe tails.xml (2 /3)    Presentation “Joomla! templates” - http://slideshare.net/yireo    Jisse Reitsma (jisse@yir...
templa teDe tails.xml (3 /3)    Presentation “Joomla! templates” - http://slideshare.net/yireo    Jisse Reitsma (jisse@yir...
templa teDe tails.xml Pa rts<name><author*> + <creationDate><copyright> + <license><description><files> (<filename> + <fol...
ind ex.php (1 /3)Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @...
ind ex.php (2 /3)Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @...
ind ex.php (3 /3)Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @...
ind ex.php Pa rtsHTML-codePHP-code<jdoc>-tags              Presentation “Joomla! templates” - http://slideshare.net/yireo ...
jdoc-tags<jdoc:include type=”head” /><jdoc:include type=”component” /><jdoc:include type=”message” /><jdoc:include type=”m...
Pre view mod ule positions    Presentation “Joomla! templates” - http://slideshare.net/yireo    Jisse Reitsma (jisse@yireo...
PHP-c od eBase variables    $this­>template, $this­>language, $this­>baseurlParameters    $app = JFactory::getApplication(...
Pa rt IIIA dva nced c oncepts   Presentation “Joomla! templates” - http://slideshare.net/yireo   Jisse Reitsma (jisse@yire...
Templa tingTemplate overrides / output overrides    HTML5 compatibility    Microdata    Code strippingCustom error.phpAddi...
Outd a ted stuf fHTML4 coding (<b>, <font>, <i>)XHTML 1.0 / XHTML 1.1Table-based designFrom PhotoShop to webdesignBox-mode...
Mod er n stuf fHTML5 + CSS3Responsive design, CSS frameworksFrom content to webdesign to PhotoShopGrid-model              ...
Box vs GridBox-model   Ask your designer to create a PSD   Convert design into boxes as good as you canGrid-model   Start ...
Wha t first?Design first?Mobile first?    Wireframing?Content first?    GatherContent                    Presentation “Joo...
Twitter BootstrapUsed in Joomla! 3.0 backendNew standard for templates and extensionsGeneric way of defining HTML-codeStan...
LESS & SASSUsed in Twitter BootstrapBetter syntax than CSS    Hierarchy, variables, patterns, quirksConvert into CSS    Us...
CSS fra m ewor ksTwitter Bootstrap960s, 1140sFoundation ZurpZASS (uses SASS)                    Presentation “Joomla! temp...
In shortPart 1: Joomla! templating   Discovery; Copy templates; Templates vs StylesPart 2: Basic code   JDOC-tags; XML-def...
so fa r, a ny questions?  Presentation “Joomla! templates” - http://slideshare.net/yireo  Jisse Reitsma (jisse@yireo.com) ...
som e Yireo extensions             SSLRedirect (Joomla! plugin)          Enforce HTTPS on specific pages  Dynamic404: (Joo...
#JUG076-templa te 15 Euro discounton any Yireo extensionuntil 31 December 2012       Presentation “Joomla! templates” - ht...
Upcoming SlideShare
Loading in …5
×

Joomla! templating

1,504 views
1,406 views

Published on

Presentation on Joomla! templating. Used during Joomla! User Group meeting in Breda, NL (JUG076).

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,504
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
61
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Joomla! templating

  1. 1. Joomla! templa tes Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  2. 2. My na m e is Jisse Re itsmaJoomla! enthousiastPHP programmerLead developer of YireoJoomla! templates-book (NL) and I like recursive jokes Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  3. 3. My presenta tionPart I - Joomla! templatingPart II - Basic codePart III - Advanced designSlides: http://slideshare.net/yireo Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  4. 4. Pa rt IJoomla! templa ting Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  5. 5. Joomla! extensionsComponentsModulesPluginsTemplatesLibrariesLanguage packs Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  6. 6. Joomla! bootstrapComponent is loadedTemplate is loadedModules are loadedComponent-output is added to templateModule-output is added to template Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  7. 7. Installa tion (1 /2)Install a new template Installing ZIP-file using Extension Manager Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  8. 8. Installa tion (2 /2)Upload new template through FTP Use Discover-method in Extension Manager Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  9. 9. Templa te vs StylesTemplate: Actual files on filesystemTemplate Style: Configured set of options (parameters) Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  10. 10. Exa mple: Beez options Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  11. 11. Mod ule positionsPresentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo
  12. 12. Mod ule positionsPresentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo
  13. 13. Menu assignm entPresentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo
  14. 14. Ge t sta rtedUse existing template YOOtheme, RocketTheme, JoomlArt, JoomlaBambooBuild your own template From scratch (hard-core) From existing framework – Twitter Bootstrap – Warp (YOOtheme), Zen (JoomlArt), Gantry (RocketTheme) Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  15. 15. Pa rt II Basic c od ePresentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo
  16. 16. Templa te-filestemplateDetails.xml favicon.icoindex.php index.htmlcss/template.css error.phpless/template.css component.phpimages/ template_thumbnail.pngjavascript/languages/ Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  17. 17. templa teDe tails.xml (1 /3) Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  18. 18. templa teDe tails.xml (2 /3) Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  19. 19. templa teDe tails.xml (3 /3) Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  20. 20. templa teDe tails.xml Pa rts<name><author*> + <creationDate><copyright> + <license><description><files> (<filename> + <folder>)<positions><languages><config> Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  21. 21. ind ex.php (1 /3)Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo
  22. 22. ind ex.php (2 /3)Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo
  23. 23. ind ex.php (3 /3)Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo
  24. 24. ind ex.php Pa rtsHTML-codePHP-code<jdoc>-tags Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  25. 25. jdoc-tags<jdoc:include type=”head” /><jdoc:include type=”component” /><jdoc:include type=”message” /><jdoc:include type=”modules” name=”position­a” /><jdoc:include type=”modules” name=”position­b” /><jdoc:include type=”modules” name=”position­c” /><jdoc:include type=”modules” name=”position­d” /><jdoc:include type=”modules” name=”position­e”     style=”custom” headerLevel=”3” /> Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  26. 26. Pre view mod ule positions Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  27. 27. PHP-c od eBase variables $this­>template, $this­>language, $this­>baseurlParameters $app = JFactory::getApplication(); $templateparams = $app­>getTemplate(true)­>params; echo $templateparams­>get(color)if-else Yireo Template Helper Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  28. 28. Pa rt IIIA dva nced c oncepts Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  29. 29. Templa tingTemplate overrides / output overrides HTML5 compatibility Microdata Code strippingCustom error.phpAdditional module-chromes Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  30. 30. Outd a ted stuf fHTML4 coding (<b>, <font>, <i>)XHTML 1.0 / XHTML 1.1Table-based designFrom PhotoShop to webdesignBox-model Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  31. 31. Mod er n stuf fHTML5 + CSS3Responsive design, CSS frameworksFrom content to webdesign to PhotoShopGrid-model Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  32. 32. Box vs GridBox-model Ask your designer to create a PSD Convert design into boxes as good as you canGrid-model Start with a grid Determine what can go where Ask your designer to create a PSD Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  33. 33. Wha t first?Design first?Mobile first? Wireframing?Content first? GatherContent Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  34. 34. Twitter BootstrapUsed in Joomla! 3.0 backendNew standard for templates and extensionsGeneric way of defining HTML-codeStandardized CSS-code and jQuery-effects Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  35. 35. LESS & SASSUsed in Twitter BootstrapBetter syntax than CSS Hierarchy, variables, patterns, quirksConvert into CSS Using JavaScript helper Using PHP LESS or SASS compiler Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  36. 36. CSS fra m ewor ksTwitter Bootstrap960s, 1140sFoundation ZurpZASS (uses SASS) Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  37. 37. In shortPart 1: Joomla! templating Discovery; Copy templates; Templates vs StylesPart 2: Basic code JDOC-tags; XML-definition; PHP-parametersPart 3: Advanced design concepts HTML5, Responsive design, Box vs Grid, CSS-frameworks (Bootstrap, 960s), jQuery effects Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  38. 38. so fa r, a ny questions? Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  39. 39. som e Yireo extensions SSLRedirect (Joomla! plugin) Enforce HTTPS on specific pages Dynamic404: (Joomla! component + plugin) Replace ugly 404-page with decent error-page; Search database automatically for possible 404-matches Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo
  40. 40. #JUG076-templa te 15 Euro discounton any Yireo extensionuntil 31 December 2012 Presentation “Joomla! templates” - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo

×