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

Chicago EXPO Creating a Pure CSS Template in Joomla 1.5

on

  • 11,423 views

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

Statistics

Views

Total Views
11,423
Views on SlideShare
8,943
Embed Views
2,480

Actions

Likes
8
Downloads
483
Comments
0

21 Embeds 2,480

http://www.compassdesigns.net 2405
http://joomlachicago.com 28
http://www.copesflavio.com 17
http://www.slideshare.net 8
http://www.digitalrad.net 5
http://static.slideshare.net 2
http://translate.googleusercontent.com 1
http://www.linkedin.com 1
http://jiiten.blogspot.com 1
http://blog.joocode.com 1
http://192.168.1.104:90 1
http://tutorialart.com 1
http://moviecase.net 1
http://o53.net 1
http://livebackgammon.info 1
http://www.zqwl.com 1
http://mvyx.com 1
http://www.undaconsulting.com 1
http://www.cissat.net 1
http://209.85.135.104 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

Chicago EXPO Creating a Pure CSS Template in Joomla 1.5 Chicago EXPO Creating a Pure CSS Template in Joomla 1.5 Presentation Transcript

  • Creating a Pure CSS Template (for Joomla 1.5)
  • The Usual Bit
    • Here I pretend to know what I am talking about….
    • www.joomlashack.com
    • www.compassdesigns.net
    • www.joomlabook.com
  • What is a Template?
    • The template is simply a set of rules about presentation. It contains no content.
  • What is a Template?
    • No content you say?
  • 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
  • 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.
  • 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.
  • 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.
  • 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>
  • 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>
  • 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;
  • No Style Yet
  • 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
  • I like tables!
  • What’s Under the Hood?
  • 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>
  • Still not Convinced?
    • Three words….
    Google is Blind
  • CSS Layouts
  • 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
  • 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/
  • Downsides with CSS
    • Complex
    • Can break with extensions
  • 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%;}
  • 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!
  • 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!!
  • Menus
    • Use flat/bulleted Lists (CSS)
    • Submenus natively
    • Template overrides strike again!
    • DON’T use Javascript
  • 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>
  • Menu Ideas
    • Use Listamatic: css.maxdesign.com.au/listamatic/index.htm
    • Wrap in a div… <navcontainer>
  • 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.
  • Tableless Joomla in 1.0
    • Can use some module settings
    • You had to hack the core
    • Hacking get you into difficulty
  • So how does 1.5 do it?
    • All components and modules now have individual template files
    • view -> layout -> templates
  • Where are the template files?
  • Multiple Layouts
  • Naming Convention
  • Start your stop watch!
    • Lets see how long it takes to create a tableless Joomla 1.5 template
  • Tick…Tick…Tick
  • Template Evolution
    • www.joomlatemplatebuilder.com/
  • Questions?
    • Stump the Chump