Upload
compassdesign
View
105
Download
3
Tags:
Embed Size (px)
DESCRIPTION
Presentation at Joomla EXPO in May 2008 - Creating a Pure CSS Template in Joomla 1.5
Citation preview
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
© Barrie North compassdesigns.net
What is a Template?
• The template is simply a set of rules about presentation. It contains no content.
© Barrie North compassdesigns.net
What is a Template?
• No content you say?
© Barrie North compassdesigns.net
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, XAMPPwww.apachefriends.org/en/xampp.html
– Webserver
• Other free stuff, Nuvowww.nvu.com
© Barrie North compassdesigns.net
Design in a Circle
1. Make edits with HTML editor, save changes
2. Have localhost server running in background to "run" Joomla.
3. View edits in a web browser 4. Go to 1.
© Barrie North compassdesigns.net
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.
© Barrie North compassdesigns.net
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.phpGot even more important stuff in itLays out the site and tells Joomla where to put the different components and modules. It is a combination of PHP and (X)HTML.
© Barrie North compassdesigns.net
templateDetails.xml<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template"> <name>TemplateTutorial15</name> <creationDate>August 2007</creationDate> <author>Barrie North</author> <copyright>GPL</copyright> <authorEmail> [email protected]</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="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use"> <option value="blue">Blue</option> <option value="red">Red</option> </param> </params> </install>
© Barrie North compassdesigns.net
index.php<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" ><head><jdoc:include type="head" /><link rel="stylesheet" href="templates/system/css/system.css" type="text/css" /><link rel="stylesheet" href="templates/system/css/general.css" type="text/css" /></head><body> <jdoc:include type="module" name="breadcrumbs" /><jdoc:include type="modules" name="top" /><jdoc:include type="modules" name="left" /><jdoc:include type="component" /><jdoc:include type="modules" name="right" /></body></html>
© Barrie North compassdesigns.net
Doctype
DOCTYPE
At the top of the index.php file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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] "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.™"
© Barrie North compassdesigns.net
No Style Yet
© Barrie North compassdesigns.net
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
© Barrie North compassdesigns.net
I like tables!
© Barrie North compassdesigns.net
What’s Under the Hood?
© Barrie North compassdesigns.net
Code Bloat….<table summary="a unholy mess" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr> <td rowspan="3" width="1"
background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="9" width="11" /></td> <td width="150" height="10"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="20" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="10"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="20" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr valign="top"> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338">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="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="20"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="20"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="10"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="10"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr valign="top"> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150">Suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. <table summary="list" width="338" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">At vero eros et accumsan et iusto odio dignissim qui blandit</td> </tr> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td> </tr> </table> </td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="20"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="20"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="10"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="10"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr valign="top"> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150">Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338">Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <table summary="list" width="338" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">Epsum factorial non deposit quid pro quo hic escorol.</td> </tr> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">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="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="20"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="20"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="10"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> <td width="11" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="10"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="10"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td rowspan="3" width="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> <tr valign="top"> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150">Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.</td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed. <table summary="list" width="338" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">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="10" height="10"><img src="images/spacer.gif" alt="" height="10" width="10" /></td> <td width="328" height="10"><img src="images/spacer.gif" alt="" height="10" width="328" /></td> </tr> <tr valign="top"> <td width="10">•</td> <td width="328">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.</td> </tr> </table> </td> <td width="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="150" height="20"><img src="images/spacer.gif" alt="" height="10" width="150" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="11" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> <td width="338" height="20"><img src="images/spacer.gif" alt="" height="10" width="338" /></td> <td width="20" height="20"><img src="images/spacer.gif" alt="" height="10" width="11" /></td> </tr> <tr> <td colspan="9" width="553" height="1" background="images/1dot.gif"><img src="images/spacer.gif" alt="" height="1" width="1" /></td> </tr> </table>
© Barrie North compassdesigns.net
Still not Convinced?
Three words….
is
Blind
© Barrie North compassdesigns.net
CSS Layouts
© Barrie North compassdesigns.net
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
© Barrie North compassdesigns.net
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/
© Barrie North compassdesigns.net
Downsides with CSS
• Complex• Can break with extensions
© Barrie North compassdesigns.net
Collapsible Columns
<?phpif($this->countModules('left and right') == 0) $contentwidth = "100";if($this->countModules('left or right') == 1) $contentwidth = "80";if($this->countModules('left and right') == 1) $contentwidth = "60";?>
<div id="content<?php echo $contentwidth; ?>"> Stuff</div>
#content60 {float:left;width:60:}#content80 {float:left;width:80%; }#content100 {float:left;width:100%;}
© Barrie North compassdesigns.net
Modules
• <jdoc:include type="modules" name="LOCATION" style="OPTION" />
• Example: <jdoc:include type="modules" name=“left" style=“xhtml" />
• The $style is optional and can be CUSTOM!
© Barrie North compassdesigns.net
Module Suffixes
• tableModules are displayed in a table.
• xhtmlModules are displayed in a div.
• rawModules are displayed as raw output and without titles.
• roundedModules are displayed in CSS format enclosed by a 3 div’s
• YOUR_OWNModules are displayed in a format defined in your template overrides!!
© Barrie North compassdesigns.net
Menus
• Use flat/bulleted Lists (CSS)• Submenus natively• Template overrides strike again!
• DON’T use Javascript
© Barrie North compassdesigns.net
Sneaky Menu TrickOutput the menu from Joomla and style that small snippet
<ul class="menu"> <li id="current" class="active item109"><a
href="http://www.compassdesigns.net/"><span>Home</span></a> </li> <li class="item104"><a href="/templates.html"><span>Templates</span></a>
</li> <li class="item103"><a href="/tutorials.html"><span>Tutorials</span></a>
</li> <li class="item105"><a href="/services.html"><span>Services</span></a>
</li> <li class="item95"><a href="/downloads.html"><span>Downloads</span></a>
</li> <li class="item131"><a href="/training.html"><span>Training</span></a> </li></ul>
© Barrie North compassdesigns.net
Menu Ideas
• Use Listamatic:css.maxdesign.com.au/listamatic/index.htm
• Wrap in a div… <navcontainer>
© Barrie North compassdesigns.net
What’s New in 1.5?
• Template parametersWork much in the same way as module parameters.
• Template OverridesTemplates can override the default output of the core.
© Barrie North compassdesigns.net
Tableless Joomla in 1.0
• Can use some module settings• You had to hack the core• Hacking get you into difficulty
© Barrie North compassdesigns.net
So how does 1.5 do it?
• All components and modules now have individual template files
• view -> layout -> templates
© Barrie North compassdesigns.net
Where are the template files?
© Barrie North compassdesigns.net
Multiple Layouts
© Barrie North compassdesigns.net
Naming Convention
© Barrie North compassdesigns.net
Start your stop watch!
Lets see how long it takes to create a tableless Joomla 1.5 template
© Barrie North compassdesigns.net
Tick…Tick…Tick
© Barrie North compassdesigns.net
Template Evolution
www.joomlatemplatebuilder.com/
© Barrie North compassdesigns.net
Questions?
Stump the Chump