Creating a Pure CSS Template (for  Joomla 1.5)
The Usual Bit <ul><li>Here I pretend to know what I am talking about…. </li></ul><ul><li>www.joomlashack.com </li></ul><ul...
What is a Template? <ul><li>The template is simply a set of rules about presentation. It contains no content. </li></ul>
What is a Template? <ul><li>No content you say? </li></ul>
Designing Differently <ul><li>WYSIWYG HTML editors make it easy to create web pages. </li></ul><ul><li>But, Joomla generat...
Design in a Circle <ul><li>Make edits with HTML editor, save changes  </li></ul><ul><li>Have localhost server running in b...
Easy CSS Styling <ul><li>One useful technique to make the design process more efficient is to serve a web page that you ar...
Elements of a Template <ul><li>www.yoursite.com/templates/mytemplate </li></ul><ul><ul><li>mytemplate/ templateDetails.xml...
templateDetails.xml <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?>  <install version=&quot;1.5&quot; t...
index.php <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtm...
Doctype <ul><li>DOCTYPE </li></ul><ul><li>At the top of the index.php file </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-...
No Style Yet
The Layout <ul><li>Or “Why tables for layout is stupid” </li></ul><ul><li>http://www.hotdesign.com/seybold/everything.html...
I like tables!
What’s Under the Hood?
Code Bloat…. <ul><li><table summary=&quot;a unholy mess&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&...
Still not Convinced? <ul><li>Three words…. </li></ul>Google is Blind
CSS Layouts
Random Fact <ul><li>Fluid Pages: Although the percentage is dropping, about 20% of surfers are using an 800x600 resolution...
Other CSS Layouts <ul><li>http://www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html </li></ul><ul><li>h...
Downsides with CSS <ul><li>Complex </li></ul><ul><li>Can break with extensions </li></ul>
Collapsible Columns <ul><li><?php if($this->countModules('left and right') == 0) $contentwidth = &quot;100&quot;; if($this...
Modules <ul><li><jdoc:include type=&quot;modules&quot; name=&quot;LOCATION&quot; style=&quot;OPTION&quot; />  </li></ul><u...
Module Suffixes <ul><li>table Modules are displayed in a table. </li></ul><ul><li>xhtml Modules are displayed in a div. </...
Menus <ul><li>Use flat/bulleted Lists (CSS) </li></ul><ul><li>Submenus natively </li></ul><ul><li>Template overrides strik...
Sneaky Menu Trick <ul><li>Output the menu from Joomla and style that small snippet </li></ul><ul><li><ul class=&quot;menu&...
Menu Ideas <ul><li>Use Listamatic: css.maxdesign.com.au/listamatic/index.htm </li></ul><ul><li>Wrap in a div… <navcontaine...
What’s New in 1.5? <ul><li>Template parameters Work much in the same way as module parameters. </li></ul><ul><li>Template ...
Tableless Joomla in 1.0 <ul><li>Can use some module settings </li></ul><ul><li>You had to hack the core </li></ul><ul><li>...
So how does 1.5 do it? <ul><li>All components and modules now have individual template files </li></ul><ul><li>view -> lay...
Where are the template files?
Multiple Layouts
Naming Convention
Start your stop watch! <ul><li>Lets see how long it takes to create a tableless Joomla 1.5 template </li></ul>
Tick…Tick…Tick
Template Evolution <ul><li>www.joomlatemplatebuilder.com/ </li></ul>
Questions? <ul><li>Stump the Chump </li></ul>
Upcoming SlideShare
Loading in...5
×

Chicago EXPO Creating a Pure CSS Template in Joomla 1.5

9,677

Published on

Presentation at Joomla EXPO in May 2008 - Creating a Pure CSS Template in Joomla 1.5

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,677
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
484
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • Chicago EXPO Creating a Pure CSS Template in Joomla 1.5

    1. 1. Creating a Pure CSS Template (for Joomla 1.5)
    2. 2. The Usual Bit <ul><li>Here I pretend to know what I am talking about…. </li></ul><ul><li>www.joomlashack.com </li></ul><ul><li>www.compassdesigns.net </li></ul><ul><li>www.joomlabook.com </li></ul>
    3. 3. What is a Template? <ul><li>The template is simply a set of rules about presentation. It contains no content. </li></ul>
    4. 4. What is a Template? <ul><li>No content you say? </li></ul>
    5. 5. Designing Differently <ul><li>WYSIWYG HTML editors make it easy to create web pages. </li></ul><ul><li>But, Joomla generates pages dynamically. </li></ul><ul><li>You have to have a host: </li></ul><ul><ul><li>Localhost, e.g. WAMP, XAMPP www.apachefriends.org/en/xampp.html </li></ul></ul><ul><ul><li>Webserver </li></ul></ul><ul><li>Other free stuff, Nuvo www.nvu.com </li></ul>
    6. 6. Design in a Circle <ul><li>Make edits with HTML editor, save changes </li></ul><ul><li>Have localhost server running in background to &quot;run&quot; Joomla. </li></ul><ul><li>View edits in a web browser </li></ul><ul><li>Go to 1. </li></ul>
    7. 7. Easy CSS Styling <ul><li>One useful technique to make the design process more efficient is to serve a web page that you are designing and then copy and paste the source into an editor. </li></ul><ul><li>For example, once your layout CSS is set up, you can use one of these localhost servers to serve a page, then View_Source. </li></ul><ul><li>You then copy and paste that into your editor. You can now easily style the page using CSS. </li></ul>
    8. 8. Elements of a Template <ul><li>www.yoursite.com/templates/mytemplate </li></ul><ul><ul><li>mytemplate/ templateDetails.xml index.php </li></ul></ul><ul><li>templateDetails.xml (note the uppercase &quot;D&quot;) Got a bunch of important stuff in in </li></ul><ul><li>index.php Got even more important stuff in it Lays out the site and tells Joomla where to put the different components and modules. It is a combination of PHP and (X)HTML. </li></ul>
    9. 9. templateDetails.xml <ul><li><?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <install version=&quot;1.5&quot; type=&quot;template&quot;>       <name>TemplateTutorial15</name>       <creationDate>August 2007</creationDate>       <author>Barrie North</author>       <copyright>GPL</copyright>       <authorEmail> [email_address] </authorEmail>       <authorUrl>www.compassdesigns.net</authorUrl>       <version>1.0</version>       <description>First example template for Chapter 9 of the Joomla Book</description>       <files>             <filename>index.php</filename>             <filename>templateDetails.xml</filename> </files>       <positions>                         <position>top</position>             <position>left</position>   </positions>          <params>             <param name=&quot;colorVariation&quot; type=&quot;list&quot; default=&quot;white&quot; label=&quot;Color Variation&quot; description=&quot;Color variation to use&quot;>                   <option value=&quot;blue&quot;>Blue</option>                   <option value=&quot;red&quot;>Red</option>             </param>          </params> </install> </li></ul>
    10. 10. index.php <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><ul><li><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;<?php echo $this->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; > </li></ul><ul><li><head> </li></ul><ul><li><jdoc:include type=&quot;head&quot; /> </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;templates/system/css/system.css&quot; type=&quot;text/css&quot; /> </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;templates/system/css/general.css&quot; type=&quot;text/css&quot; /> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><jdoc:include type=&quot;module&quot; name=&quot;breadcrumbs&quot; /> </li></ul><ul><li><jdoc:include type=&quot;modules&quot; name=&quot;top&quot; /> </li></ul><ul><li><jdoc:include type=&quot;modules&quot; name=&quot;left&quot; /> </li></ul><ul><li><jdoc:include type=&quot;component&quot; /> </li></ul><ul><li><jdoc:include type=&quot;modules&quot; name=&quot;right&quot; /> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
    11. 11. Doctype <ul><li>DOCTYPE </li></ul><ul><li>At the top of the index.php file </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><ul><li>A web page DOCTYPE is part of the fundamental components of who a web page is shown by a browser, specifically, how that browser interprets CSS. To give you a sense, an observation from alistapart.com says: </li></ul><ul><li>[information on W3C's site about doctypes is] &quot;written by geeks for geeks. And when I say geeks, I don’t mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She’s Got Mail.™&quot; </li></ul>
    12. 12. No Style Yet
    13. 13. The Layout <ul><li>Or “Why tables for layout is stupid” </li></ul><ul><li>http://www.hotdesign.com/seybold/everything.html </li></ul><ul><li>make your pages load faster </li></ul><ul><li>lower your hosting costs </li></ul><ul><li>make your redesigns more efficient and less expensive </li></ul><ul><li>help you maintain visual consistency throughout your sites </li></ul><ul><li>get you better search engine results </li></ul><ul><li>make your sites more accessible to all viewers and user agents </li></ul>
    14. 14. I like tables!
    15. 15. What’s Under the Hood?
    16. 16. Code Bloat…. <ul><li><table summary=&quot;a unholy mess&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;9&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;20&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;20&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot;>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot;>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot;>Suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot;>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. <table summary=&quot;list&quot; width=&quot;338&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>•</td> <td width=&quot;328&quot;>At vero eros et accumsan et iusto odio dignissim qui blandit</td> </tr> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>•</td> <td width=&quot;328&quot;>Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td> </tr> </table> </td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot;>Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot;>Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <table summary=&quot;list&quot; width=&quot;338&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>•</td> <td width=&quot;328&quot;>Epsum factorial non deposit quid pro quo hic escorol.</td> </tr> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>•</td> <td width=&quot;328&quot;>Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.</td> </tr> </table> </td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot;>Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot;>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed. <table summary=&quot;list&quot; width=&quot;338&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>•</td> <td width=&quot;328&quot;>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td> </tr> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>•</td> <td width=&quot;328&quot;>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.</td> </tr> </table> </td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> </table> </li></ul>
    17. 17. Still not Convinced? <ul><li>Three words…. </li></ul>Google is Blind
    18. 18. CSS Layouts
    19. 19. Random Fact <ul><li>Fluid Pages: Although the percentage is dropping, about 20% of surfers are using an 800x600 resolution. The majority, 76%, are using 1024x768 and higher (source: www.upsdell.com ). Making a fluid layout means that your valuable web page won't be a narrow column in the 1024 resolution, and will all be visible on smaller monitors. </li></ul><ul><li>Min/Max Width </li></ul>
    20. 20. Other CSS Layouts <ul><li>http://www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html </li></ul><ul><li>http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php </li></ul><ul><li>http://www.csscreator.com/ </li></ul>
    21. 21. Downsides with CSS <ul><li>Complex </li></ul><ul><li>Can break with extensions </li></ul>
    22. 22. Collapsible Columns <ul><li><?php if($this->countModules('left and right') == 0) $contentwidth = &quot;100&quot;; if($this->countModules('left or right') == 1) $contentwidth = &quot;80&quot;; if($this->countModules('left and right') == 1) $contentwidth = &quot;60&quot;; ?> </li></ul><ul><li><div id=&quot;content<?php echo $contentwidth; ?>&quot;> </li></ul><ul><li>Stuff </li></ul><ul><li></div> </li></ul><ul><li>#content60 {float:left;width:60:} #content80 {float:left;width:80%; } #content100 {float:left;width:100%;} </li></ul>
    23. 23. Modules <ul><li><jdoc:include type=&quot;modules&quot; name=&quot;LOCATION&quot; style=&quot;OPTION&quot; /> </li></ul><ul><li>Example: <jdoc:include type=&quot;modules&quot; name=“left&quot; style=“xhtml&quot; /> </li></ul><ul><li>The $style is optional and can be CUSTOM! </li></ul>
    24. 24. Module Suffixes <ul><li>table Modules are displayed in a table. </li></ul><ul><li>xhtml Modules are displayed in a div. </li></ul><ul><li>raw Modules are displayed as raw output and without titles. </li></ul><ul><li>rounded Modules are displayed in CSS format enclosed by a 3 div’s </li></ul><ul><li>YOUR_OWN Modules are displayed in a format defined in your template overrides!! </li></ul>
    25. 25. Menus <ul><li>Use flat/bulleted Lists (CSS) </li></ul><ul><li>Submenus natively </li></ul><ul><li>Template overrides strike again! </li></ul><ul><li>DON’T use Javascript </li></ul>
    26. 26. Sneaky Menu Trick <ul><li>Output the menu from Joomla and style that small snippet </li></ul><ul><li><ul class=&quot;menu&quot;> </li></ul><ul><li><li id=&quot;current&quot; class=&quot;active item109&quot;><a href=&quot;http://www.compassdesigns.net/&quot;><span>Home</span></a> </li> </li></ul><ul><li><li class=&quot;item104&quot;><a href=&quot;/templates.html&quot;><span>Templates</span></a> </li> </li></ul><ul><li><li class=&quot;item103&quot;><a href=&quot;/tutorials.html&quot;><span>Tutorials</span></a> </li> </li></ul><ul><li><li class=&quot;item105&quot;><a href=&quot;/services.html&quot;><span>Services</span></a> </li> </li></ul><ul><li><li class=&quot;item95&quot;><a href=&quot;/downloads.html&quot;><span>Downloads</span></a> </li> </li></ul><ul><li><li class=&quot;item131&quot;><a href=&quot;/training.html&quot;><span>Training</span></a> </li> </li></ul><ul><li></ul> </li></ul>
    27. 27. Menu Ideas <ul><li>Use Listamatic: css.maxdesign.com.au/listamatic/index.htm </li></ul><ul><li>Wrap in a div… <navcontainer> </li></ul>
    28. 28. What’s New in 1.5? <ul><li>Template parameters Work much in the same way as module parameters. </li></ul><ul><li>Template Overrides Templates can override the default output of the core. </li></ul>
    29. 29. Tableless Joomla in 1.0 <ul><li>Can use some module settings </li></ul><ul><li>You had to hack the core </li></ul><ul><li>Hacking get you into difficulty </li></ul>
    30. 30. So how does 1.5 do it? <ul><li>All components and modules now have individual template files </li></ul><ul><li>view -> layout -> templates </li></ul>
    31. 31. Where are the template files?
    32. 32. Multiple Layouts
    33. 33. Naming Convention
    34. 34. Start your stop watch! <ul><li>Lets see how long it takes to create a tableless Joomla 1.5 template </li></ul>
    35. 35. Tick…Tick…Tick
    36. 36. Template Evolution <ul><li>www.joomlatemplatebuilder.com/ </li></ul>
    37. 37. Questions? <ul><li>Stump the Chump </li></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×