Embed Size (px)
DESCRIPTION
How to build a Joomla! Template
Citation preview
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 :-) )
November 2009 3
I assume it's someone like you :-)
http://www.flickr.com/photos/awarnach/3483532628/
November 2009 4
The aim is individuality in
design
positions
chrome
parameters
accessibility
eye candy
Step 1 from 11
Our own folder in /templates with● index.php● params.ini (empty, writable)
● templateDetails.xml● template_thumbnail.png● css/templates.css
/templates/[name of template]/
/templates/[name of template]/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>[email protected]</authorEmail> <authorUrl>http://cocoate.com</authorUrl> <version>0.1</version> <description>... description</description> <fi les> <fi lename>index.php</fi lename> <fi lename>templateDetails.xml</fi lename> <fi lename>template_thumbnail.png</fi lename> <fi lename>css/template.css</fi lename> </fi les></install>
Step 3 from 11
own markup in ● index.php
<html><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; fl oat: left; width: 100%;}#part3 { border: 2px dotted red; fl oat: left; width: 100%; }
#area1 { border: 1px dashed silver; margin: 0pt 0pt 1.2em; width: 18em; background-color: rgb(238, 238, 238); fl oat: left; }#area2 { border: 1px dashed silver; margin: 0pt 0pt 1.1em; background-color: rgb(238, 238, 238); fl oat: right; width: 16em; }#area3 { border: 1px dashed silver; background-color: rgb(238, 238, 238);}#area4 { border: 1px dashed silver; margin: 0pt 0pt 1.2em; fl oat: left; width: 15em; }#area5 { border: 1px dashed silver; margin: 0pt 12em 1em 16em; padding: 0pt 1em; }#area6 { border: 1px dashed silver; margin: 0pt 0pt 1.1em; fl oat: right; width: 12em; 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
● modules
● content
<head><jdoc:include type="head" /></head>
<jdoc:include type="modules" name="top" style="none" />
<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 11The 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 VariationCOLOR VARIATION TO USE=Color variation to useBACKGROUND VARIATION=Background VariationBACKGROUND COLOR VARIATION TO USE=Background color variation to use.TEMPLATE WIDTH=Template WidthWIDTH STYLE OF THE TEMPLATE=Select the method for the width style of the template from the dropdown.....BLACK=BlackORANGE=OrangeRHUK_MILKYWAY=RHUK Milkyway templateTPL_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
● The code in index.php<?php echo $this->params->get('colorVariation'); ?>
<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>
LIVE DEMO
November 2009 15
Thank you and have fun by using JoomlaSources
http://docs.joomla.org/Joomla!_1.5_Template_Tutorials_Project
http://joomla.cocoate.com/templates-selbst-erstellen
Hagen Graf
http://cocoate.com
http://twitter.com/hagengraf
