Flexi Template Skeleton Version 2.0

Written by Lisa | 01.23.10

To ensure I don't choke on this, I've broken this project into bite-sized pieces. Instead of trying to get all the juicy bits into one template, I'm going to add specific elements as I learn how best to integrate them.

Notes on my first attempt (version 1) are available here.

Because I am working with pre-existing template structures, the elements within do not necessarily function outside their intended environment, or in combination with other elements. For instance, the font-resizer from ja_purity is dependent on additional files scattered throughout the template folders, all of which also contain code for elements I do not wish to use.

Now, as I am trying (both for myself and for others like me) to keep this simple, I did not want to inadvertently add any irrelevant code by copying and pasting elements and files in order to get something working properly. I hope I have succeeded. If not, I have allowed myself plenty of room to revise, as I intend to use this template as a starting point for all my websites from here on. Bring on the debugging :)

Flexi Template v2  Download here (zip 500KB)
Live Demo Here

Below are the features included in the Joomla 1.5 Blank Skeleton (the template I used as a starting point) by Waseem Sadiq of www.bulletprooftemplates.com. Read Waseem's notes here.

Most importantly, to reiterate Waseem:

In the spirit of Joomla 1.5 and open source these templates are released under the same GPL/GNU License as Joomla itself.

View GNU General Public License

1. Tableless XHTML /CSS based template code
2. Suckerfish drop down main navigation
3. Suckerfish flyout left and right column navigation
4. Parent item indicators for dropdown and flyout menus
5. SEO Source Ordering
6. HTML overrides from Joomla default beez template
7. 16 fully collapsible Module Positions
8. Left-to-Right / Right-to-Left usability
9. Fixed width with narrow / wide Unobtrusive Degradable Ajax Style Sheet Switcher
10. On-page anchor links

A list of features I added:

• colour-coded CSS -

  To easily see, associate, and separate layout and style elements. Joomla generates its own CSS tags for content styles and layouts. When I began customising Joomla templates, I had a lot of trouble with Joomla-specific CSS, mainly because it wasn't provided in list form. Firebug is the best tool for discovering "what lies beneath".

  I've impeded the issue here by using the Beez overrides, which remove most of Joomla's default table output and replaces it with div layouts with new tag names.

  I have applied either a border or a coloured background to most content elements as I have found it easier to remove the attributes I don't need. Besides, content formatting can, if done well, add that extra bit of design intricacy to a site, and having to undo elements reminds me that they are there to be styled!

• footer teaser modules -

  Using the automatic width teaser technique from Waseem's template_config.php, I added another four module positions outside and below the content, just above the footer.

• Font resizer (from ja_purity) -

  Rob helped separate the font-resizer from the rest of the features included in JA Purity's template tools. Details here.

• Rounded corner modules -

  The technique I use is based on rhuk_milkyway's four graphics to make up a rounded module. This is a repeatable design technique. The graphics are oversized to allow for varying widths and lenghts, determined either by expanding content or changes to the columns' width in the CSS.

  The disadvantage is that the graphic's background colour and the background colour (of the module or column etc, depending) set in the CSS must be matched. If your background is not white, as it is in this example and in the accompanying graphics, then you must change the graphics themselves. I've included the source files to make these changes as easy as possible.

  There is also the h3 module title to consider. This can be enable/disabled. Note: The module style must be "rounded" for these graphics to appear at all.

• Theme.css -

  This file contains common styling of layout elements (colours, background images and borders). The numerous CSS files in this template may cause a beginner to feel overwhelmed because different elements are kept within different CSS files. The main reason for this is to separate layout from style.

  In theory, the CSS that control layout will not have to be adjusted, only the template.css (Joomla-specific) and the theme.css (styles) need be edited (unless the main widths are changed, for example).

  This technique will allow for additional colour and background variations that can be selected by the admin via the back-end through the template manager, or by the user via the front-end akin to the width styles in this template. Rhuk_milkyway is a good working example of this technique (parameters) and it is something I will introduce in later versions.

• Beez Overrides -

  Note:

  • ../templates/emc23flexiv2/html/com_content/article/default.php
  • ../catgeory/blog_item.php
  • ../section/blog_item.php
  all contain:<img src="/<?php echo $this->baseurl ?>/templates/emc23flexiv2/images/trans.gif" alt="<?php echo JText::_('attention open in a new window'); ?>" />This image path must be changed should the template be renamed, otherwise 'attention open in a new window' will display next to the Print, PDF, and Email icons. A detailed article on Understanding Output Overrides by Andrew Eddie found here.

../templates/emc23flexiv2/javascript/styleswitch.js requires editing too, if the template name is changed. var stylepath = 'templates/emc23flexiv2/css/';