6 min read

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



Home

Features

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



«
Start
Prev
1



2



3


Next

End

»

Our primary interest in the previous part is the .pagination class assigned to the 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 = "";
    $html .= '«'.$list['start']['data'];
    $html .= $list['previous']['data'];
    foreach( $list['pages'] as $page )
    {
    if($page['data']['active']) {
    $html .= '';
    }

    $html .= $page['data'];
    if($page['data']['active']) {
    $html .= '
    ';
    }
    }
    $html .= $list['next']['data'];
    $html .= $list['end']['data'];
    $html .= '»';

    $html .= "
    ";
    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 = "

      ";
      $html .= '
    • «
    • ' . '
    • ' .
      $list['start']['data'] . '
    • ';
      $html .= '
    • ' . $list['previous']['data'] . '
    • ';

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

      $html .= '' . $page['data'] .
      '
      ';

      if($page['data']['active']) {
      $html .= '
    • ';
      }
      }

      $html .= '
    • ' . $list['next']['data'] . '
    • ';
      $html .= '
    • ' . $list['end']['data'] . '
    • ';
      $html .= '
    • »
    • ';

      $html .= "
    ";
    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


Subscribe to the weekly Packt Hub newsletter. We'll send you this year's Skill Up Developer Skills Report.

* indicates required

LEAVE A REPLY

Please enter your comment!
Please enter your name here