• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Joomla! 1.7 Templates
 

Joomla! 1.7 Templates

on

  • 5,533 views

 

Statistics

Views

Total Views
5,533
Views on SlideShare
5,510
Embed Views
23

Actions

Likes
2
Downloads
76
Comments
0

4 Embeds 23

http://lanyrd.com 12
http://paper.li 9
http://www.digitalpymes.es 1
http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Joomla! 1.7 Templates Joomla! 1.7 Templates Presentation Transcript

    • 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/first-impression/Saturday, 24 September 11
    • Ease of Navigation 21 FACTORS http://vandelaydesign.com/blog/design/first-impression/Saturday, 24 September 11
    • Ease of Navigation Your Reputation 21 FACTORS http://vandelaydesign.com/blog/design/first-impression/Saturday, 24 September 11
    • Ease of Navigation Your Reputation Logo/Branding 21 FACTORS http://vandelaydesign.com/blog/design/first-impression/Saturday, 24 September 11
    • Ease of Navigation Your Reputation Logo/Branding Tone 21 FACTORS http://vandelaydesign.com/blog/design/first-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/first-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/first-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/first-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/first-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/first-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/first-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/first-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/first-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/first-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/first-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/first-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/first-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/first-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/first-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/first-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/first-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/first-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 Nafi 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
    • 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
    • COLOR PALETTES http://www.colourlovers.com/Saturday, 24 September 11
    • http://www.flickr.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
    • 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/first-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.flickr.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/firefox/addon/web-developer/Saturday, 24 September 11
    • FIREBUG http://getfirebug.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.flickr.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&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" /> <link href="/ml/index.php/en/?format=feed&amp;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
    • <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
    • <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 files STEPS TO DO demoSaturday, 24 September 11
    • 1. Duplicate folder 2. Extension Manager discover or copy records in database 3. Rename Language files 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 files 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 files 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/fieldsSaturday, 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" /> 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
    • 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 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 offline Site offline /templates/system /templates/jdayuk OFFLINE.PHPSaturday, 24 September 11
    • Site offline Site offline /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