Customizing your Template Using Joomla!1.5

Over 60 simple but incredibly effective recipes for taking control of Joomla! templates

(Read more interesting articles on Joomla! 1.5 here.)

Customizing the breadcrumb

The larger your website gets, the more important it is to make use of Joomla!'s breadcrumb feature.

Getting ready

To start redefining your breadcrumb's style, open the template.css file for your template; use the rhuk_milkyway template for this demonstration. This means that your CSS file will be located in the templates\rhuk_milkyway\css directory of your Joomla! installation. If you visit a page other than the home page in your Joomla! website, you'll be able to see the breadcrumb:

Customizing your Template Using Joomla!1.5

As you can see, the rhuk_milkyway template defines the style for the breadcrumb in the template.css file:

span.pathway {
display: block;
margin: 0 20px;
height: 16px;
line-height: 16px;
overflow: hidden;
}

The HTML that defines the breadcrumb (for the Features page) is as shown:

<div id="pathway">
<span class="breadcrumbs pathway">
<a href="http://example.com/" class="pathway">Home</a>
<img src=" /templates/rhuk_milkyway/images/arrow.png" alt="" />
Features
</span>
</div>

How to do it...

  1. You can customize the breadcrumb by changing the CSS, and altering the color and size of the breadcrumb's content:

    span.pathway {
    color: #666;
    font-size: 90%;
    display: block;
    margin: 0 20px;
    height: 16px;
    line-height: 16px;
    overflow: hidden;
    }

  2. Once the altered CSS file has been uploaded, you can see your changes:

    Customizing your Template Using Joomla!1.5

  3. The next step to customizing your breadcrumb is to alter the image used for the separator arrows, located at \templates\rhuk_milkyway\images\arrow.png. You'll replace this image with your own new one (which has been enlarged in this image to make it easier to view).

    Customizing your Template Using Joomla!1.5

  4. Once uploaded, your new breadcrumb looks a little more fitting for your website:

    Customizing your Template Using Joomla!1.5

How it works...

By targeting specific ids and classes with CSS and changing an image in the images directory of our template, we can subtly change our template to distinguish it from others without a great deal of work.

See also

  • Styling the search module
  • Styling pagination

Styling pagination

Some content in your Joomla! website may run over multiple pages (for example, some search results). By styling pagination you can again help to distinguish your Joomla! template from others.

Getting ready

Open your template's primary stylesheet; generally, this will be called template.css, and is located in the templates\rhuk_milkyway\css\ directory if we are using the rhuk_milkyway template (as we are for this demonstration).

It is also worth bearing in mind the typical structure of the pagination feature within the HTML. We can find this by searching for a common word such as "the" or "Joomla!" on our website.

<span class="pagination">

<span>&laquo;</span>
<span>Start</span>
<span>Prev</span><strong>
<span>1</span></strong>

<strong>
<a href=" index.php?searchword=Joomla!&amp;searchphrase=all&amp;Itemid=1&amp;
option=com_search&amp;limitstart=20" title="2">2</a>
</strong>

<strong>
<a href=" index.php?searchword=Joomla!&amp;searchphrase=all&amp;Itemid=1&amp;
option=com_search&amp;limitstart=40" title="3">3</a></strong>

<a href=" index.php?searchword=Joomla!&amp;searchphrase=all&amp;Itemid=1&amp;
option=com_search&amp;limitstart=20" title="Next">Next</a>

<a href=" index.php?searchword=Joomla!&amp;searchphrase=all&amp;Itemid=1&amp;
option=com_search&amp;limitstart=40" title="End">End</a>

<span>&raquo;</span>
</span>

Our primary interest in the previous part is the .pagination class assigned to the <span> element that contains the pagination feature's content. By default, the pagination (as seen on the search results page) looks like this:

How to do it...

  • Now that you are aware of the relevant class to style, you can add it to your template's stylesheet, with the aim of making the pagination less obtrusive with the surrounding content of your pages:

    .pagination {
    color: #666;
    font-size: 90%
    }
    .pagination a {
    color: #F07 !important /* pink */
    }

  • Once you've uploaded the newer stylesheet, you'll be able to see the new pagination style, which will appear smaller than before, and with pink-colored links.

    Customizing your Template Using Joomla!1.5

Producing more semantic markup for pagination

As you can see above, the HTML that Joomla! currently generates for the pagination feature is quite verbose—unnecessarily long and untidy. We'll change our template's pagination.php file to use more semantic (meaningful) HTML for this feature by adding each item to a list item within an unordered list element (

  1. Open the pagination.php file and you will see four PHP functions (assuming that you are looking within the rhuk_milkyway template), but the function which is of interest to us is the pagination_list_render PHP function. Currently, the code for this function looks like this:

    function pagination_list_render($list)
    {
    // Initialize variables
    $html = "<span class=\"pagination\">";
    $html .= '<span>&laquo;</span>'.$list['start']['data'];
    $html .= $list['previous']['data'];
    foreach( $list['pages'] as $page )
    {
    if($page['data']['active']) {
    $html .= '<strong>';
    }

    $html .= $page['data'];
    if($page['data']['active']) {
    $html .= '</strong>';
    }
    }
    $html .= $list['next']['data'];
    $html .= $list['end']['data'];
    $html .= '<span>&raquo;</span>';

    $html .= "</span>";
    return $html;

    }

  2. You can see that Joomla! builds up the HTML to insert into the page by using the $html PHP variable. All you need to change is the HTML you can see:

    function pagination_list_render($list)
    {
    // Initialize variables
    $html = "<ul class=\"pagination\">";
    $html .= '<li class="page-previous">&laquo;</li>' . '<li>' .
    $list['start']['data'] . '</li>';
    $html .= '<li>' . $list['previous']['data'] . '</li>';

    foreach( $list['pages'] as $page )
    {
    if($page['data']['active']) {
    $html .= '<li>';
    }

    $html .= '<strong class="active">' . $page['data'] .
    '</strong>';

    if($page['data']['active']) {
    $html .= '</li>';
    }
    }

    $html .= '<li>' . $list['next']['data'] . '</li>';
    $html .= '<li>' . $list['end']['data'] . '</li>';
    $html .= '<li class="page-next">&raquo;</li>';

    $html .= "</ul>";
    return $html;
    }

  3. If you now upload the pagination.php file and refresh the page, you'll see that the previous style that you had defined only partially styles the newer HTML:

    Customizing your Template Using Joomla!1.5

  4. If you add the following CSS to your template's template.css file, everything will be styled as you intended before:

    ul.pagination {
    list-style-type: none
    }

    ul.pagination li {
    display: inline
    }

  5. Once uploaded, your new pagination is complete:

    Customizing your Template Using Joomla!1.5

(Read more interesting articles on Joomla! 1.5 here.)

How it works...

By applying CSS to the relevant ids and classes specified in the HTML for Joomla!'s pagination feature, it's possible to quite drastically alter the pagination's appearance for your Joomla! template. It's also possible to change the HTML generated by Joomla! in some circumstances, as we saw with our template's pagination.php file. One benefit of changing the HTML that Joomla! outputs is that you can add classes and ids that make it easier to style elements of your Joomla! website with CSS.

See also

  • Customizing the breadcrumb

Linking back to the top of your page

If your website contains a number of very long articles or pieces of content, it's wise to include a back to the top link at the bottom of each page.

Getting ready

Open your Joomla! template's index.php file. For the purposes of this example, we'll be using the rhuk_milkyway template, though the technique can be applied to any Joomla! template.

How to do it...

  1. Search for the following snippet of code in your template:

    <table class="nopad">
    <tr valign="top">
    <td>
    <jdoc:include type="component" />
    <jdoc:include type="modules" name="footer" style="xhtml"/>
    </td>

  2. Create an anchor called top above the line where the statement <jdoc:include type="component" /> is included in your page:

    <table class="nopad">
    <tr valign="top">
    <td>
    <a name="top">&nbsp;</a>
    <jdoc:include type="component" />
    <p class="top-of-page">
    <a href="#top" title="Top of this page">Top of this page</a>
    </p>
    <jdoc:include type="modules" name="footer" style="xhtml"/>
    </td>

  3. Beneath the include statement that includes the content, now add the link to the top of the page:

    <table class="nopad">
    <tr valign="top">
    <td>
    <a name="top">&nbsp;</a>
    <jdoc:include type="component" />
    <p class="top-of-page">
    <a href="#top" title="Top of this page">Top of
    this page</a>

    </p>
    <jdoc:include type="modules" name="footer" style="xhtml"/>
    </td>

  4. You can now add a little style for your link by defining CSS for p.top-of-page in your template's template.css file:

    p.top-of-page {
    color: #666;
    font-size: 90%;
    }

    p.top-of-page a {
    color: #09C /* blue */
    }

  5. Once the changed files have been uploaded, you can see your link appear towards the bottom of every page in your Joomla! website:

    Customizing your Template Using Joomla!1.5

How it works...

The <jdoc:include type="component" /> statement inserts the page's content into our Joomla! template, so this is where we want to allow our website's visitors to skip back to the top. Giving the value #top for the href attribute in the link element (inserted below the content) creates a link to an anchor called top within the page, which we create above the content block in the form <a name="top"> </a>.

There's more...

There is an extension available for Joomla! that provides similar functionality; it's called Return to Top for Content Items, and is available from the Joomla! website at http://extensions.Joomla.org/extensions/structure-a-navigation/site-navigation/5617.

Downloading the extension requires you to be logged into the extension developer's website.

Rather than inserting a Return to top link in every page on your website, it allows you to insert these links wherever you need to within your content by inserting {rt} into your page's content.

However, adding the link to your template is better for your website's performance, as every module or plugin that your Joomla! website has enabled will slow down the loading time of the website for your visitors.

See also

  • Styling the search form
  • Styling pagination

Summary

In this article we have learned:

  • Customizing the breadcrumb
  • Styling pagination
  • Linking back to the top of your page

In the next article we will learn How to add a Random Background Image to your Joomla! Template1.5


If you have read this article you may be interested to view:


Books to Consider

Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs
$ 26.99
Joomla! 1.5 Template Design
$ 14.85
comments powered by Disqus