Joomla! templating

Joomla! templa tes

Presentation “Joomla! templates” - http://slideshare.net/yireo
Jisse Reitsma (jisse@yireo.com) - Twitter @yireo

My na m e is Jisse Re itsma
Joomla! enthousiast
PHP programmer
Lead developer of Yireo
Joomla! templates-book (NL)

and I like recursive jokes


My presenta tion
Part I - Joomla! templating
Part II - Basic code
Part III - Advanced design

Slides: http://slideshare.net/yireo


Pa rt I
Joomla! templa ting


Joomla! extensions
Components
Modules
Plugins
Templates
Libraries
Language packs


Joomla! bootstrap
Component is loaded
Template is loaded
Modules are loaded
Component-output is added to template
Module-output is added to template


Installa tion (1 /2)
Install a new template
Installing ZIP-file using Extension Manager


Installa tion (2 /2)
Upload new template through FTP
Use Discover-method in Extension Manager


Templa te vs Styles
Template: Actual files on filesystem
Template Style: Configured set of options (parameters)


Exa mple: Beez options


Mod ule positions


Menu assignm ent


Ge t sta rted
Use 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)


Pa rt II
Basic c od e


Templa te-files
templateDetails.xml favicon.ico
index.php index.html
css/template.css error.php
less/template.css component.php
images/ template_thumbnail.png
javascript/
languages/


templa teDe tails.xml (1 /3)


templa teDe tails.xml Pa rts
<name>
<author*> + <creationDate>
<copyright> + <license>
<description>
<files> (<filename> + <folder>)
<positions>
<languages>
<config>


ind ex.php (1 /3)


ind ex.php (2 /3)


ind ex.php (3 /3)


ind ex.php Pa rts
HTML-code
PHP-code
<jdoc>-tags


jdoc-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” />


Pre view mod ule positions


PHP-c od e
Base 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


Pa rt III
A dva nced c oncepts


Templa ting
Template overrides / output overrides
HTML5 compatibility
Microdata
Code stripping
Custom error.php
Additional module-chromes


Outd a ted stuf f
HTML4 coding (<b>, <font>, <i>)
XHTML 1.0 / XHTML 1.1
Table-based design
From PhotoShop to webdesign
Box-model


Mod er n stuf f
HTML5 + CSS3
Responsive design, CSS frameworks
From content to webdesign to PhotoShop
Grid-model


Box vs Grid
Box-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


Wha t first?
Design first?
Mobile first?
Wireframing?
Content first?
GatherContent


Twitter Bootstrap
Used in Joomla! 3.0 backend
New standard for templates and extensions
Generic way of defining HTML-code
Standardized CSS-code and jQuery-effects


LESS & SASS
Used in Twitter Bootstrap
Better syntax than CSS
Hierarchy, variables, patterns, quirks
Convert into CSS
Using JavaScript helper
Using PHP LESS or SASS compiler


CSS fra m ewor ks
Twitter Bootstrap
960s, 1140s
Foundation Zurp
ZASS (uses SASS)


In short
Part 1: Joomla! templating
Discovery; Copy templates; Templates vs Styles

Part 2: Basic code
JDOC-tags; XML-definition; PHP-parameters

Part 3: Advanced design concepts
HTML5, Responsive design, Box vs Grid,
CSS-frameworks (Bootstrap, 960s), jQuery effects


so fa r, a ny questions?


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


#JUG076-templa te

15 Euro discount
on any Yireo extension
until 31 December 2012


Joomla! templating

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Viewers also liked

Viewers also liked (20)

Similar to Joomla! templating

Similar to Joomla! templating (20)

More from Yireo

More from Yireo (20)

Joomla! templating