Denver CMS Expo Creating CSS template

1. Creating a pure CSS Template Barrie North www.compassdesigns.net www.joomlashack.com www.simplweb.com

2. The Usual Bit <ul><li>Here I pretend to know what I am talking about…. </li></ul><ul><li>www.joomlashack.com </li></ul><ul><li>www.compassdesigns.net </li></ul><ul><li>www.joomlabook.com </li></ul>

3. Housekeeping <ul><li>Joomlashack 40% coupon </li></ul><ul><ul><li>expodenver (expires Dec 20th) </li></ul></ul><ul><li>simplweb.com/expo </li></ul><ul><ul><li>2 winners get a free website for life </li></ul></ul>

4. What is a Template? <ul><li>The template is simply a set of rules about presentation. It contains no content. </li></ul>

5. What is a Template? <ul><li>No content you say? </li></ul>

6. Designing Differently <ul><li>WYSIWYG HTML editors make it easy to create web pages. </li></ul><ul><li>But, Joomla generates pages dynamically. </li></ul><ul><li>You have to have a host: </li></ul><ul><ul><li>Localhost, e.g. WAMP, XAMPP www.apachefriends.org/en/xampp.html </li></ul></ul><ul><ul><li>Webserver </li></ul></ul><ul><li>Other free stuff, Nuvo www.nvu.com </li></ul>

7. Design in a Circle <ul><li>Make edits with HTML editor, save changes </li></ul><ul><li>Have localhost server running in background to "run" Joomla. </li></ul><ul><li>View edits in a web browser </li></ul><ul><li>Go to 1. </li></ul>

8. Easy CSS Styling <ul><li>One useful technique to make the design process more efficient is to serve a web page that you are designing and then copy and paste the source into an editor. </li></ul><ul><li>For example, once your layout CSS is set up, you can use one of these localhost servers to serve a page, then View_Source. </li></ul><ul><li>You then copy and paste that into your editor. You can now easily style the page using CSS. </li></ul>

9. Elements of a Template <ul><li>www.yoursite.com/templates/mytemplate </li></ul><ul><ul><li>mytemplate/ templateDetails.xml index.php </li></ul></ul><ul><li>templateDetails.xml (note the uppercase "D") An XML file that tells Joomla! what other files are needed when loading a web page that uses this template. It also details the author, copyright and what files make up the template (including any images used). The last use of this file is for installing a template when using the admin backend. </li></ul><ul><li>index.php This file is the most important. It lays out the site and tells Joomla where to put the different components and modules. It is a combination of PHP and (X)HTML. </li></ul>

10. templateDetails.xml <ul><li><?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_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="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> </li></ul>

11. index.php <ul><li><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </li></ul><ul><li><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > </li></ul><ul><li><head> </li></ul><ul><li><jdoc:include type="head" /> </li></ul><ul><li><link rel="stylesheet" href="templates/system/css/system.css" type="text/css" /> </li></ul><ul><li><link rel="stylesheet" href="templates/system/css/general.css" type="text/css" /> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><jdoc:include type="module" name="breadcrumbs" /> </li></ul><ul><li><jdoc:include type="modules" name="top" /> </li></ul><ul><li><jdoc:include type="modules" name="left" /> </li></ul><ul><li><jdoc:include type="component" /> </li></ul><ul><li><jdoc:include type="modules" name="right" /> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>

12. No Style Yet

13. The Layout <ul><li>Or “Why tables for layout is stupid” </li></ul><ul><li>http://www.hotdesign.com/seybold/everything.html </li></ul><ul><li>make your pages load faster </li></ul><ul><li>lower your hosting costs </li></ul><ul><li>make your redesigns more efficient and less expensive </li></ul><ul><li>help you maintain visual consistency throughout your sites </li></ul><ul><li>get you better search engine results </li></ul><ul><li>make your sites more accessible to all viewers and user agents </li></ul>

14. I like tables!

15. What’s Under the Hood?

16. Code Bloat…. <ul><li><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> </li></ul>

17. Still not Convinced? <ul><li>Three words…. </li></ul>Google is Blind

18. Random Fact <ul><li>Fluid is dead! Long live Fixed! </li></ul><ul><li>Although the percentage is dropping, about 8% of surfers are using an 800x600 resolution. The majority, 92%, are using 1024x768 and higher (source: www.upsdell.com ). </li></ul><ul><li>Min/Max Width in IE7 </li></ul>

19. CSS Layouts

20. Other CSS Layouts <ul><li>http://www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html </li></ul><ul><li>http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php </li></ul><ul><li>http://www.csscreator.com/ </li></ul>

21. Downsides with CSS <ul><li>Complex </li></ul><ul><li>Can break with extensions </li></ul>

22. Code Bloat – The Return <ul><li>A trend towards “heavy” templates </li></ul>

23. Collapsible Columns <ul><li><?php if($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"; ?> </li></ul><ul><li><div id="content<?php echo $contentwidth; ?>"> </li></ul><ul><li>Stuff </li></ul><ul><li></div> </li></ul><ul><li>#content60 {float:left;width:60:} #content80 {float:left;width:80%; } #content100 {float:left;width:100%;} </li></ul>

24. Modules <ul><li><jdoc:include type="modules" name="LOCATION" style="OPTION" /> </li></ul><ul><li>Example: <jdoc:include type="modules" name=“left" style=“xhtml" /> </li></ul><ul><li>The $style is optional and can be CUSTOM! </li></ul>

25. Module Suffixes <ul><li>table Modules are displayed in a table. </li></ul><ul><li>xhtml Modules are displayed in a div. </li></ul><ul><li>raw Modules are displayed as raw output and without titles. </li></ul><ul><li>rounded Modules are displayed in CSS format enclosed by a 3 div’s </li></ul><ul><li>YOUR_OWN Modules are displayed in a format defined in your template overrides!! </li></ul>

26. Menus <ul><li>Use flat/bulleted Lists (CSS) </li></ul><ul><li>Submenus natively </li></ul><ul><li>Template overrides strike again! </li></ul><ul><li>DON’T use Javascript </li></ul>

27. Sneaky Menu Trick <ul><li>Output the menu from Joomla and style that small snippet </li></ul><ul><li><ul class="menu"> </li></ul><ul><li><li id="current" class="active item109"><a href="http://www.compassdesigns.net/"><span>Home</span></a> </li> </li></ul><ul><li><li class="item104"><a href="/templates.html"><span>Templates</span></a> </li> </li></ul><ul><li><li class="item103"><a href="/tutorials.html"><span>Tutorials</span></a> </li> </li></ul><ul><li><li class="item105"><a href="/services.html"><span>Services</span></a> </li> </li></ul><ul><li><li class="item95"><a href="/downloads.html"><span>Downloads</span></a> </li> </li></ul><ul><li><li class="item131"><a href="/training.html"><span>Training</span></a> </li> </li></ul><ul><li></ul> </li></ul>

28. Menu Ideas <ul><li>Use Listamatic: css.maxdesign.com.au/listamatic/index.htm </li></ul><ul><li>Wrap in a div… <navcontainer> </li></ul>

29. What’s New in 1.5? <ul><li>mosSTUFF Replaced by the $this->STUFF </li></ul><ul><li>Template parameters Work much in the same way as module parameters. </li></ul><ul><li>Template Overrides Templates can override the default output of the core. </li></ul>

30. Tableless Joomla in 1.0 <ul><li>Can use some module settings </li></ul><ul><li>You had to hack the core </li></ul><ul><li>Hacking get you into difficulty </li></ul>

31. Just Say no to Hacking!

32. So how does 1.5 do it? <ul><li>All components and modules now have individual template files </li></ul><ul><li>view -> layout -> templates </li></ul>

33. Where are the template files?

34. Multiple Layouts

35. Naming Convention

36. Start your stop watch! <ul><li>Lets see how long it takes to create a tableless Joomla 1.5 template </li></ul>

37. Tick…Tick…Tick <ul><li>http://screencast.com/t/Gka4ecnYr </li></ul>

38. Template Evolution <ul><li>www.joomlatemplatebuilder.com </li></ul>

39. Questions? <ul><li>Stump the Chump </li></ul>

Denver CMS Expo Creating CSS template

Esté a ler uma amostra.

Confira estes a seguir

Denver CMS Expo Creating CSS template

Mais Conteúdo rRelacionado

Semelhante a Denver CMS Expo Creating CSS template (20)

Mais recentes (20)