Your SlideShare is downloading. ×
  • Like
Chicago EXPO Creating a Pure CSS Template in Joomla 1.5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Chicago EXPO Creating a Pure CSS Template in Joomla 1.5

  • 9,433 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,433
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
484
Comments
0
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Creating a Pure CSS Template (for Joomla 1.5)
  • 2. The Usual Bit
    • Here I pretend to know what I am talking about….
    • www.joomlashack.com
    • www.compassdesigns.net
    • www.joomlabook.com
  • 3. What is a Template?
    • The template is simply a set of rules about presentation. It contains no content.
  • 4. What is a Template?
    • No content you say?
  • 5. Designing Differently
    • WYSIWYG HTML editors make it easy to create web pages.
    • But, Joomla generates pages dynamically.
    • You have to have a host:
      • Localhost, e.g. WAMP, XAMPP www.apachefriends.org/en/xampp.html
      • Webserver
    • Other free stuff, Nuvo www.nvu.com
  • 6. Design in a Circle
    • Make edits with HTML editor, save changes
    • Have localhost server running in background to "run" Joomla.
    • View edits in a web browser
    • Go to 1.
  • 7. Easy CSS Styling
    • 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.
    • For example, once your layout CSS is set up, you can use one of these localhost servers to serve a page, then View_Source.
    • You then copy and paste that into your editor. You can now easily style the page using CSS.
  • 8. Elements of a Template
    • www.yoursite.com/templates/mytemplate
      • mytemplate/ templateDetails.xml index.php
    • templateDetails.xml (note the uppercase "D") Got a bunch of important stuff in in
    • 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.
  • 9. templateDetails.xml
    • <?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>
  • 10. index.php
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
    • <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; >
    • <head>
    • <jdoc:include type=&quot;head&quot; />
    • <link rel=&quot;stylesheet&quot; href=&quot;templates/system/css/system.css&quot; type=&quot;text/css&quot; />
    • <link rel=&quot;stylesheet&quot; href=&quot;templates/system/css/general.css&quot; type=&quot;text/css&quot; />
    • </head>
    • <body>
    • <jdoc:include type=&quot;module&quot; name=&quot;breadcrumbs&quot; />
    • <jdoc:include type=&quot;modules&quot; name=&quot;top&quot; />
    • <jdoc:include type=&quot;modules&quot; name=&quot;left&quot; />
    • <jdoc:include type=&quot;component&quot; />
    • <jdoc:include type=&quot;modules&quot; name=&quot;right&quot; />
    • </body>
    • </html>
  • 11. Doctype
    • DOCTYPE
    • At the top of the index.php file
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
    • 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:
    • [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;
  • 12. No Style Yet
  • 13. The Layout
    • Or “Why tables for layout is stupid”
    • http://www.hotdesign.com/seybold/everything.html
    • make your pages load faster
    • lower your hosting costs
    • make your redesigns more efficient and less expensive
    • help you maintain visual consistency throughout your sites
    • get you better search engine results
    • make your sites more accessible to all viewers and user agents
  • 14. I like tables!
  • 15. What’s Under the Hood?
  • 16. Code Bloat….
    • <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;>&#x2022;</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;>&#x2022;</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;>&#x2022;</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;>&#x2022;</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;>&#x2022;</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;>&#x2022;</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>
  • 17. Still not Convinced?
    • Three words….
    Google is Blind
  • 18. CSS Layouts
  • 19. Random Fact
    • 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.
    • Min/Max Width
  • 20. Other CSS Layouts
    • http://www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html
    • http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
    • http://www.csscreator.com/
  • 21. Downsides with CSS
    • Complex
    • Can break with extensions
  • 22. Collapsible Columns
    • <?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;; ?>
    • <div id=&quot;content<?php echo $contentwidth; ?>&quot;>
    • Stuff
    • </div>
    • #content60 {float:left;width:60:} #content80 {float:left;width:80%; } #content100 {float:left;width:100%;}
  • 23. Modules
    • <jdoc:include type=&quot;modules&quot; name=&quot;LOCATION&quot; style=&quot;OPTION&quot; />
    • Example: <jdoc:include type=&quot;modules&quot; name=“left&quot; style=“xhtml&quot; />
    • The $style is optional and can be CUSTOM!
  • 24. Module Suffixes
    • table Modules are displayed in a table.
    • xhtml Modules are displayed in a div.
    • raw Modules are displayed as raw output and without titles.
    • rounded Modules are displayed in CSS format enclosed by a 3 div’s
    • YOUR_OWN Modules are displayed in a format defined in your template overrides!!
  • 25. Menus
    • Use flat/bulleted Lists (CSS)
    • Submenus natively
    • Template overrides strike again!
    • DON’T use Javascript
  • 26. Sneaky Menu Trick
    • Output the menu from Joomla and style that small snippet
    • <ul class=&quot;menu&quot;>
    • <li id=&quot;current&quot; class=&quot;active item109&quot;><a href=&quot;http://www.compassdesigns.net/&quot;><span>Home</span></a> </li>
    • <li class=&quot;item104&quot;><a href=&quot;/templates.html&quot;><span>Templates</span></a> </li>
    • <li class=&quot;item103&quot;><a href=&quot;/tutorials.html&quot;><span>Tutorials</span></a> </li>
    • <li class=&quot;item105&quot;><a href=&quot;/services.html&quot;><span>Services</span></a> </li>
    • <li class=&quot;item95&quot;><a href=&quot;/downloads.html&quot;><span>Downloads</span></a> </li>
    • <li class=&quot;item131&quot;><a href=&quot;/training.html&quot;><span>Training</span></a> </li>
    • </ul>
  • 27. Menu Ideas
    • Use Listamatic: css.maxdesign.com.au/listamatic/index.htm
    • Wrap in a div… <navcontainer>
  • 28. What’s New in 1.5?
    • Template parameters Work much in the same way as module parameters.
    • Template Overrides Templates can override the default output of the core.
  • 29. Tableless Joomla in 1.0
    • Can use some module settings
    • You had to hack the core
    • Hacking get you into difficulty
  • 30. So how does 1.5 do it?
    • All components and modules now have individual template files
    • view -> layout -> templates
  • 31. Where are the template files?
  • 32. Multiple Layouts
  • 33. Naming Convention
  • 34. Start your stop watch!
    • Lets see how long it takes to create a tableless Joomla 1.5 template
  • 35. Tick…Tick…Tick
  • 36. Template Evolution
    • www.joomlatemplatebuilder.com/
  • 37. Questions?
    • Stump the Chump