Joomla! templating

Presentation “Joomla! templates” - http://slideshare.net/yireoJisse Reitsma ([email protected]) - Twitter @yireo

Joomla! templa tesJoomla! templa tes


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


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


Part IJoomla! templa t ing

Pa rt IJoomla! templa t ing


Joomla! extens i onsJoomla! extens i onsComponents

Modules

Plugins

Temp la tes

Libraries

Language packs


Joomla! bootstrapJoomla! bootstrapComponent is loaded

Template is loaded

Modules are loaded

Component-output is added to template

Module-output is added to template


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


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


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)


Exa mple : Beez opt i onsExa mple : Beez opt i ons


Mod u le pos i t i onsMod u le pos i t i ons


Mod u le pos i t i onsMod u le pos i t i ons


Menu ass ignm entMenu ass ignm ent


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)


Part I IBas ic c od ePart I I

Bas ic c od e


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


templa teDeta i ls.xml (1 3)/templa teDeta i ls.xml (1 3)/






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>


i nd ex .php (1 3)/i nd ex .php (1 3)/


i nd ex .php (2 3)/i nd ex.php (2 3)/


i nd ex .php (3 3)/i nd ex .php (3 3)/


i nd ex .php Pa rtsind ex.php Pa rtsHTML-code

PHP-code

<jdoc>-tags


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


Pre v iew mod u le pos i t i onsPre v iew mod u le pos i t i ons


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


Part I I IA dva nced c oncepts

Part I I IA dva nced c oncepts


Templa t ingTempla t ingTemplate overrides / output overrides

HTML5 compatibility

Microdata

Code stripping

Custom error.php

Additional module-chromes


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


Mod ern stuf fMod ern stuf fHTML5 + CSS3

Responsive design, CSS frameworks

From content to webdesign to PhotoShop

Grid-model


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


Wha t first?Wha t first?Design first?

Mobile first?

Wireframing?

Content first?

GatherContent


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


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


CSS fra m eworksCSS fra m eworksTwitter Bootstrap

960s, 1140s

Foundation Zurp

ZASS (uses SASS)


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


so fa r , a ny quest i ons?so fa r , a ny quest i ons?


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


JUG076-templa te#JUG076-templa te#

15 Euro d iscount

on any Yireo extension

until 31 December 2012

Documents

Joomla! templating