can I replace the breadcrumb separator with a gif image, and if so, how?

[lankeeyankee]

I'd like to use the little arrow gif image from my flyout category menu as the breadcrumb separator to give a little design continuity to the navigation. Is this possible? If so, how do I do it? I thought about inserting a link to the image (in my template folder) in the breadcrumb.php file and disabling the BREAD_CRUMB_SEPARATOR entry from the configuration table. Am I going in the right direction or heading for trouble?

I'm using 1.3.7.1.

Thanks!

Matt

[lankeeyankee]

Nevermind, I figured it out with some help from a post in the suggestions forum by banswidthjunkie.

For those interested in using an image for your breadcrumb separator use these steps:

In includes/classes/breadcrumbs.php change:

  function trail($separator = '  ') {
    $trail_string = '';
    for ($i=0, $n=sizeof($this->_trail); $i<$n; $i++) {
//    echo 'breadcrumb ' . $i . ' of ' . $n . ': ' . $this->_trail[$i]['title'] . '<br />';
      $skip_link = false;
    if ($i==($n-1) && DISABLE_BREADCRUMB_LINKS_ON_LAST_ITEM =='true') {
        $skip_link = true;
      }
      if (isset($this->_trail[$i]['link']) && zen_not_null($this->_trail[$i]['link']) && !$skip_link ) {
        // this line simply sets the "Home" link to be the domain/url, not main_page=index?blahblah:
        if ($this->_trail[$i]['title'] == HEADER_TITLE_CATALOG) {
          $trail_string .= '  <a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . $this->_trail[$i]['title'] . '</a>';
        } else {
          $trail_string .= '  <a href="' . $this->_trail[$i]['link'] . '">' . $this->_trail[$i]['title'] . '</a>';
        }
      } else {
        $trail_string .= $this->_trail[$i]['title'];
      }
      if (($i+1) < $n) $trail_string .= $separator;
      $trail_string .= "\n";
    }
    return $trail_string;
  }

to this:

function trail($separator = '  ') { 
    $trail_string = ''; 
    for ($i=0, $n=sizeof($this->_trail); $i!=$n; ++$i) { 
    $crumb = ''; 
      $skip_link = false; 
          if ($i==($n-1) && DISABLE_BREADCRUMB_LINKS_ON_LAST_ITEM =='true') { 
        $skip_link = true; 
      } 
      if (isset($this->_trail[$i]['link']) && zen_not_null($this->_trail[$i]['link']) && !$skip_link ) { 
        // this line simply sets the "Home" link to be the domain/url, not main_page=index?blahblah: 
        if ($this->_trail[$i]['title'] == HEADER_TITLE_CATALOG) { 
          $crumb .= '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . $this->_trail[$i]['title'] . '</a>'; 
        } else { 
          $crumb .= '<a href="' . $this->_trail[$i]['link'] . '">' . $this->_trail[$i]['title'] . '</a>'; 
        } 
      } else { 
        $crumb .= $this->_trail[$i]['title']; 
      } 
      // Add the styling here by wrapping the crumb an separator in span tags 
      $trail_string .= '<span class="crumb">' . $crumb . '</span>'; 
      if (($i+1) < $n) $trail_string .= '<span class="crumb-separator">&nbsp;' . $separator . '&nbsp;</span>'; 
    } 
    return $trail_string; 
  }

This allows you to style both the separator and well as the breadcrumb text in your stylesheet, using .crumb and .crumb-separator as the selectors. This is banswidthjunkie's idea and it works great. Now you can style your breadcrumbs however you want!

What I did then, since I want the little arrow from my flyout category menu to be used as the breadcrumb separator, is add this style to my main stylesheet:

.crumb-separator {
 background:url(../images/submenu.gif) 50% 50% no-repeat;
}

The last step was to go into the admin panel and navigate to configuration>layout settings and change:

Bread Crumbs Navigation Separator from the default  ::  to    (just remove the :: or whatever you have in place, leaving just the 2  )

That's it! You may need to adjust the spacing to make your image fit correctly, but other than that you are set.

Matt

[Kim]

Um ... You know you could do it without touching the code? Just replace the double colon in the Admin> Configuration> Layout Settings>
Bread Crumbs Navigation Separator with an <img src="path/to/your/image.gif" />

[lankeeyankee]

Um ... You know you could do it without touching the code? Just replace the double colon in the Admin> Configuration> Layout Settings>
Bread Crumbs Navigation Separator with an <img src="path/to/your/image.gif" />

No, I didn't know that, which is why I asked the question in the first place.

So, I'll change everything back to the original code and will follow your suggestion. Perhaps you can delete this thread to save space?

BTW, is there a mention of doing your steps somewhere like the wiki? These are the little things that would be great to have documentation for. Perhaps if there is a new edition to the zen book, the author could include a few chapters on more in depth customization.

Thanks for the tip, Kim!

[lankeeyankee]

Another question:

Is there a way to style the separator when adding it through an <img src> tag in the configuration menu? It looked better when I did it the other way. The arrow is now a little higher than the text, whereas when I styled it it was in alignment with the text.

Can I add a style declaration to the Img src tag? Like 50% 50%, I think that is what made it align better the other way.

Thanks!

[Kim]

You can give the <img src /> a class and use your stylesheet or an inline style using style="my style: something;"