(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:
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…
-
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 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).
-
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.
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.
<span class="pagination">
<span>«</span>
<span>Start</span>
<span>Prev</span><strong>
<span>1</span></strong>
<strong>
<a href=" index.php?searchword=Joomla!&searchphrase=all&Itemid=1&
option=com_search&limitstart=20" title="2">2</a>
</strong>
<strong>
<a href=" index.php?searchword=Joomla!&searchphrase=all&Itemid=1&
option=com_search&limitstart=40" title="3">3</a></strong>
<a href=" index.php?searchword=Joomla!&searchphrase=all&Itemid=1&
option=com_search&limitstart=20" title="Next">Next</a>
<a href=" index.php?searchword=Joomla!&searchphrase=all&Itemid=1&
option=com_search&limitstart=40" title="End">End</a>
<span>»</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>«</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>»</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">«</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">»</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:
