Theming Breadcrumb Output HTML
To theme the generated HTML of breadcrumbs in Drupal 6.x, the simplest method is to override the breadcrumb() function by creating a theme_breadcrumb() function of your own, where 'theme' is replaced by the name of your custom theme. For example, if you are using the Garland theme, you would rename this function garland_breadcrumb().
Reasons you might want to change the output HTML:
- Change or remove the default » (») separators
- Change the wrapping <div> tag to a different type of element
- Wrap each breadcrumb element with a custom tag, such as a <div>, <p>, <li>, etc.
- Change or add a class to a specific element in the breadcrumb array
In the example below, I:
- Iterate through each element of the $breadcrumb array
- Wrap the output of each breadcrumb element in a <p> tag
- Assign the last element of the array (representing the current page) a special class called 'breadcrumbcurrent'
Step1
To do this, simply copy and paste this code into your template.php file, and change the theme_breadcrumb() function name to [yourcustomtheme]_breadcrumb():
<?php
/**
* Allow themable breadcrumbs
*/
function theme_breadcrumb($breadcrumb) {
if (!empty($breadcrumb)) {
$lastitem = sizeof($breadcrumb);
$crumbs = '<div class="breadcrumbs">';
$a=1;
foreach($breadcrumb as $value) {
if ($a!=$lastitem){
$crumbs .= '<p>'.$value.'</p>';
$a++;
}
else {
$crumbs .= '<p class="breadcrumbcurrent">'.$value.'</p>';
}
}
$crumbs .= '</div>';
}
return $crumbs;
}
?>Step 2
Save and upload your template.php file to the directory where [yourcustomtheme] resides. If you are following Drupal 6 conventions, that directory is sites/all/themes/[yourcustomtheme].
Step 3
Clear your cached data by clicking on the Clear cached data button near the bottom of the 'Performance' page, located at Administer » Site Configuration » Performance.
Good luck!
- Frost
How would you go about giving
How would you go about giving every breadcrumb a unique class? Thanks! This is very helpful <3
-=-=-=-=-=-=-=-=-=-=-
www.twitter.com/amysteen
How to assign a successive class to each breadcrumb:
<?php
/**
* Allow themable breadcrumbs
*/
function theme_breadcrumb($breadcrumb) {
if (!empty($breadcrumb)) {
$lastitem = sizeof($breadcrumb);
$crumbs = '<div class="breadcrumbs">';
$a=1;
foreach($breadcrumb as $value) {
if ($a!=$lastitem){
$crumbs .= '<p class="breadcrumblevel'.$a.'">'.$value.'</p>';
$a++;
}
else {
$crumbs .= '<p class="breadcrumbcurrent">'.$value.'</p>';
}
}
$crumbs .= '</div>';
}
return $crumbs;
}
?>
You'll notice that I simply added a CSS class and the array counter $a into the output string, so that each successive breadcrumb has a class of breadcrumblevel1 ... breadcrumblevel2 ... breadcrumblevel3 ... and so on.
Good luck!
- Frost
This is really cool Frost, I
This is really cool Frost, I modify it because I didn't want to have
and also I added a space between the span. This is my code:
function phptemplate_breadcrumb($breadcrumb) {if (!empty($breadcrumb)) {
$lastitem = sizeof($breadcrumb);
$crumbs = '<div class="breadcrumbs">';
$a=1;
foreach($breadcrumb as $value) {
if ($a!=$lastitem){
$crumbs .= '<span class="breadcrumb-'.$a.'">'. $value . ' ' . '</span>';
$a++;
}
else {
$crumbs .= '<span class="breadcrumb-last">'.$value.'</span>';
}
}
$crumbs .= '</div>';
}
return $crumbs;
}
And my CSS
.breadcrumb span.breadcrumb-last {
font-family:Trebuchet MS;
font-size:24px;
color: #ff3300;
}
.breadcrumb span.breadcrumb-last a {
font-family:Trebuchet MS;
font-size:24px;
color: #ff3300;
}
.breadcrumb span.breadcrumb-2 a {
color: #535353;
font-family:Trebuchet MS;
font-size:24px;
}
.breadcrumb span.breadcrumb-1 a {
color: #abaaaa;
font-family:Trebuchet MS;
font-size:24px;
}
.breadcrumb span a:hover {
text-transform: none;
text-decoration: none;
color: #ff3300;
}
I don't exaggerate if I say that I been looking for something like this for almost 3 weeks now. I think your comment should be moved to a new child page with a more descriptive title.
Thanks a lot.
Luis