TEMPLATING THE RIGHT WAY                   by Jonathan Shroyer                           Twitter: @learncss              E...
TEMPLATE BASICS
DID YOU KNOW?
DID YOU KNOW?Tables are for tabulardata... not for layouts
PROPER HEADINGS
PROPER HEADINGS• H tags are possibly most important for SEOs
PROPER HEADINGS• H tags are possibly most important for SEOs• One H1 per page
PROPER HEADINGS• H tags are possibly most important for SEOs• One H1 per page• Opening page H1 should be company name  and...
PROPER HEADINGS• H tags are possibly most important for SEOs• One H1 per page• Opening page H1 should be company name  and...
PROPER HEADINGS• H tags are possibly most important for SEOs• One H1 per page• Opening page H1 should be company name  and...
LOGO CODE FOR YOUR     TEMPLATE
LOGO CODE FOR YOUR         TEMPLATEif( JURI::current() == JURI::base() ) { ?>  <h1 id="company-logo">    <a href="<?php ec...
LOGO CODE FOR YOUR     TEMPLATE
LOGO CODE FOR YOUR          TEMPLATE} else {    <p id="company-logo">     <a href="<?php echo JURI::base(); ?>">       Com...
HEADINGS INSIDE OF YOUR      TEMPLATE
HEADINGS INSIDE OF YOUR       TEMPLATE• In your overrides you should use the same logic:  if( JURI::current() == JURI::bas...
HEADINGS INSIDE OF YOUR       TEMPLATE• In your overrides you should use the same logic:  if( JURI::current() == JURI::bas...
IMAGES
IMAGES• Use alt tags on images which you want people to  know what it is. (ie. If image wasnt there, would  the descriptio...
IMAGES• Use alt tags on images which you want people to  know what it is. (ie. If image wasnt there, would  the descriptio...
WHAT ABOUT HTML5?
WHAT ABOUT HTML5?• No SEO advantage at this time
WHAT ABOUT HTML5?• No SEO advantage at this time• Personally don’t recommend it as support is  less than HTML4.
WHAT ABOUT HTML5?• No SEO advantage at this time• Personally don’t recommend it as support is  less than HTML4.• Only use ...
WHAT ABOUT HTML5?• No SEO advantage at this time• Personally don’t recommend it as support is  less than HTML4.• Only use ...
NOT-SO-BASICTEMPLATE BASICS
LEARN THE JOOMLA LANGUAGE
LEARN THE JOOMLA LANGUAGE• Why should you learn the Joomla! library for  template development?
LEARN THE JOOMLA LANGUAGE• Why should you learn the Joomla! library for  template development?  • Allows you to do advance...
LEARN THE JOOMLA LANGUAGE• Why should you learn the Joomla! library for  template development?  • Allows you to do advance...
LEARN THE JOOMLA LANGUAGE
LEARN THE JOOMLA LANGUAGE• JHTML
LEARN THE JOOMLA LANGUAGE• JHTML • link, image, iframe, date, tooltip, calendar, etc.
LEARN THE JOOMLA LANGUAGE• JHTML • link, image, iframe, date, tooltip, calendar, etc. • Example:   $link = JHTML::_(image,...
LEARN THE JOOMLA LANGUAGE• JHTML  • link, image, iframe, date, tooltip, calendar, etc.  • Example:    $link = JHTML::_(ima...
ADDING EXTERNALCSS STYLESHEETS (JOOMLA 1.6+)
ADDING EXTERNALCSS STYLESHEETS (JOOMLA 1.6+)• $doc = JFactory::getDocument();  $path = templates/ .    $this->template . /...
ADDING EXTERNALCSS STYLESHEETS (JOOMLA 1.6+)• $doc = JFactory::getDocument();  $path = templates/ .    $this->template . /...
ADDING CSS STYLES   FOR ONLY IE
ADDING CSS STYLES         FOR ONLY IE$stylelink = <!--[if lte IE 6]> ."n";$stylelink .= <link rel="stylesheet"   href="../...
MAKE YOUR TEMPLATE    UPGRADABLEIn templateDetails.xml the opening is:<?xml version="1.0" encoding="utf-8"?><!DOCTYPE inst...
BUILDING BLOCKS   USING CSS
SIZE BOX
SIZE BOXgrid_size boxes are used for width, height and overallpositioning of box.
SIZE BOXgrid_size boxes are used for width, height and overallpositioning of box.
SIZE BOXgrid_size boxes are used for width, height and overallpositioning of box..grid_size {  width: 100%;  height: auto;...
SIZE BOXgrid_size boxes are used for width, height and overallpositioning of box..grid_size {  width: 100%;  height: auto;...
STYLE BOX
STYLE BOXgrid_style boxes are used for padding, borders andpositioning of content within box.
STYLE BOXgrid_style boxes are used for padding, borders andpositioning of content within box.
STYLE BOXgrid_style boxes are used for padding, borders andpositioning of content within box..grid_style {  width: auto;  ...
STYLE BOXgrid_style boxes are used for padding, borders andpositioning of content within box..grid_style {  width: auto;  ...
EXAMPLE BOX
EXAMPLE BOX<div class=”grid_size”>
EXAMPLE BOX<div class=”grid_size”>  <div class=”grid_style”>
EXAMPLE BOX<div class=”grid_size”>  <div class=”grid_style”>     CSS Box
EXAMPLE BOX<div class=”grid_size”>  <div class=”grid_style”>     CSS Box  </div>
EXAMPLE BOX<div class=”grid_size”>   <div class=”grid_style”>     CSS Box   </div> </div>
EXAMPLE BOX<div class=”grid_size”>   <div class=”grid_style”>     CSS Box   </div> </div>
GETTING CONTROLOF YOUR TEMPLATE
ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS
ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS <?php $body = ; if( JRequest::getInt( Itemid ) ) {       $body .= itemi...
ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS
ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASSif( JRequest::getVar( view ) ) {     $body .=  view-.JRequest::getVar( v...
ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS
ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS$body .=  lang- . $this->language;$body .=  direction- . $this->directio...
global $mainframe;$menu = @$mainframe->getMenu();$active = @$menu->getActive();while ( $active->parent > 0 ) {    $parent ...
$user =& JFactory::getUser();$userGroups = $user->groups;foreach($userGroups as $key => $value){    $replace = array(".", ...
HOW THE VARIABLES OUTPUT
HOW THE VARIABLES OUTPUT<body class=”<?php echo $body; ?>”>Outputs:<body class=”itemid-257 id-6 view-article option-com_co...
HOW WOULD YOU USE THE  MENU_PARENT CODE?
HOW WOULD YOU USE THE        MENU_PARENT CODE?In the CSS you could use it to change thesidebar color for each parent menu ...
DOING DYNAMIC THE RIGHT WAY
LOAD DYNAMIC CSS  INTO THE HEAD
LOAD DYNAMIC CSS        INTO THE HEADDon’t create external php css files. Insteaddo this...
LOAD DYNAMIC CSS        INTO THE HEADDon’t create external php css files. Insteaddo this...$doc =& JFactory::getDocument()...
A FEW NOTES ABOUTCREATING JOOMLA!   1.7+ TEMPLATES
CREATING A NEW TEMPLATE
CREATING A NEW TEMPLATE• Templates will not show up in Template  Manager without being installed
CREATING A NEW TEMPLATE• Templates will not show up in Template  Manager without being installed• Clicking Discover in Ext...
SETTING/REMOVING SCRIPTS
SETTING/REMOVING SCRIPTSAdd this above your DOCTYPE
SETTING/REMOVING SCRIPTS  Add this above your DOCTYPE• JHtml::_(behavior.framework, false);
SETTING/REMOVING SCRIPTS  Add this above your DOCTYPE• JHtml::_(behavior.framework, false);    • FALSE = just mootools cor...
SETTING/REMOVING SCRIPTS  Add this above your DOCTYPE• JHtml::_(behavior.framework, false);    • FALSE = just mootools cor...
SETTING/REMOVING SCRIPTS  Add this above your DOCTYPE• JHtml::_(behavior.framework, false);    • FALSE = just mootools cor...
SETTING/REMOVING SCRIPTS  Add this above your DOCTYPE• JHtml::_(behavior.framework, false);    • FALSE = just mootools cor...
SETTING/REMOVING SCRIPTS  Add this above your DOCTYPE• JHtml::_(behavior.framework, false);    • FALSE = just mootools cor...
REMOVING MOOTOOLS IN 1.7
REMOVING MOOTOOLS IN 1.7$user =& JFactory::getUser();if ( $user->get( guest ) == 1 ) {      $document =& JFactory::getDocu...
MAKE IT SMALLER...  AND FASTER!
KEY POINTS FOR SPEEDING   UP YOUR TEMPLATE
KEY POINTS FOR SPEEDING     UP YOUR TEMPLATE• Optimize your images
KEY POINTS FOR SPEEDING     UP YOUR TEMPLATE• Optimize your images• Make sprites with your images
KEY POINTS FOR SPEEDING     UP YOUR TEMPLATE• Optimize your images• Make sprites with your images• Combine CSS and JavaScr...
KEY POINTS FOR SPEEDING     UP YOUR TEMPLATE• Optimize your images• Make sprites with your images• Combine CSS and JavaScr...
KEY POINTS FOR SPEEDING     UP YOUR TEMPLATE• Optimize your images• Make sprites with your images• Combine CSS and JavaScr...
KEY POINTS FOR SPEEDING   UP YOUR TEMPLATE
KEY POINTS FOR SPEEDING     UP YOUR TEMPLATE• Use a CDN for your template resources
KEY POINTS FOR SPEEDING     UP YOUR TEMPLATE• Use a CDN for your template resources• If possible, remove calls in componen...
A FEW EXTENSIONS     TO HELP
EXTENSIONS WE USE FOR    DEVELOPMENT
EXTENSIONS WE USE FOR       DEVELOPMENT• Advanced Module Manager (www.nonumber.nl)
EXTENSIONS WE USE FOR       DEVELOPMENT• Advanced Module Manager (www.nonumber.nl)• CSS3 Automated Generator (www.corephp....
EXTENSIONS WE USE FOR       DEVELOPMENT• Advanced Module Manager (www.nonumber.nl)• CSS3 Automated Generator (www.corephp....
EXTENSIONS WE USE FOR       DEVELOPMENT• Advanced Module Manager (www.nonumber.nl)• CSS3 Automated Generator (www.corephp....
ADVANCED MODULE MANAGER CODE
ADVANCED MODULE       MANAGER CODEHow to assign to only articles:
ADVANCED MODULE         MANAGER CODE  How to assign to only articles:• $view = article;  /* --- DO NOT EDIT BELOW --- */  ...
ADVANCED MODULE MANAGER CODE
ADVANCED MODULE      MANAGER CODEHow to assign to Wordpress homepage:
ADVANCED MODULE         MANAGER CODE  How to assign to Wordpress homepage:• if ( defined( ABSPATH ) && is_home() ) {      ...
ADVANCED MODULE MANAGER CODE
ADVANCED MODULE      MANAGER CODEHow to assign to Wordpress single blog:
ADVANCED MODULE          MANAGER CODE  How to assign to Wordpress single blog:• if ( is_single() ) {        $pass = 1;  } ...
AUTOMATED CSS3  GENERATOR
AUTOMATED CSS3         GENERATORAutomatically creates many cross-browser CSS3styles for you.
AUTOMATED CSS3           GENERATOR  Automatically creates many cross-browser CSS3  styles for you.• Dropshadow, Text Shado...
AUTOMATED CSS3            GENERATOR  Automatically creates many cross-browser CSS3  styles for you.• Dropshadow, Text Shad...
MASS CONTENT
MASS CONTENTMass Content allows you to enter severalarticles, categories, tags, etc. at once, includingassigning to menu i...
Q&A“If we would have newknowledge, we must get awhole world of newquestions.”           - Susanne K. Langer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer
Upcoming SlideShare
Loading in...5
×

Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer

2,093

Published on

Joomla! Day Chicago 2011 presentation on building Joomla! templates with an emphasis on PHP code you can use to gain more control of your templates.

Published in: Education, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,093
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • Style is the LAST thing you should think about when choosing tags. Base it on semantics.\n
  • Style is the LAST thing you should think about when choosing tags. Base it on semantics.\nIf you want to style according to H tags then make classes called .H1, .H2, etc.\n
  • Style is the LAST thing you should think about when choosing tags. Base it on semantics.\nIf you want to style according to H tags then make classes called .H1, .H2, etc.\n
  • Style is the LAST thing you should think about when choosing tags. Base it on semantics.\nIf you want to style according to H tags then make classes called .H1, .H2, etc.\n
  • Style is the LAST thing you should think about when choosing tags. Base it on semantics.\nIf you want to style according to H tags then make classes called .H1, .H2, etc.\n
  • Style is the LAST thing you should think about when choosing tags. Base it on semantics.\nIf you want to style according to H tags then make classes called .H1, .H2, etc.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Example: change module positions according to category, section or even inherit through to all child items in a menu.\n
  • Example: change module positions according to category, section or even inherit through to all child items in a menu.\n
  • Example: change module positions according to category, section or even inherit through to all child items in a menu.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Here we are grabbing info from the menu to determine the parent item and inheriting through to all children. This was originally created for a library site that wanted unique colors for each menu area.\n
  • Here we are grabbing info from the menu to determine the parent item and inheriting through to all children. This was originally created for a library site that wanted unique colors for each menu area.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • CDN: Content Delivery Network\n
  • \n
  • Joomla! Day Chicago 2011 - Templating the right way - Jonathan Shroyer

    1. 1. TEMPLATING THE RIGHT WAY by Jonathan Shroyer Twitter: @learncss Email: jonathan@corephp.com by Jonathan Shroyer
    2. 2. TEMPLATE BASICS
    3. 3. DID YOU KNOW?
    4. 4. DID YOU KNOW?Tables are for tabulardata... not for layouts
    5. 5. PROPER HEADINGS
    6. 6. PROPER HEADINGS• H tags are possibly most important for SEOs
    7. 7. PROPER HEADINGS• H tags are possibly most important for SEOs• One H1 per page
    8. 8. PROPER HEADINGS• H tags are possibly most important for SEOs• One H1 per page• Opening page H1 should be company name and tagline/short description.
    9. 9. PROPER HEADINGS• H tags are possibly most important for SEOs• One H1 per page• Opening page H1 should be company name and tagline/short description.• H1 tags on all inner pages should be article title.
    10. 10. PROPER HEADINGS• H tags are possibly most important for SEOs• One H1 per page• Opening page H1 should be company name and tagline/short description.• H1 tags on all inner pages should be article title.• NEVER skip a tag! (ie. H2 to H4)
    11. 11. LOGO CODE FOR YOUR TEMPLATE
    12. 12. LOGO CODE FOR YOUR TEMPLATEif( JURI::current() == JURI::base() ) { ?> <h1 id="company-logo"> <a href="<?php echo JURI::base(); ?>"> Company Name </a> </h1>
    13. 13. LOGO CODE FOR YOUR TEMPLATE
    14. 14. LOGO CODE FOR YOUR TEMPLATE} else { <p id="company-logo"> <a href="<?php echo JURI::base(); ?>"> Company Name </a> </p>}
    15. 15. HEADINGS INSIDE OF YOUR TEMPLATE
    16. 16. HEADINGS INSIDE OF YOUR TEMPLATE• In your overrides you should use the same logic: if( JURI::current() == JURI::base() ) { $h = 2; } else { $h = 1; } <h<?php echo $h; ?>>Title</h<?php echo $h; ?>}
    17. 17. HEADINGS INSIDE OF YOUR TEMPLATE• In your overrides you should use the same logic: if( JURI::current() == JURI::base() ) { $h = 2; } else { $h = 1; } <h<?php echo $h; ?>>Title</h<?php echo $h; ?>}• Module titles are virtually always H2
    18. 18. IMAGES
    19. 19. IMAGES• Use alt tags on images which you want people to know what it is. (ie. If image wasnt there, would the description add to the content?)
    20. 20. IMAGES• Use alt tags on images which you want people to know what it is. (ie. If image wasnt there, would the description add to the content?)• Learn how to size images properly and how to compress them. Extra size slows down site and can lower SEO value.
    21. 21. WHAT ABOUT HTML5?
    22. 22. WHAT ABOUT HTML5?• No SEO advantage at this time
    23. 23. WHAT ABOUT HTML5?• No SEO advantage at this time• Personally don’t recommend it as support is less than HTML4.
    24. 24. WHAT ABOUT HTML5?• No SEO advantage at this time• Personally don’t recommend it as support is less than HTML4.• Only use if you have a specific market that you know has the capability to properly display it.
    25. 25. WHAT ABOUT HTML5?• No SEO advantage at this time• Personally don’t recommend it as support is less than HTML4.• Only use if you have a specific market that you know has the capability to properly display it.• It’s a great movement, but it’s really still the Wild Wild West.
    26. 26. NOT-SO-BASICTEMPLATE BASICS
    27. 27. LEARN THE JOOMLA LANGUAGE
    28. 28. LEARN THE JOOMLA LANGUAGE• Why should you learn the Joomla! library for template development?
    29. 29. LEARN THE JOOMLA LANGUAGE• Why should you learn the Joomla! library for template development? • Allows you to do advanced logic with your template.
    30. 30. LEARN THE JOOMLA LANGUAGE• Why should you learn the Joomla! library for template development? • Allows you to do advanced logic with your template. • Gives you options you never had before
    31. 31. LEARN THE JOOMLA LANGUAGE
    32. 32. LEARN THE JOOMLA LANGUAGE• JHTML
    33. 33. LEARN THE JOOMLA LANGUAGE• JHTML • link, image, iframe, date, tooltip, calendar, etc.
    34. 34. LEARN THE JOOMLA LANGUAGE• JHTML • link, image, iframe, date, tooltip, calendar, etc. • Example: $link = JHTML::_(image, images/stories/clock.jpg, null); echo $link;
    35. 35. LEARN THE JOOMLA LANGUAGE• JHTML • link, image, iframe, date, tooltip, calendar, etc. • Example: $link = JHTML::_(image, images/stories/clock.jpg, null); echo $link;• http://api.joomla.org/__filesource/fsource_Joomla- Framework_HTML_joomlahtmlhtml.php.html#a191
    36. 36. ADDING EXTERNALCSS STYLESHEETS (JOOMLA 1.6+)
    37. 37. ADDING EXTERNALCSS STYLESHEETS (JOOMLA 1.6+)• $doc = JFactory::getDocument(); $path = templates/ . $this->template . /css/mystylesheet.css; $doc->addStyleSheet( $path, , ‘text/css’, “screen, projection” );
    38. 38. ADDING EXTERNALCSS STYLESHEETS (JOOMLA 1.6+)• $doc = JFactory::getDocument(); $path = templates/ . $this->template . /css/mystylesheet.css; $doc->addStyleSheet( $path, , ‘text/css’, “screen, projection” );• You can also use: JHTML::stylesheet( $path, array(media=>screen, projection ) );
    39. 39. ADDING CSS STYLES FOR ONLY IE
    40. 40. ADDING CSS STYLES FOR ONLY IE$stylelink = <!--[if lte IE 6]> ."n";$stylelink .= <link rel="stylesheet" href="../css/IEonly.css" /> ."n";$stylelink .= <![endif]--> ."n";$doc =& JFactory::getDocument();$doc->addCustomTag($stylelink);
    41. 41. MAKE YOUR TEMPLATE UPGRADABLEIn templateDetails.xml the opening is:<?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" method=”upgrade”>
    42. 42. BUILDING BLOCKS USING CSS
    43. 43. SIZE BOX
    44. 44. SIZE BOXgrid_size boxes are used for width, height and overallpositioning of box.
    45. 45. SIZE BOXgrid_size boxes are used for width, height and overallpositioning of box.
    46. 46. SIZE BOXgrid_size boxes are used for width, height and overallpositioning of box..grid_size { width: 100%; height: auto; float: left; display: inline; position: relative; }
    47. 47. SIZE BOXgrid_size boxes are used for width, height and overallpositioning of box..grid_size { width: 100%; height: auto; float: left; display: inline; position: relative; }
    48. 48. STYLE BOX
    49. 49. STYLE BOXgrid_style boxes are used for padding, borders andpositioning of content within box.
    50. 50. STYLE BOXgrid_style boxes are used for padding, borders andpositioning of content within box.
    51. 51. STYLE BOXgrid_style boxes are used for padding, borders andpositioning of content within box..grid_style { width: auto; height: auto; display: block; top: 0; left: 0; clear: both; }
    52. 52. STYLE BOXgrid_style boxes are used for padding, borders andpositioning of content within box..grid_style { width: auto; height: auto; display: block; top: 0; left: 0; clear: both; }
    53. 53. EXAMPLE BOX
    54. 54. EXAMPLE BOX<div class=”grid_size”>
    55. 55. EXAMPLE BOX<div class=”grid_size”> <div class=”grid_style”>
    56. 56. EXAMPLE BOX<div class=”grid_size”> <div class=”grid_style”> CSS Box
    57. 57. EXAMPLE BOX<div class=”grid_size”> <div class=”grid_style”> CSS Box </div>
    58. 58. EXAMPLE BOX<div class=”grid_size”> <div class=”grid_style”> CSS Box </div> </div>
    59. 59. EXAMPLE BOX<div class=”grid_size”> <div class=”grid_style”> CSS Box </div> </div>
    60. 60. GETTING CONTROLOF YOUR TEMPLATE
    61. 61. ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS
    62. 62. ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS <?php $body = ; if( JRequest::getInt( Itemid ) ) { $body .= itemid-.JRequest::getInt( Itemid ); } if( JRequest::getInt( id ) ) { $body .= id-.JRequest::getInt( id ); } if( JRequest::getVar( task ) ) { $body .= task-.JRequest::getVar( task ); }
    63. 63. ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS
    64. 64. ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASSif( JRequest::getVar( view ) ) { $body .= view-.JRequest::getVar( view );}if( JRequest::getVar( layout ) ) { $body .= layout-.JRequest::getVar( layout );}if( JRequest::getVar( option ) ) { $body .= option-.JRequest::getVar( option );}
    65. 65. ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS
    66. 66. ADD AS MANY VARIABLES ASPOSSIBLE TO BODY TAG CLASS$body .= lang- . $this->language;$body .= direction- . $this->direction;if( JURI::current() == JURI::base() ) { $body .= frontpage’;}
    67. 67. global $mainframe;$menu = @$mainframe->getMenu();$active = @$menu->getActive();while ( $active->parent > 0 ) { $parent = $menu->getItem( $active->parent ); if ( 0 == $parent->parent ) { $top_level = $parent; break; } else { $active = $parent; }}$body .= menu_parent- . $active->id;
    68. 68. $user =& JFactory::getUser();$userGroups = $user->groups;foreach($userGroups as $key => $value){ $replace = array(".", " "); $body .= group- .strtolower( str_replace( $replace, _, $key ) );}
    69. 69. HOW THE VARIABLES OUTPUT
    70. 70. HOW THE VARIABLES OUTPUT<body class=”<?php echo $body; ?>”>Outputs:<body class=”itemid-257 id-6 view-article option-com_content lang-en-gb direction-ltr frontpagemenu_parent-1 group-super_users”>
    71. 71. HOW WOULD YOU USE THE MENU_PARENT CODE?
    72. 72. HOW WOULD YOU USE THE MENU_PARENT CODE?In the CSS you could use it to change thesidebar color for each parent menu and inheritinto each child..menu_parent-1 #sidebar { background: #ccc;}You can stack body classes safely:.view-article.menu_parent-1 #sidebar
    73. 73. DOING DYNAMIC THE RIGHT WAY
    74. 74. LOAD DYNAMIC CSS INTO THE HEAD
    75. 75. LOAD DYNAMIC CSS INTO THE HEADDon’t create external php css files. Insteaddo this...
    76. 76. LOAD DYNAMIC CSS INTO THE HEADDon’t create external php css files. Insteaddo this...$doc =& JFactory::getDocument();$style = BODY { . background: #00ff00; . color: rgb(0,0,255); . };$doc->addStyleDeclaration( $style );
    77. 77. A FEW NOTES ABOUTCREATING JOOMLA! 1.7+ TEMPLATES
    78. 78. CREATING A NEW TEMPLATE
    79. 79. CREATING A NEW TEMPLATE• Templates will not show up in Template Manager without being installed
    80. 80. CREATING A NEW TEMPLATE• Templates will not show up in Template Manager without being installed• Clicking Discover in Extension Manager will make templates show in Templates tab in Template Manager, but not in Styles
    81. 81. SETTING/REMOVING SCRIPTS
    82. 82. SETTING/REMOVING SCRIPTSAdd this above your DOCTYPE
    83. 83. SETTING/REMOVING SCRIPTS Add this above your DOCTYPE• JHtml::_(behavior.framework, false);
    84. 84. SETTING/REMOVING SCRIPTS Add this above your DOCTYPE• JHtml::_(behavior.framework, false); • FALSE = just mootools core (89KB)
    85. 85. SETTING/REMOVING SCRIPTS Add this above your DOCTYPE• JHtml::_(behavior.framework, false); • FALSE = just mootools core (89KB) • TRUE = mootools-core + mootools-more (89KB + 238KB = 327KB!)
    86. 86. SETTING/REMOVING SCRIPTS Add this above your DOCTYPE• JHtml::_(behavior.framework, false); • FALSE = just mootools core (89KB) • TRUE = mootools-core + mootools-more (89KB + 238KB = 327KB!) To remove all scripts:
    87. 87. SETTING/REMOVING SCRIPTS Add this above your DOCTYPE• JHtml::_(behavior.framework, false); • FALSE = just mootools core (89KB) • TRUE = mootools-core + mootools-more (89KB + 238KB = 327KB!) To remove all scripts:• $doc =& JFactory::getDocument(); $doc->_scripts = array();
    88. 88. SETTING/REMOVING SCRIPTS Add this above your DOCTYPE• JHtml::_(behavior.framework, false); • FALSE = just mootools core (89KB) • TRUE = mootools-core + mootools-more (89KB + 238KB = 327KB!) To remove all scripts:• $doc =& JFactory::getDocument(); $doc->_scripts = array(); This is not recommended!
    89. 89. REMOVING MOOTOOLS IN 1.7
    90. 90. REMOVING MOOTOOLS IN 1.7$user =& JFactory::getUser();if ( $user->get( guest ) == 1 ) { $document =& JFactory::getDocument(); $headerstuff = $document->getHeadData(); reset($headerstuff[scripts]); foreach ($headerstuff[scripts] as $key=>$value){ if (substr_count($key, mootools) > 0) unset($headerstuff[scripts][$key]); } $document->setHeadData( $headerstuff );}
    91. 91. MAKE IT SMALLER... AND FASTER!
    92. 92. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE
    93. 93. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE• Optimize your images
    94. 94. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE• Optimize your images• Make sprites with your images
    95. 95. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE• Optimize your images• Make sprites with your images• Combine CSS and JavaScript into one file for each
    96. 96. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE• Optimize your images• Make sprites with your images• Combine CSS and JavaScript into one file for each• Dont use "on the fly" compression plugins
    97. 97. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE• Optimize your images• Make sprites with your images• Combine CSS and JavaScript into one file for each• Dont use "on the fly" compression plugins• If you use a CSS and/or JavaScript compression plugin then make sure it stores it somehow instead of compressing on each load.
    98. 98. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE
    99. 99. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE• Use a CDN for your template resources
    100. 100. KEY POINTS FOR SPEEDING UP YOUR TEMPLATE• Use a CDN for your template resources• If possible, remove calls in component or modules for library’s if they are already used so you don’t have them loading twice.
    101. 101. A FEW EXTENSIONS TO HELP
    102. 102. EXTENSIONS WE USE FOR DEVELOPMENT
    103. 103. EXTENSIONS WE USE FOR DEVELOPMENT• Advanced Module Manager (www.nonumber.nl)
    104. 104. EXTENSIONS WE USE FOR DEVELOPMENT• Advanced Module Manager (www.nonumber.nl)• CSS3 Automated Generator (www.corephp.com)
    105. 105. EXTENSIONS WE USE FOR DEVELOPMENT• Advanced Module Manager (www.nonumber.nl)• CSS3 Automated Generator (www.corephp.com)• JCE (www.joomlacontenteditor.net/)
    106. 106. EXTENSIONS WE USE FOR DEVELOPMENT• Advanced Module Manager (www.nonumber.nl)• CSS3 Automated Generator (www.corephp.com)• JCE (www.joomlacontenteditor.net/)• Mass Content (www.baticore.com)
    107. 107. ADVANCED MODULE MANAGER CODE
    108. 108. ADVANCED MODULE MANAGER CODEHow to assign to only articles:
    109. 109. ADVANCED MODULE MANAGER CODE How to assign to only articles:• $view = article; /* --- DO NOT EDIT BELOW --- */ if ( JRequest::getCmd( view ) == $view ) { $pass = 1; } else { $pass = 0; } return $pass;
    110. 110. ADVANCED MODULE MANAGER CODE
    111. 111. ADVANCED MODULE MANAGER CODEHow to assign to Wordpress homepage:
    112. 112. ADVANCED MODULE MANAGER CODE How to assign to Wordpress homepage:• if ( defined( ABSPATH ) && is_home() ) { $pass = 1; } else { $pass = 0; } return $pass;
    113. 113. ADVANCED MODULE MANAGER CODE
    114. 114. ADVANCED MODULE MANAGER CODEHow to assign to Wordpress single blog:
    115. 115. ADVANCED MODULE MANAGER CODE How to assign to Wordpress single blog:• if ( is_single() ) { $pass = 1; } else { $pass = 0; } return $pass;
    116. 116. AUTOMATED CSS3 GENERATOR
    117. 117. AUTOMATED CSS3 GENERATORAutomatically creates many cross-browser CSS3styles for you.
    118. 118. AUTOMATED CSS3 GENERATOR Automatically creates many cross-browser CSS3 styles for you.• Dropshadow, Text Shadow, Rounded Corners, Opacity, Gradient, RGBA, Rotate, Border Image
    119. 119. AUTOMATED CSS3 GENERATOR Automatically creates many cross-browser CSS3 styles for you.• Dropshadow, Text Shadow, Rounded Corners, Opacity, Gradient, RGBA, Rotate, Border Image• Rounded Corner Example: .rounded {topleft_radius:8, topright_radius:8, bottomright_radius:8, bottomleft_radius:8, support_ie:yes};
    120. 120. MASS CONTENT
    121. 121. MASS CONTENTMass Content allows you to enter severalarticles, categories, tags, etc. at once, includingassigning to menu item.
    122. 122. Q&A“If we would have newknowledge, we must get awhole world of newquestions.” - Susanne K. Langer

    ×