By cderecki on

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.

⋅ Categories: Drupal 5.x

Comments

sherifmayika’s picture

sherifmayika commented

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/

alan.fork’s picture

alan.fork commented

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

skaaptjop’s picture

skaaptjop commented

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()

hexabinaer’s picture

hexabinaer
Location Berlin, Germany
commented

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