joomla! templating
DESCRIPTION
Presentation on Joomla! templating. Used during Joomla! User Group meeting in Breda, NL (JUG076).TRANSCRIPT
![Page 1: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/1.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Joomla! templa tesJoomla! templa tes
![Page 2: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/2.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
My na m e is Jisse Re itsmaMy na m e is Jisse Re itsmaJoomla! enthousiast
PHP programmer
Lead developer of Yireo
Joomla! templates-book (NL)
and I like recursive jokes
![Page 3: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/3.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
My presenta t i onMy presenta t i onPart I - Joomla! templating
Part II - Basic code
Part III - Advanced design
Slides: http://slideshare.net/yireo
![Page 4: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/4.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Part IJoomla! templa t ing
Pa rt IJoomla! templa t ing
![Page 5: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/5.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Joomla! extens i onsJoomla! extens i onsComponents
Modules
Plugins
Temp la tes
Libraries
Language packs
![Page 6: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/6.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Joomla! bootstrapJoomla! bootstrapComponent is loaded
Template is loaded
Modules are loaded
Component-output is added to template
Module-output is added to template
![Page 7: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/7.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
I nsta l l a t i on (1 2)/I nsta l l a t i on (1 2)/
Install a new template
Installing ZIP-file using Extens ion Manager
![Page 8: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/8.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
I nsta l l a t i on (2 2)/I nsta l l a t i on (2 2)/
Upload new template through FTP
Use D iscover -method in Extens ion Manager
![Page 9: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/9.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Templa te vs Sty lesTempla te vs Sty lesTemp la te : Actual files on filesystem
Temp la te S ty le : Configured set of options (parameters)
![Page 10: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/10.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Exa mple : Beez opt i onsExa mple : Beez opt i ons
![Page 11: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/11.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Mod u le pos i t i onsMod u le pos i t i ons
![Page 12: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/12.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Mod u le pos i t i onsMod u le pos i t i ons
![Page 13: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/13.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Menu ass ignm entMenu ass ignm ent
![Page 14: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/14.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Get sta rtedGe t sta rtedUse existing template
YOOtheme, RocketTheme, JoomlArt, JoomlaBamboo
Build your own template
From scratch (hard-core)
From existing framework
– Twitter Bootstrap
– Warp (YOOtheme), Zen (JoomlArt), Gantry (RocketTheme)
![Page 15: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/15.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Part I IBas ic c od ePart I I
Bas ic c od e
![Page 16: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/16.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Templa te-fi l esTempla te-fi l estemplateDetails.xml
index.php
css/template.css
less/template.css
images/
javascript/
languages/
favicon.ico
index.html
error.php
component.php
template_thumbnail.png
![Page 17: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/17.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
templa teDeta i ls.xml (1 3)/templa teDeta i ls.xml (1 3)/
![Page 18: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/18.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
templa teDeta i ls.xml (2 3)/templa teDeta i ls.xml (2 3)/
![Page 19: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/19.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
templa teDeta i ls.xml (3 3)/templa teDeta i ls.xml (3 3)/
![Page 20: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/20.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
templa teDeta i ls.xml Pa rtstempla teDeta i ls.xml Pa rts<name><author*> + <creationDate><copyright> + <license><description><files> (<filename> + <folder>)<positions><languages><config>
![Page 21: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/21.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
i nd ex .php (1 3)/i nd ex .php (1 3)/
![Page 22: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/22.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
i nd ex .php (2 3)/i nd ex.php (2 3)/
![Page 23: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/23.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
i nd ex .php (3 3)/i nd ex .php (3 3)/
![Page 24: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/24.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
i nd ex .php Pa rtsind ex.php Pa rtsHTML-code
PHP-code
<jdoc>-tags
![Page 25: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/25.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
j d oc-tagsjdoc-tags<jdoc:include type=”head” /><jdoc:include type=”component” /><jdoc:include type=”message” /><jdoc:include type=”modules” name=”positiona” /><jdoc:include type=”modules” name=”positionb” /><jdoc:include type=”modules” name=”positionc” /><jdoc:include type=”modules” name=”positiond” /><jdoc:include type=”modules” name=”positione”
style=”custom” headerLevel=”3” />
![Page 26: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/26.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Pre v iew mod u le pos i t i onsPre v iew mod u le pos i t i ons
![Page 27: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/27.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
PHP-c od ePHP-c od eBase variables
$this>template, $this>language, $this>baseurl
Parameters
$app = JFactory::getApplication();
$templateparams = $app>getTemplate(true)>params;
echo $templateparams>get('color')
if-else
Yireo Template Helper
![Page 28: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/28.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Part I I IA dva nced c oncepts
Part I I IA dva nced c oncepts
![Page 29: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/29.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Templa t ingTempla t ingTemplate overrides / output overrides
HTML5 compatibility
Microdata
Code stripping
Custom error.php
Additional module-chromes
![Page 30: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/30.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Outd a ted stuf fOutd a ted stuf fHTML4 coding (<b>, <font>, <i>)
XHTML 1.0 / XHTML 1.1
Table-based design
From PhotoShop to webdesign
Box-model
![Page 31: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/31.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Mod ern stuf fMod ern stuf fHTML5 + CSS3
Responsive design, CSS frameworks
From content to webdesign to PhotoShop
Grid-model
![Page 32: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/32.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Box vs GridBox vs GridBox-model
Ask your designer to create a PSD
Convert design into boxes as good as you can
Grid-model
Start with a grid
Determine what can go where
Ask your designer to create a PSD
![Page 33: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/33.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Wha t first?Wha t first?Design first?
Mobile first?
Wireframing?
Content first?
GatherContent
![Page 34: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/34.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Twitter BootstrapTwitter BootstrapUsed in Joomla! 3.0 backend
New standard for templates and extensions
Generic way of defining HTML-code
Standardized CSS-code and jQuery-effects
![Page 35: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/35.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
LESS & SASSLESS & SASSUsed in Twitter Bootstrap
Better syntax than CSS
Hierarchy, variables, patterns, quirks
Convert into CSS
Using JavaScript helper
Using PHP LESS or SASS compiler
![Page 36: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/36.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
CSS fra m eworksCSS fra m eworksTwitter Bootstrap
960s, 1140s
Foundation Zurp
ZASS (uses SASS)
![Page 37: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/37.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
I n shortIn shortPart 1: Joomla! templating
Discovery; Copy templates; Templates vs Styles
Part 2: Basic codeJDOC-tags; XML-definition; PHP-parameters
Part 3: Advanced design conceptsHTML5, Responsive design, Box vs Grid, CSS-frameworks (Bootstrap, 960s), jQuery effects
![Page 38: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/38.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
so fa r , a ny quest i ons?so fa r , a ny quest i ons?
![Page 39: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/39.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
som e Yireo extens i onssom e Yireo extens i onsSSLRed i rect (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
![Page 40: Joomla! templating](https://reader033.vdocument.in/reader033/viewer/2022061300/54c7c74b4a795907128b45a5/html5/thumbnails/40.jpg)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
JUG076-templa te#JUG076-templa te#
15 Euro d iscount
on any Yireo extension
until 31 December 2012