The way we ride! (Part 2) – A look into the code of our free template overrides

Sascha
January 23, 2009
Warp

In the previous post we told you about our new template overrides (which you can download here) that render the Joomla output tablelessly. Now we can create websites that have semantic markup and a sensible structure. But actually the tables were not the only problem we had with the way the Joomla core treats content. Also, we quickly reached the limits on how we could style the content. In this post we want to present some improvements we made with our overrides.

First, we wanted to improve the selectability of tags within the components. The following example taken from the Weblinks component is typical for how the HTML code starts and how selectors are handled in Joomla:

Joomla code

<?php if ( $this->params->def( 'show_page_title', 1 ) ) : ?>
    <div class="componentheading<?php echo $this->params->get( '<span style="color: #ff6400;">pageclass_sfx</span>' ); ?>">
        <?php echo $this->escape($this->params->get('page_title')); ?>
    </div>
<?php endif; ?>
…
<table class="contentpane<?php echo $this->params->get( '<span style="color: #ff6400;">pageclass_sfx</span>' ); ?>">
    <tr>
        <td class="contentdescription<?php echo $this->params->get( '<span style="color: #ff6400;">pageclass_sfx</span>' ); ?>">…</td>
    </tr>
</table>
…

Take a look at how often in this little code snippet the page class suffix is attached to an existing CSS class. In this example 3 times. Also, the page class suffix is attached right at the end of each CSS class without any space. So if you give it the suffix blue for example the first class would be called componentheadingblue.

Now imagine you have two different menu items linking to a Weblink component. One has no suffix, the other one has the suffix blue to change the font color of the component heading to blue. This is how most cases look like: you only want to do some small changes to the CSS styles. Say you want the componentheadings to have the font Georgia, be 24 pixels high and capitalized. In order to achieve that you would have to write all CSS attributes twice. The CSS code would look like this:

Possible styles for the Joomla HTML output

div.componentheading {
    font-family: Georgia,"Times New Roman", serif;
    font-size: 24px;
    text-transform: uppercase;
    color: grey;
}

div.componentheadingblue {
    font-family: Georgia,"Times New Roman", serif;
    font-size: 24px;
    text-transform: uppercase;
    color: blue;
}

You realize where we're getting, right? Exactly. That is a lot of redundant code, especially if you have a large website, and you do not only have two components with different suffixes but lots of them. To solve this issue you have to put a space before your chosen page class suffix in the Joomla administration. It would look like blue. We think this is a little annoying. Also, it is not really required to attach the page title more than once.

So let's take a look at what we did. First, we gave every component a DIV that wraps the whole output of the component. We gave this DIV two classes. One class is called joomla and if there is a suffix, that is the other class. In there is a DIV with the class that describes the component:

YOOtheme overrides

<div class="joomla <?php echo $this->params->get( '<span style="color: #ff6400;">pageclass_sfx</span>' ); ?>">
    <div class="weblinks">
        …
    </div>
</div>

So let's use the example from above and give our component the page class suffix blue. The output would be as follows:

YOOtheme overrides HTML output

<div class="joomla blue">
    <div class="weblinks">
        …
    </div>
</div>

Let's remember how the componentheading is rendered in Joomla:

Joomla code

<?php if ( $this->params->def( 'show_page_title', 1 ) ) : ?>
     <div class="componentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
         <?php echo $this->escape($this->params->get('page_title')); ?>
     </div>
<?php endif; ?>

Now let's think of what this DIV displays semantically. A heading, right? So rather than a DIV the tag should be an H1. Also, we think it is better to use the get() function instead of setting the page title to 1 if it is not defined. We made it look like this:

YOOtheme overrides

<?php if ($this->params->get('show_page_title', 1)) : ?>
    <h1 class="pagetitle">
        <?php echo $this->escape($this->params->get('page_title')); ?>
    </h1>
<?php endif; ?>

And the whole thing looks like this:

YOOtheme overrides

<div class="joomla <?php echo $this->params->get( '<span style="color: #ff6400;">pageclass_sfx</span>' ); ?>">
    <div class="weblinks">
        <?php if ($this->params->get('show_page_title', 1)) : ?>
            <h1 class="pagetitle">
                <?php echo $this->escape($this->params->get('page_title')); ?>
            </h1>
        <?php endif; ?>
        …
    </div>
</div>

That way, if we have a component without a suffix and one that has the suffix blue, we can very specifically assign our styles to the right selector with even less code. Also, we used the page title only once, and you can select and style any HTML content.

Possible styles for the YOOtheme overrides HTML output

div.joomla div.weblinks h1.pagetitle {
    font-family: Georgia,"Times New Roman", serif;
    font-size: 24px;
    text-transform: uppercase;
    color: grey;
}

div.blue div.weblinks h1.pagetitle {
    color: blue;
}

Also, the joomla class allows us to only style Joomla's tags without interfering with the styling of third-party components.

This example taken from the weblinks component represents the way we wrote all overrides quite well. We restructured and optimized the HTML output of all Joomla core components. Especially we tried hard to improve the code of the whole com_content. But take a look at it yourself. If you like our overrides and interesting questions come up during the next couple of weeks we will probably write a third post on this topic.

Oh, and keep in mind that the overrides are already included in all YOOtheme templates from 2009. To use them in all other templates you can download the template overrides here.