Using an Image as a Breadcrumb Separator
I am working with the zen template. I would like to change the zen_breadcrumb_separator from its current " , " to an image -- a small triangle shape. The interface to customize the breadcrumb allows text only, and only 9 characters.
I have tried changing it in themes/zen/themes-settings-init.php and themes-settings.php. I also then manually added the html code it in the database, in the "variables.theme_zen_settings" field. But, this did not work.
The html I added in both cases replaced the " , " with:
<img src="/path/img.gif" style="padding: 0 5 0 5;" >
Note that when placing this in the php files, I escaped the quotes. No errors showed -- I just got the default breadcrumb " , ".
I am puzzled, Is there a way to do this? I can find nothing about it in the forums or support.
it is not that way
I have once gone through this issue. see the below blog
http://dreamweaverdrupalthemeextension.blogspot.com/2008/02/using-image-...
To Replace the Feed (RSS) icon with a custom image, see this link. http://drupal.org/node/34384
Hope this would help you.
http://dreamweaverdrupalthemeextension.blogspot.com/
You could try to change
You could try to change template.php from zen theme
function zen_breadcrumb($breadcrumb) {if (!empty($breadcrumb)) {
return '<div class="breadcrumb">'. implode(' :: ', $breadcrumb) .'</div>';
}
}
into
function zen_breadcrumb($breadcrumb) {$img_separator = '<img src="/path/img.gif" style="padding: 0 5 0 5;" >';
if (!empty($breadcrumb)) {
return '<div class="breadcrumb">'. implode($img_separator, $breadcrumb) .'</div>';
}
}
Even better: change style="padding: 0 5 0 5;" into class="bc_separator"
and add to your style.css img.bc_separator { padding: 0 5 0 5; }
--
Alan F.
themeartists.com
Path to theme
Just an addendum (for those that don't know), you can retrieve your path to your theme separator image using:
base_path() . path_to_theme()Accessibility issue > use CSS
This solution might be slightly out of the way - but why not use css for your task?
.breadcrumb a {background: url(/imagepath/triangle.gif);
padding-left: 10px;
}
(change 10px to whatever looks satisfying)
This serves the same purpose and doesn't bother screen readers or purists with unidentified images. Set nbsp as a seperator to provide an (audible) pause between the elements.
On the other hand, if you mind accessibility issues at all - better not use an image there, at all. It does not resize along with font scaling in some browsers.
Thanks for considering ;-)
Meike