Build Your Own Template                                 Hagen Graf                            twitter.com/hagengraf       ...
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 S...
AFTERWARDS PEOPLE IN UK             WERE THINKING ...                 “HEY! THAT’S THE TEMPLATE                           ...
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 TOOSaturda...
21 FACTORS                http://vandelaydesign.com/blog/design/first-impression/Saturday, 24 September 11
Ease of Navigation                              21 FACTORS                http://vandelaydesign.com/blog/design/first-impre...
Ease of Navigation   Your Reputation                              21 FACTORS                http://vandelaydesign.com/blog...
Ease of Navigation   Your Reputation        Logo/Branding                              21 FACTORS                http://va...
Ease of Navigation   Your Reputation        Logo/Branding Tone                              21 FACTORS                http...
Ease of Navigation   Your Reputation        Logo/Branding Tone            Number of Comments and Trackbacks               ...
Ease of Navigation   Your Reputation        Logo/Branding Tone            Number of Comments and Trackbacks              F...
Ease of Navigation     Your Reputation        Logo/Branding Tone            Number of Comments and Trackbacks             ...
Ease of Navigation     Your Reputation        Logo/Branding Tone            Number of Comments and Trackbacks             ...
Ease of Navigation     Your Reputation        Logo/Branding Tone            Number of Comments and Trackbacks             ...
Ease of Navigation     Your Reputation        Logo/Branding Tone            Number of Comments and Trackbacks             ...
Ease of Navigation     Your Reputation        Logo/Branding Tone            Number of Comments and Trackbacks             ...
Ease of Navigation     Your Reputation        Logo/Branding Tone            Number of Comments and Trackbacks             ...
Ease of Navigation     Your Reputation        Logo/Branding Tone            Number of Comments and Trackbacks             ...
Ease of Navigation     Your Reputation        Logo/Branding Tone            Number of Comments and Trackbacks             ...
Ease of Navigation     Your Reputation        Logo/Branding Tone            Number of Comments and Trackbacks             ...
Ease of Navigation       Your Reputation        Logo/Branding Tone              Number of Comments and Trackbacks         ...
Ease of Navigation       Your Reputation        Logo/Branding Tone              Number of Comments and Trackbacks         ...
Ease of Navigation       Your Reputation        Logo/Branding Tone              Number of Comments and Trackbacks         ...
Ease of Navigation       Your Reputation        Logo/Branding Tone               Number of Comments and Trackbacks        ...
Ease of Navigation       Your Reputation        Logo/Branding Tone               Number of Comments and Trackbacks        ...
Ease of Navigation       Your Reputation       Layout        Logo/Branding Tone               Number of Comments and Track...
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/w...
PARTHENON                                            432 BC                            http://en.wikipedia.org/wiki/Parthe...
GREAT MOSQUE OF KAIRO                                          670 - Uqba ibn Nafi                            http://en.wik...
NOTRE DAME DE PARIS                                             1250                     http://en.wikipedia.org/wiki/Notr...
Constant: 1.61803398874989                        FARNSWORTH HOUSE                                         1950 - Mies van...
GOLDEN GRID WEBSITE                                    2009 - Ewout Kozel                            http://www.gridsystem...
GOLDEN GRID WEBSITE                                    2009 - Ewout Kozel                            http://www.gridsystem...
HOUSE IN LISBOASaturday, 24 September 11
http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web-                                   design/Saturday, 24 Sep...
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                            ht...
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 Track...
...      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 Se...
Beez2       Beez5        Atomic                            Bluestork           Hathor                              CORE TE...
Frontend                 htdocs/                  Backend                  htdocs/administrator/                          ...
http://www.flickr.com/photos/andresthor/3963368371                            INSIDE BEEZ_20Saturday, 24 September 11
// No direct access.  defined(_JEXEC) or die;                            SECURITY                              index.phpSa...
HTML (beez_20) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-tra...
HTML (beez_20) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-tra...
<jdoc:include type="head" />                            JOOMLA SPECIFIC TAG                                   index.phpSat...
<jdoc:include type="head" /><base href="http://localhost/ml/index.php/en/" />  <meta http-equiv="content-type" content="te...
JOOMLA SPECIFIC TAG                                   index.phpSaturday, 24 September 11
<jdoc:include type="component"/>                            JOOMLA SPECIFIC TAG                                   index.ph...
<jdoc:include type="component"/>                            JOOMLA SPECIFIC TAG                                   index.ph...
$this->baseurl                            $this->template         JOOMLA SPECIFIC VARIABLES                               ...
$this->baseurl                            $this->template<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templat...
$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 ?>/template...
<jdoc:include type="message" />                            JOOMLA SPECIFIC TAG                                   index.php...
<jdoc:include type="message" />                            JOOMLA SPECIFIC TAG                                   index.php...
<?xml version="1.0" encoding="utf-8"?>                <!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "htt...
let’s copy beez_20                                   demoSaturday, 24 September 11
STEPS TO DO                                demoSaturday, 24 September 11
1. Duplicate folder                             STEPS TO DO                                        demoSaturday, 24 Septem...
1. Duplicate folder                  2. Extension Manager discover or                  copy records in database           ...
1. Duplicate folder                  2. Extension Manager discover or                  copy records in database           ...
1. Duplicate folder                  2. Extension Manager discover or                  copy records in database           ...
1. Duplicate folder                  2. Extension Manager discover or                  copy records in database           ...
1. Duplicate folder                  2. Extension Manager discover or                  copy records in database           ...
?       DO YOU NEED PARAMETERS?                            demoSaturday, 24 September 11
type=”text”                type=”list”                type=”radio”                type=”media”                type=”space”...
<jdoc:include type="modules" name=            "position-7" />                            JOOMLA SPECIFIC TAG              ...
<jdoc:include type="modules" name=            "position-7" />                            JOOMLA SPECIFIC TAG              ...
<jdoc:include type="modules" name=    "position-7" style= "rounded"/>        rounded, table, xhtml, beezDivision, beezTabs...
<jdoc:include type="modules" name=    "position-5" style= "beeztabs"   headerLevel="2" id="3"state="0"/>                  ...
<jdoc:include type="modules" name=    "position-5" style= "beeztabs"   headerLevel="2" id="3"state="0"/>                  ...
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 ITEMSatur...
Menu Manager: Edit          Menu Item                        source code                            STYLE A MENU ITEMSatur...
Menu Manager: Edit                     Menu Item                            source code     <div class="blog-featuredfunky...
Menu Manager: Edit                     Menu Item                            source code     <div class="blog-featuredfunky...
Component         Template                            TEMPLATE OVERRIDESSaturday, 24 September 11
Component                       Template                            TEMPLATE OVERRIDES                              Model ...
Template               Component                               Article Options                  TEMPLATE ALTERNATIVESSatur...
Template               Component                                                Article Options                  TEMPLATE ...
Site offline        Site offline                /templates/system   /templates/jdayuk                            OFFLINE.PHP...
Site offline                     Site offline                /templates/system                /templates/jdayuk             ...
if(strstr($_SERVER[‘HTTP_USER_AGENT’       ),‘iPhone’)       {          JFactory::getApplication()-       >redirect($this-...
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 POSSIBILITIESSa...
JUST 3 MORE EXAMPLES                            just google for more ...Saturday, 24 September 11
http://blank.vc              Alexander Schmidt                     JUST 3 MORE EXAMPLES                                   ...
http://blank.vc                          http://www.gantry-framework.org/              Alexander Schmidt                  ...
http://blank.vc            T3 Framework          http://www.gantry-framework.org/              Alexander Schmidt          ...
THANK YOU                            http://twitter.com/hagengrafSaturday, 24 September 11
Upcoming SlideShare
Loading in …5
×

Joomla! 1.7 Templates

7,862 views

Published on

Published in: Design, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,862
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
79
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Joomla! 1.7 Templates

  1. 1. Build Your Own Template Hagen Graf twitter.com/hagengraf cocoate.com Footsteps Design Complete The JigsawSaturday, 24 September 11
  2. 2. THE FIRST IMPRESSION IS IMPORTANTSaturday, 24 September 11
  3. 3. 2009 AT JDAY, UK MAIDSTONE JODEE ASKED ME HOW TO BUILD A TEMPLATE AND I DID A SESSION FROM SCRATCHSaturday, 24 September 11
  4. 4. AFTERWARDS PEOPLE IN UK WERE THINKING ... “HEY! THAT’S THE TEMPLATE GUY”Saturday, 24 September 11
  5. 5. I AM NOT A DESIGNER :(Saturday, 24 September 11
  6. 6. THAT’S MESaturday, 24 September 11
  7. 7. http://cocoate.com/j17/pdf THAT’S ME TOOSaturday, 24 September 11
  8. 8. http://cocoate.com/j17/pdf free of charge :) THAT’S ME TOOSaturday, 24 September 11
  9. 9. 21 FACTORS http://vandelaydesign.com/blog/design/first-impression/Saturday, 24 September 11
  10. 10. Ease of Navigation 21 FACTORS http://vandelaydesign.com/blog/design/first-impression/Saturday, 24 September 11
  11. 11. Ease of Navigation Your Reputation 21 FACTORS http://vandelaydesign.com/blog/design/first-impression/Saturday, 24 September 11
  12. 12. Ease of Navigation Your Reputation Logo/Branding 21 FACTORS http://vandelaydesign.com/blog/design/first-impression/Saturday, 24 September 11
  13. 13. Ease of Navigation Your Reputation Logo/Branding Tone 21 FACTORS http://vandelaydesign.com/blog/design/first-impression/Saturday, 24 September 11
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. http://facebook.comSaturday, 24 September 11
  32. 32. http://en.wikipedia.orgSaturday, 24 September 11
  33. 33. https://plus.google.com/Saturday, 24 September 11
  34. 34. http://www.joomla.org/Saturday, 24 September 11
  35. 35. http://wordpress.org/Saturday, 24 September 11
  36. 36. SEEMS TO BE NOT EASY let’s have a closer lookSaturday, 24 September 11
  37. 37. Constant: 1.61803398874989 GOLDEN RATIO http://en.wikipedia.org/wiki/Golden_ratioSaturday, 24 September 11
  38. 38. PARTHENON 432 BC http://en.wikipedia.org/wiki/ParthenonSaturday, 24 September 11
  39. 39. GREAT MOSQUE OF KAIRO 670 - Uqba ibn Nafi http://en.wikipedia.org/wiki/Mosque_of_OqbaSaturday, 24 September 11
  40. 40. NOTRE DAME DE PARIS 1250 http://en.wikipedia.org/wiki/Notre_Dame_de_ParisSaturday, 24 September 11
  41. 41. Constant: 1.61803398874989 FARNSWORTH HOUSE 1950 - Mies van der Rohe http://en.wikipedia.org/wiki/Farnsworth_House_%28Plano,_Illinois%29Saturday, 24 September 11
  42. 42. GOLDEN GRID WEBSITE 2009 - Ewout Kozel http://www.gridsystemgenerator.comSaturday, 24 September 11
  43. 43. GOLDEN GRID WEBSITE 2009 - Ewout Kozel http://www.gridsystemgenerator.comSaturday, 24 September 11
  44. 44. HOUSE IN LISBOASaturday, 24 September 11
  45. 45. http://net.tutsplus.com/tutorials/other/the-golden-ratio-in-web- design/Saturday, 24 September 11
  46. 46. COLOR PALETTES http://www.colourlovers.com/Saturday, 24 September 11
  47. 47. COLOR PALETTES http://www.colourlovers.com/Saturday, 24 September 11
  48. 48. http://www.flickr.com/photos/panasonic-kei/4639332235 COLOR PALETTES - CAR http://www.colorhunter.com/palette/728115Saturday, 24 September 11
  49. 49. TRENDING FONTS http://www.google.com/webfontsSaturday, 24 September 11
  50. 50. TRENDING FONTS http://www.google.com/webfontsSaturday, 24 September 11
  51. 51. 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
  52. 52. ... HOURS, DAYS, MONTH LATERSaturday, 24 September 11
  53. 53. HOW TO IMPLEMENT ALL THAT IN JOOMLA!?Saturday, 24 September 11
  54. 54. :)Saturday, 24 September 11
  55. 55. TOOLBOX http://www.flickr.com/photos/kimmo-quva/4630630775Saturday, 24 September 11
  56. 56. HTML/CSS VALIDATOR http://validator.w3.org/Saturday, 24 September 11
  57. 57. WEB DEVELOPER https://addons.mozilla.org/en-US/firefox/addon/web-developer/Saturday, 24 September 11
  58. 58. FIREBUG http://getfirebug.com/Saturday, 24 September 11
  59. 59. WHAT’S IN CORE?Saturday, 24 September 11
  60. 60. CORE TEMPLATESSaturday, 24 September 11
  61. 61. Beez2 CORE TEMPLATESSaturday, 24 September 11
  62. 62. Beez2 Beez5 CORE TEMPLATESSaturday, 24 September 11
  63. 63. Beez2 Beez5 Atomic CORE TEMPLATESSaturday, 24 September 11
  64. 64. Beez2 Beez5 Atomic Bluestork CORE TEMPLATESSaturday, 24 September 11
  65. 65. Beez2 Beez5 Atomic Bluestork Hathor CORE TEMPLATESSaturday, 24 September 11
  66. 66. Frontend htdocs/ Backend htdocs/administrator/ BEEZ_20Saturday, 24 September 11
  67. 67. http://www.flickr.com/photos/andresthor/3963368371 INSIDE BEEZ_20Saturday, 24 September 11
  68. 68. // No direct access. defined(_JEXEC) or die; SECURITY index.phpSaturday, 24 September 11
  69. 69. 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
  70. 70. 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
  71. 71. <jdoc:include type="head" /> JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11
  72. 72. <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
  73. 73. JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11
  74. 74. <jdoc:include type="component"/> JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11
  75. 75. <jdoc:include type="component"/> JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11
  76. 76. $this->baseurl $this->template JOOMLA SPECIFIC VARIABLES index.phpSaturday, 24 September 11
  77. 77. $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
  78. 78. $this->direction JOOMLA SPECIFIC VARIABLES index.phpSaturday, 24 September 11
  79. 79. $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
  80. 80. <jdoc:include type="message" /> JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11
  81. 81. <jdoc:include type="message" /> JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11
  82. 82. <?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
  83. 83. let’s copy beez_20 demoSaturday, 24 September 11
  84. 84. STEPS TO DO demoSaturday, 24 September 11
  85. 85. 1. Duplicate folder STEPS TO DO demoSaturday, 24 September 11
  86. 86. 1. Duplicate folder 2. Extension Manager discover or copy records in database STEPS TO DO demoSaturday, 24 September 11
  87. 87. 1. Duplicate folder 2. Extension Manager discover or copy records in database 3. Rename Language files STEPS TO DO demoSaturday, 24 September 11
  88. 88. 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
  89. 89. 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
  90. 90. 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
  91. 91. ? DO YOU NEED PARAMETERS? demoSaturday, 24 September 11
  92. 92. 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
  93. 93. <jdoc:include type="modules" name= "position-7" /> JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11
  94. 94. <jdoc:include type="modules" name= "position-7" /> JOOMLA SPECIFIC TAG index.phpSaturday, 24 September 11
  95. 95. <jdoc:include type="modules" name= "position-7" style= "rounded"/> rounded, table, xhtml, beezDivision, beezTabs, beezHide ANOTHER STYLE :) index.phpSaturday, 24 September 11
  96. 96. <jdoc:include type="modules" name= "position-5" style= "beeztabs" headerLevel="2" id="3"state="0"/> TABS? .... COOL! index.phpSaturday, 24 September 11
  97. 97. <jdoc:include type="modules" name= "position-5" style= "beeztabs" headerLevel="2" id="3"state="0"/> demo TABS? .... COOL! index.phpSaturday, 24 September 11
  98. 98. MORE?Saturday, 24 September 11
  99. 99. MORE? Beez Hide on position 4 :)Saturday, 24 September 11
  100. 100. MORE? Beez Hide on position 4 :)Saturday, 24 September 11
  101. 101. Menu Manager: Edit Menu Item source code STYLE A MENU ITEMSaturday, 24 September 11
  102. 102. Menu Manager: Edit Menu Item source code STYLE A MENU ITEMSaturday, 24 September 11
  103. 103. 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
  104. 104. 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
  105. 105. Component Template TEMPLATE OVERRIDESSaturday, 24 September 11
  106. 106. Component Template TEMPLATE OVERRIDES Model View Controller ... demoSaturday, 24 September 11
  107. 107. Template Component Article Options TEMPLATE ALTERNATIVESSaturday, 24 September 11
  108. 108. Template Component Article Options TEMPLATE ALTERNATIVES Model View Controller ... demoSaturday, 24 September 11
  109. 109. Site offline Site offline /templates/system /templates/jdayuk OFFLINE.PHPSaturday, 24 September 11
  110. 110. Site offline Site offline /templates/system /templates/jdayuk OFFLINE.PHP Model View Controller ... demoSaturday, 24 September 11
  111. 111. if(strstr($_SERVER[‘HTTP_USER_AGENT’ ),‘iPhone’) { JFactory::getApplication()- >redirect($this->base.’? tmpl=iphone’); } MOBILE demoSaturday, 24 September 11
  112. 112. OTHER POSSIBILITIESSaturday, 24 September 11
  113. 113. Beez5 OTHER POSSIBILITIESSaturday, 24 September 11
  114. 114. Beez5 Atomic OTHER POSSIBILITIESSaturday, 24 September 11
  115. 115. Beez5 Atomic Bluestork OTHER POSSIBILITIESSaturday, 24 September 11
  116. 116. Beez5 Atomic Bluestork Hathor OTHER POSSIBILITIESSaturday, 24 September 11
  117. 117. JUST 3 MORE EXAMPLES just google for more ...Saturday, 24 September 11
  118. 118. http://blank.vc Alexander Schmidt JUST 3 MORE EXAMPLES just google for more ...Saturday, 24 September 11
  119. 119. 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
  120. 120. 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
  121. 121. THANK YOU http://twitter.com/hagengrafSaturday, 24 September 11

×