A Joomla! 1.5 Template from scratch

A Joomla! 1.5 Template from Scratch Hagen Graf http://cocoate.com http://twitter.com/hagengraf

Our target group ... Has a rough idea of ● HTML, CSS, Firefox, Firebug, FTP (important) ● JavaScript (MooTools), PHP, GIMP, Photoshop (optional) ● being creative (not always bad) ● writing an invoice (necessary to survive :-) )

I assume it's someone like you :-) http://www.flickr.com/photos/awarnach/3483532628/ November 2009 3

The aim is individuality in design positions chrome parameters accessibility eye candy November 2009 4

Step 1 from 11 Our own folder in /templates with ● index.php /templates/[name of template]/ /templates/[name of template]/css/ ● params.ini (empty, writable) ● templateDetails.xml ● template_thumbnail.png ● css/templates.css

Step 2 from 11 own configuration in ● templateDetails.xml <install version="1.5" type="template"> <name>joomladayit</name> <version>1.0</version> <creationDate>20.November 2009</creationDate> <author>Hagen Graf</author> <copyright>GNU/GPL</copyright> <authorEmail>hagen@cocoate.com</authorEmail> <authorUrl>http://cocoate.com</authorUrl> <version>0.1</version> <description>... description</description> <f les> i <f lename>index.php</f lename> i i <f lename>templateDetails.xml</f lename> i i <f lename>template_thumbnail.png</f lename> i i <f lename>css/template.css</f lename> i i </f les> i </install>

Step 3 from 11 own markup in <html> ● index.php <head> <link href="/templates/joomladayit/css/template.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="part1">Header <div id="area1">area1</div> <div id="area2">area2</div> </div> <div id="part2">Main Area <div id="area3">breadcrumbs</div> <div id="area6">right side</div> <div id="area4">left side</div> <div id="area5">content</div> </div> <div id="part3">Footer <div id="area7">area7</div> </div> </body> </html>

Step 5 from 11 cosmetics in ● template.css body { font-size: 12px; font-family: Helvetica,Arial,sans-serif;} #part1 { border: 2px dotted green; width: 100%; height: 4em; } #part2 { border: 2px dotted yellow; f oat: left; width: 100%;} l #part3 { border: 2px dotted red; f oat: left; width: 100%; } l #area1 { border: 1px dashed silver; margin: 0pt 0pt 1.2em; width: 18em; background-color: rgb(238, 238, 238); f oat: left; } l #area2 { border: 1px dashed silver; margin: 0pt 0pt 1.1em; background-color: rgb(238, 238, 238); f oat: right; width: 16em; } l #area3 { border: 1px dashed silver; background-color: rgb(238, 238, 238);} #area4 { border: 1px dashed silver; margin: 0pt 0pt 1.2em; f oat: left; width: 15em; } l #area5 { border: 1px dashed silver; margin: 0pt 12em 1em 16em; padding: 0pt 1em; } #area6 { border: 1px dashed silver; margin: 0pt 0pt 1.1em; f oat: right; width: 12em; l background-color: rgb(238, 238, 238);} #area7 { border: 1px dashed silver; margin: 0pt 0pt 1.1em; background-color: rgb(238, 238, 238); }

Step 6 from 11 The Joomla! Ingredients: ● header <head> <jdoc:include type="head" /> </head> ● modules <jdoc:include type="modules" name="top" style="none" /> ● content <jdoc:include type="component" style="nonel"/>

Step 8 from 11 The Joomla! ingredients ● chrome table horz xhtml rounded beezDivision <jdoc:include type="modules" name="left" style="beezDivision" headerLevel="3" /> none

Step 9 from 11 The Joomla! ingredients ● accessibility

Step 10 from 11 The Joomla! ingredients ● Internationalization (/administrator/languages/en-GB/en-GB.tpl_rhuk_milkyway.ini) # $Id: en-GB.tpl_rhuk_milkyway.ini 11394 2009-01-05 15:28:11Z kdevine $ # Joomla! Project ... COLOR VARIATION=Color Variation COLOR VARIATION TO USE=Color variation to use BACKGROUND VARIATION=Background Variation BACKGROUND COLOR VARIATION TO USE=Background color variation to use. TEMPLATE WIDTH=Template Width WIDTH STYLE OF THE TEMPLATE=Select the method for the width style of the template from the dropdown. .... BLACK=Black ORANGE=Orange RHUK_MILKYWAY=RHUK Milkyway template TPL_RHUK_MILKYWAY=MilkyWay is a fresh new template for Joomla!. The clean design of this template makes it very lightweight and fast.

Step 11 from 11 The Joomla! ingredients ● Parameters in templateDetails.xml <params> <param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use"> <option value="blue">Blue</option> <option value="red">Red</option> <option value="green">Green</option> <option value="orange">Orange</option> <option value="black">Black</option> <option value="white">White</option> </param> </params> ● The code in index.php <?php echo $this->params->get('colorVariation'); ?>

LIVE DEMO

Thank you and have fun by using Joomla Sources http://docs.joomla.org/Joomla!_1.5_Template_Tutorials_Project http://joomla.cocoate.com/templates-selbst-erstellen Hagen Graf hagen.graf@gmail.com http://cocoate.com http://twitter.com/hagengraf November 2009 15

http://www.joomladay.it	128
http://cocoate.com	19
http://www.slideshare.net	4
http://static.slidesharecdn.com	1

A Joomla! 1.5 Template from scratch

by Hagen Graf on Nov 24, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 152

Statistics

A Joomla! 1.5 Template from scratch — Presentation Transcript