Joomla! 1.7 Templates

Build Your Own Template Hagen Graf twitter.com/hagengraf cocoate.com Footsteps Design Complete The JigsawSaturday, 24 September 11

THE FIRST IMPRESSION IS IMPORTANTSaturday, 24 September 11

2009 AT JDAY, UK MAIDSTONE JODEE ASKED ME HOW TO BUILD A TEMPLATE AND I DID A SESSION FROM SCRATCHSaturday, 24 September 11

AFTERWARDS PEOPLE IN UK WERE THINKING ... “HEY! THAT’S THE TEMPLATE GUY”Saturday, 24 September 11

I AM NOT A DESIGNER :(Saturday, 24 September 11

THAT’S MESaturday, 24 September 11

http://cocoate.com/j17/pdf THAT’S ME TOOSaturday, 24 September 11

http://cocoate.com/j17/pdf free of charge :) THAT’S ME TOOSaturday, 24 September 11

21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images Quality of Content 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images Quality of Content Load Time 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images Quality of Content Load Time Quality of Images and Photos 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images Quality of Content Load Time Quality of Images and Photos Error Messages 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images Quality of Content Load Time Quality of Images and Photos Error Messages Clarity of Purpose 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images Quality of Content Load Time Quality of Images and Photos Error Messages Clarity of Purpose Typography 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images Quality of Content Load Time Quality of Images and Photos Error Messages Clarity of Purpose Typography Video and Audio 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images Quality of Content Load Time Quality of Images and Photos Error Messages Clarity of Purpose Typography Video and Audio Advertisements 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images Quality of Content Load Time Quality of Images and Photos Error Messages Clarity of Purpose Typography Video and Audio Advertisements Accessibility 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images Quality of Content Load Time Quality of Images and Photos Error Messages Clarity of Purpose Typography Video and Audio Advertisements Popups and Pop-unders Accessibility 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images Quality of Content Load Time Quality of Images and Photos Error Messages Clarity of Purpose Typography Video and Audio Advertisements Unprofessional Items Popups and Pop-unders Accessibility 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

Ease of Navigation Your Reputation Layout Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images Quality of Content Load Time Quality of Images and Photos Error Messages Clarity of Purpose Typography Video and Audio Advertisements Unprofessional Items Popups and Pop-unders Accessibility 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

http://facebook.comSaturday, 24 September 11

http://en.wikipedia.orgSaturday, 24 September 11

https://plus.google.com/Saturday, 24 September 11

http://www.joomla.org/Saturday, 24 September 11

http://wordpress.org/Saturday, 24 September 11

SEEMS TO BE NOT EASY let’s have a closer lookSaturday, 24 September 11

Constant: 1.61803398874989 GOLDEN RATIO http://en.wikipedia.org/wiki/Golden_ratioSaturday, 24 September 11

PARTHENON 432 BC http://en.wikipedia.org/wiki/ParthenonSaturday, 24 September 11

GREAT MOSQUE OF KAIRO 670 - Uqba ibn Naﬁ http://en.wikipedia.org/wiki/Mosque_of_OqbaSaturday, 24 September 11

NOTRE DAME DE PARIS 1250 http://en.wikipedia.org/wiki/Notre_Dame_de_ParisSaturday, 24 September 11

Constant: 1.61803398874989 FARNSWORTH HOUSE 1950 - Mies van der Rohe http://en.wikipedia.org/wiki/Farnsworth_House_%28Plano,_Illinois%29Saturday, 24 September 11

GOLDEN GRID WEBSITE 2009 - Ewout Kozel http://www.gridsystemgenerator.comSaturday, 24 September 11

HOUSE IN LISBOASaturday, 24 September 11

http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web- design/Saturday, 24 September 11

COLOR PALETTES http://www.colourlovers.com/Saturday, 24 September 11

http://www.ﬂickr.com/photos/panasonic-kei/4639332235 COLOR PALETTES - CAR http://www.colorhunter.com/palette/728115Saturday, 24 September 11

TRENDING FONTS http://www.google.com/webfontsSaturday, 24 September 11

Ease of Navigation Your Reputation Layout Logo/Branding Tone Number of Comments and Trackbacks Flash Intros Colors Associations Header Images Quality of Content Load Time Quality of Images and Photos Error Messages Clarity of Purpose Typography Video and Audio Advertisements Unprofessional Items Popups and Pop-unders Accessibility 21 FACTORS http://vandelaydesign.com/blog/design/ﬁrst-impression/Saturday, 24 September 11

... HOURS, DAYS, MONTH LATERSaturday, 24 September 11

HOW TO IMPLEMENT ALL THAT IN JOOMLA!?Saturday, 24 September 11

:)Saturday, 24 September 11

TOOLBOX http://www.ﬂickr.com/photos/kimmo-quva/4630630775Saturday, 24 September 11

HTML/CSS VALIDATOR http://validator.w3.org/Saturday, 24 September 11

WEB DEVELOPER https://addons.mozilla.org/en-US/ﬁrefox/addon/web-developer/Saturday, 24 September 11

FIREBUG http://getﬁrebug.com/Saturday, 24 September 11

WHAT’S IN CORE?Saturday, 24 September 11

CORE TEMPLATESSaturday, 24 September 11

Beez2 CORE TEMPLATESSaturday, 24 September 11

Beez2 Beez5 CORE TEMPLATESSaturday, 24 September 11

Beez2 Beez5 Atomic CORE TEMPLATESSaturday, 24 September 11

Beez2 Beez5 Atomic Bluestork CORE TEMPLATESSaturday, 24 September 11

Beez2 Beez5 Atomic Bluestork Hathor CORE TEMPLATESSaturday, 24 September 11

Frontend htdocs/ Backend htdocs/administrator/ BEEZ_20Saturday, 24 September 11

http://www.ﬂickr.com/photos/andresthor/3963368371 INSIDE BEEZ_20Saturday, 24 September 11

// No direct access. defined(_JEXEC) or die; SECURITY index.phpSaturday, 24 September 11

HTML (beez_20) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> DOCTYPE index.phpSaturday, 24 September 11

HTML (beez_20) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> HTML5 (beez5) <!DOCTYPE html> DOCTYPE index.phpSaturday, 24 September 11

<jdoc:include type="head" /> JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11

<jdoc:include type="head" /><base href="http://localhost/ml/index.php/en/" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="generator" content="Joomla! 1.7 - Open Source Content Management" /> <title>Home</title> <link href="/ml/index.php/en/?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" /> <link href="/ml/index.php/en/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom1.0" /> <link href="/ml/templates/beez_20/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> <link rel="stylesheet" href="/ml/media/mod_languages/css/template.css" type="text/css" /> <script src="/ml/media/system/js/core.js" type="text/javascript"></script> <script src="/ml/media/system/js/mootools-core.js" type="text/javascript"></script> <script src="/ml/media/system/js/caption.js" type="text/javascript"></script> <script src="/ml/media/system/js/mootools-more.js" type="text/javascript"></script> <script src="/ml/templates/beez_20/javascript/md_stylechanger.js" type="text/javascript" defer="defer"></script> <script type="text/javascript">function keepAlive() {! var myAjax = new Request({method: "get", url: "index.php"}).send();}window.addEvent("domready", function(){ keepAlive.periodical(840000); }); </script> JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11

JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11

<jdoc:include type="component"/> JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11

$this->baseurl $this->template JOOMLA SPECIFIC VARIABLES index.phpSaturday, 24 September 11

$this->baseurl $this->template<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/layout.css" type="text/css" /> JOOMLA SPECIFIC VARIABLES index.phpSaturday, 24 September 11

$this->direction JOOMLA SPECIFIC VARIABLES index.phpSaturday, 24 September 11

$this->direction<?php if ($this->direction == rtl) : ?> <link rel="stylesheet" href="<?php echo$this->baseurl ?>/templates/beez_20/css/template_rtl.css" type="text/css" />...<?php endif; ?> JOOMLA SPECIFIC VARIABLES index.phpSaturday, 24 September 11

<jdoc:include type="message" /> JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> <extension version="1.7" type="template" client="site"> <name>beez_20</name> <creationDate>25 November 2009</creationDate> <author>Angie Radtke</author> <authorEmail>a.radtke@derauftritt.de</authorEmail> <authorUrl>http://www.der-auftritt.de</authorUrl> <copyright>Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.</copyright> <license>GNU General Public License version 2 or later; see LICENSE.txt</license> <version>1.7.0</version> <description>TPL_BEEZ2_XML_DESCRIPTION</description> <files> <folder>css</folder> <folder>html</folder> <folder>images</folder> <folder>javascript</folder> <folder>fonts</folder> <folder>language</folder> <filename>index.html</filename> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <filename>favicon.ico</filename> <filename>component.php</filename> <filename>error.php</filename> </files> <positions> <position>debug</position> <position>position-0</position> <position>position-1</position> ... </positions> XML HELL templateDetails.xmlSaturday, 24 September 11

let’s copy beez_20 demoSaturday, 24 September 11

STEPS TO DO demoSaturday, 24 September 11

1. Duplicate folder STEPS TO DO demoSaturday, 24 September 11

1. Duplicate folder 2. Extension Manager discover or copy records in database STEPS TO DO demoSaturday, 24 September 11

1. Duplicate folder 2. Extension Manager discover or copy records in database 3. Rename Language ﬁles STEPS TO DO demoSaturday, 24 September 11

1. Duplicate folder 2. Extension Manager discover or copy records in database 3. Rename Language ﬁles 4. Edit templateDetails.xml STEPS TO DO demoSaturday, 24 September 11

1. Duplicate folder 2. Extension Manager discover or copy records in database 3. Rename Language ﬁles 4. Edit templateDetails.xml 5. search and replace beez_20 <-> jdayuk index.php, component.php, error.php, modules.php STEPS TO DO demoSaturday, 24 September 11

? DO YOU NEED PARAMETERS? demoSaturday, 24 September 11

type=”text” type=”list” type=”radio” type=”media” type=”space” type=”folderlist” type=”editor” type=”menuitem” type=”timezone” type=”modalarticle” AVAILABLE FORM ELEMENTS /libraries/joomla/ﬁeldsSaturday, 24 September 11

<jdoc:include type="modules" name= "position-7" /> JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11

<jdoc:include type="modules" name= "position-7" style= "rounded"/> rounded, table, xhtml, beezDivision, beezTabs, beezHide ANOTHER STYLE :) index.phpSaturday, 24 September 11

<jdoc:include type="modules" name= "position-5" style= "beeztabs" headerLevel="2" id="3"state="0"/> TABS? .... COOL! index.phpSaturday, 24 September 11

<jdoc:include type="modules" name= "position-5" style= "beeztabs" headerLevel="2" id="3"state="0"/> demo TABS? .... COOL! index.phpSaturday, 24 September 11

MORE?Saturday, 24 September 11

MORE? Beez Hide on position 4 :)Saturday, 24 September 11

Menu Manager: Edit Menu Item source code STYLE A MENU ITEMSaturday, 24 September 11

Menu Manager: Edit Menu Item source code <div class="blog-featuredfunky">...</div> personal.css #main .blog-featuredfunky h1{color:red;} result RED HEADLINESSaturday, 24 September 11

Menu Manager: Edit Menu Item source code <div class="blog-featuredfunky">...</div> personal.css #main .blog-featuredfunky h1{color:red;} result RED HEADLINES additonal page classesSaturday, 24 September 11

Component Template TEMPLATE OVERRIDESSaturday, 24 September 11

Component Template TEMPLATE OVERRIDES Model View Controller ... demoSaturday, 24 September 11

Template Component Article Options TEMPLATE ALTERNATIVESSaturday, 24 September 11

Template Component Article Options TEMPLATE ALTERNATIVES Model View Controller ... demoSaturday, 24 September 11

Site ofﬂine Site ofﬂine /templates/system /templates/jdayuk OFFLINE.PHPSaturday, 24 September 11

Site ofﬂine Site ofﬂine /templates/system /templates/jdayuk OFFLINE.PHP Model View Controller ... demoSaturday, 24 September 11

if(strstr($_SERVER[‘HTTP_USER_AGENT’ ),‘iPhone’) { JFactory::getApplication()- >redirect($this->base.’? tmpl=iphone’); } MOBILE demoSaturday, 24 September 11

OTHER POSSIBILITIESSaturday, 24 September 11

Beez5 OTHER POSSIBILITIESSaturday, 24 September 11

Beez5 Atomic OTHER POSSIBILITIESSaturday, 24 September 11

Beez5 Atomic Bluestork OTHER POSSIBILITIESSaturday, 24 September 11

Beez5 Atomic Bluestork Hathor OTHER POSSIBILITIESSaturday, 24 September 11

JUST 3 MORE EXAMPLES just google for more ...Saturday, 24 September 11

http://blank.vc Alexander Schmidt JUST 3 MORE EXAMPLES just google for more ...Saturday, 24 September 11

http://blank.vc http://www.gantry-framework.org/ Alexander Schmidt http://rockettheme.com JUST 3 MORE EXAMPLES just google for more ...Saturday, 24 September 11

http://blank.vc T3 Framework http://www.gantry-framework.org/ Alexander Schmidt http://www.joomlart.com http://rockettheme.com JUST 3 MORE EXAMPLES just google for more ...Saturday, 24 September 11

THANK YOU http://twitter.com/hagengrafSaturday, 24 September 11

Joomla! 1.7 Templates

by Hagen Graf

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 19

Statistics

Joomla! 1.7 Templates Presentation Transcript

http://lanyrd.com	10
http://paper.li	9