ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Chicago EXPO Creating a Pure CSS Template in Joomla 1.5

?Download as PPT, PDF?
?
C
compassdesign

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

1 of 37
Downloaded 485 times
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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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
°Õ¾±³¦°ì¡­°Õ¾±³¦°ì¡­°Õ¾±³¦°ì
Template Evolution www.joomlatemplatebuilder.com/
Questions? Stump the Chump

More Related Content

Chicago EXPO Creating a Pure CSS Template in Joomla 1.5

  • 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 &quot;run&quot; 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 &quot;D&quot;) 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;
  • 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
  • 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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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=/slideshow/chicago-expo-creating-a-pure-css-template-in-joomla-15/418316/&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
  • 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?
  • 34. Start your stop watch! Lets see how long it takes to create a tableless Joomla 1.5 template