Customizing your Template Using Joomla!1.5

Exclusive offer: get 50% off this eBook here
Joomla! 1.5 Templates Cookbook

Joomla! 1.5 Templates Cookbook — Save 50%

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

$23.99    $12.00
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:

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='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original=" /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

Joomla! 1.5 Templates Cookbook Over 60 simple but incredibly effective recipes for taking control of Joomla! templates
Published: July 2010
eBook Price: $23.99
Book Price: $39.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.

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:


Joomla! 1.5 Templates Cookbook Over 60 simple but incredibly effective recipes for taking control of Joomla! templates
Published: July 2010
eBook Price: $23.99
Book Price: $39.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).

Books From Packt


Mastering Joomla! 1.5 Extension and Framework Development
Mastering Joomla! 1.5 Extension and Framework Development

Joomla! 1.5 JavaScript jQuery
Joomla! 1.5 JavaScript jQuery

Joomla! 1.5 Site Blueprints
Joomla! 1.5 Site Blueprints

Joomla! 1.5 Templates Cookbook
Joomla! 1.5 Templates Cookbook

Amazon SimpleDB Developer Guide
Amazon SimpleDB Developer Guide

Spring Python 1.1
Spring Python 1.1

Amazon SimpleDB Developer Guide
Amazon SimpleDB Developer Guide

Drupal 6 Panels Cookbook
Drupal 6 Panels Cookbook


Your rating: None Average: 5 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
y
X
L
N
W
1
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software