Joomla! templating
description
Transcript of Joomla! templating
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Joomla! templa tesJoomla! templa tes
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
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
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Part IJoomla! templa t ing
Pa rt IJoomla! templa t ing
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
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
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
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
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)
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Exa mple : Beez opt i onsExa mple : Beez opt i ons
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
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
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
Menu ass ignm entMenu ass ignm ent
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)
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
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
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)/
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)/
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)/
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>
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
i nd ex .php (1 3)/i nd ex .php (1 3)/
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
i nd ex .php (2 3)/i nd ex.php (2 3)/
Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo
i nd ex .php (3 3)/i nd ex .php (3 3)/
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
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” />
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
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
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
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
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
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
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
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
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
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
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)
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
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?
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
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