Resources for Joomla Templates 101
Barb Ackemann's files for Joomla Day New England, May 30, 2009
A few people have had trouble getting the PowerPoint as a pdf file. It is now available at: SlideShare
- PowerPoint as pdf
- Fireworks mockup file
- Original html file with embedded styles
- First version of template file (as a text file)
- First version of stylesheet
- Second version of template file w/ if/else conditional code (as a text file). This version adds just a bit of extra code so that the main content column can be wider on pages where there are no modules assigned to the right module position. This was covered in Jen's advanced workshop, but I didn't want you to have to wait 'til next year....
- Second version of stylesheet
- Sample templateDetails.xml file
- A live version of the site
Snippets
- DreamweaverCS4 Snippets in zip file(See PowerPoint slide 12 for where to put these files.)
- Joomla "snippets" in a text file
- Beez template with Barb's modification
My modification is to just one .php file in the com_content folder:
html/com_content/article/default.php
This line:
<div id=page>
is better if it is changed to this:
<div class="page<?php echo $this->params->get('pageclass_sfx')?>">
because this allows you to attach a page class suffix to the containing div and thus have a "handle" for styling elements on a particular page differently from the rest of the site. The page class suffix is added in the menu manager parameters for the menu item that displays the article.
View Source to see effects of html overrides
The next four files give you the opportunity to view the source code generated by the different templates. Milkyway is pretty much core joomla wrapped in lots of template divs for styling round corners and such. JA-Purity adds lots of javascript, but also some html overrides that clean out the table markup still present in the core joomla. Beez has LOTS of html overrides for cleaning up the code in articles, blogs, and other core components. It was designed to be accessible and standards compliant. Irislines2 uses the html overrides from the Beez template.
- Same content, rhuk MilkyWay template
- Same content, JA Purity template
- Same content, beez template
- Same content, Irislines2 template
Need help?
There are also many online resources to help you learn html and css.
- Lynda.com has training videos on just about everything!
- The HTML Writers Guild has great online courses -- usually 6 to 8 weeks -- real courses with instructors, readings and homework!
Check out the classes and degree and certificate programs at the Marlboro College Graduate School!