Joomla 1.5 Flexi Template v2.3 Released

Written by Lisa | 03.23.11

EMC23 - Web Development Blog

This could be my last update to the Flexi Template for Joomla 1.5 and what better version number to finish off on than 2.3.

The most significant addition to 2.3 is that I have combined the white and colour-coded styles into this single template and made the preferred style sheet selectable via the back end template manager.

Download Flexi Template v2.3

Notes on previous version development can be found in earlier blog entries.
View Live Demo

I've also split up the CSS files even more so than I had previously. It can be overwhelming at first as there is now 17 files in the CSS folder. Each are clearly labelled, and you should find yourself using only a few on a regular basis.

My main motivation was to separate the styles associated with Joomla-specific elements (like the login module and the contact component) from the bulk of the code. So in addition to menus.css, modules.css and layout.css, we have contact, login, and joomla.css, which contains the remaining Joomla elements (like error messages, polls, banners etc.)

Contact Component Override

I've also made changes to the contact component override, mostly out of personal preference.

I disliked how the previous fields spanned across the entire width of the available space, and I found the spacing of the address information and icons too cramped. The only change I made to the override itself was surrounding the contact name in a h3 tag to give it more prominence and so it can be styled separately to the rest of the contact info. The rest of the changes are found in contact.css.

Colour-Coded vs White

The colour-coded style came in very handy when I first started building my own Joomla templates, because I could visually locate elements I wanted to edit and then easily find them in the CSS. I eventually stopped using it after I became familiar the Joomla-specific styles, and it became more work to strip away all the colours, than to find what I was looking for.

I hadn't updated the colour-coded version regularly, as the white version became more useful to me. I spent more time using the white version and therefore came across many of its inadequacies.

Beez Bugs

I've fixed two bugs in the Beez Overrides. One has to do with the display of the Miscellaneous Info in the contact component and is summarised here on Joomla.org.

The other has to do with the p.buttonheading in com_content/article/default.php.

When one hides the PDF/print/email icons using the individual article's Advanced Parameters, the containing element (p.buttonheading) does not disappear as it should. This makes little difference to the articles appearance in the front end, but since I like streamlined code, I had to fix it :)

<p class="buttonheading">
<?php if ($this->print) :
echo JHTML::_('icon.print_screen', $this->article, $this->params, $this->access);
elseif ($this->params->get('show_pdf_icon') || $this->params->get('show_print_icon') || $this->params->get('show_email_icon')) : ?>
<img src="/<?php echo $this->baseurl ?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/trans.gif" alt="<?php echo JText::_('attention open in a new window'); ?>" />
<?php if ($this->params->get('show_pdf_icon')) :
echo JHTML::_('icon.pdf', $this->article, $this->params, $this->access);
endif;
if ($this->params->get('show_print_icon')) :
echo JHTML::_('icon.print_popup', $this->article, $this->params, $this->access);
endif;
if ($this->params->get('show_email_icon')) :
echo JHTML::_('icon.email', $this->article, $this->params, $this->access);
endif;
endif; ?>
</p>

is replaced with

<?php if ($this->params->get('show_print_icon') || $this->params->get('show_pdf_icon') || $this->params->get('show_email_icon')) { ?>

<p class="buttonheading">
<?php if ($this->print) :
echo JHTML::_('icon.print_screen', $this->article, $this->params, $this->access);
elseif ($this->params->get('show_pdf_icon') || $this->params->get('show_print_icon') || $this->params->get('show_email_icon')) : ?>
<img src="/<?php echo $this->baseurl ?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/trans.gif" alt="<?php echo JText::_('attention open in a new window'); ?>" />
<?php if ($this->params->get('show_pdf_icon')) :
echo JHTML::_('icon.pdf', $this->article, $this->params, $this->access);
endif;
if ($this->params->get('show_print_icon')) :
echo JHTML::_('icon.print_popup', $this->article, $this->params, $this->access);
endif;
if ($this->params->get('show_email_icon')) :
echo JHTML::_('icon.email', $this->article, $this->params, $this->access);
endif;
endif; ?>
</p>
<?php } ?>