Customizing your Template Using Joomla!1.5

Share this page via Facebook, Twitter or LinkedIn.

Your message has been sent.

How would you like to send this article:

Save this article to your account for easy access.

by Richard Carter | July 2010 | Joomla! Open Source

With the widespread empowering of website owners being able to manage their own website's content, there are a huge number of content management systems available. Joomla! is one of the most popular of these content management systems with a large user base and active community who are constantly working to improve Joomla! for new and future users.

In the first article we have learned How to Style the search Module and Search Component

In the Second article of this article series by Richard Carter, author of Joomla! 1.5 Templates Cookbook we will learn:

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

(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:

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original=" /templates/rhuk_milkyway/images/arrow.png" alt="" />
     Features
  </span>
</div>

How to do it...

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;
}

Once the altered CSS file has been uploaded, you can see your changes:
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).
Once uploaded, your new breadcrumb looks a little more fitting for your website:

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.

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.

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 (

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;

}

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;
}

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:
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
}
```
Once uploaded, your new pagination is complete:

Joomla! 1.5 Templates Cookbook

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

Published: July 2010
eBook Price: £14.99
Book Price: £24.99
See more

Select your format and quantity:

(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.

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...

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>

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>

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>

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 */
}
```
Once the changed files have been uploaded, you can see your link appear towards the bottom of every page in your Joomla! website:

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.

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:

Joomla! 1.5 Templates Cookbook [book]
Customizing search Module and search Component using Joomla! 1.5 [article]
Adding a Random Background Image to your Joomla! Template1.5 [article]
Using Javascript Effects to enhance your Joomla! website for Visitors [article]

Joomla! 1.5 Templates Cookbook

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

Published: July 2010
eBook Price: £14.99
Book Price: £24.99
See more

Select your format and quantity:

About the Author :

Aaron Winborn

Aaron Winborn has been developing websites since the mid-90s. Beginning as a freelancer while teaching at a Sudbury school (a democratic and age-mixed model for young people), his clients demanded more and more features, until he (like everyone and their grandmother) realized he had built a full-featured content management system that required more work to develop and maintain than he was able in his spare time.

He realized at some point that somewhere in the world of Open Source, someone had to have created and released something to the community. Of course, the wonderful news was Drupal.

After converting the existing sites of his clients to Drupal, he continued learning and began to contribute back to the community. About this time, Advomatic, a company with similar interests and a commitment to the Drupal community, began expanding beyond the initial partners who formed it in the wake of Howard Dean's presidential campaign of 2004. Aaron realized that his own goals of creating great sites with a team would be better matched there, and he was hired as their first employee.

Since that time, he has helped to develop some excellent sites, with clients such as Air America Radio, TPM Cafe, NRDC, Greenopia, Mountain News, Viacom, and Bioneers. He has also contributed several modules to Drupal, mostly stemming from his work with multimedia, including Embedded Media Field (for third-party Video, Audio, and Images), Views Slideshow (to create slide shows out of any content), and the RPG module (for online gaming, still in progress).