Page 1 of 1
[SOLVED] How to replace Breadcrumb Home with image?
Posted: Wed Apr 20, 2011 10:43 pm
by SXGuy
Basically, i want to replace all "Home" breadcrumb links, with an image of my choice.
rather than modifying the header.tpl file and removing all references to the home breadcrumb link from every controller file, id like to globally replace home with an image.
anyone have any ideas?
Re: How to replace Breadcrumb Home with image?
Posted: Thu Apr 21, 2011 8:59 am
by reynierpm
CSS? Breadcrumbs use CSS for styles and then you can use your own background images or wathever you want to do ;)
Re: How to replace Breadcrumb Home with image?
Posted: Thu Apr 21, 2011 2:49 pm
by SXGuy
its not the breadcrumb background i want to style though, i want to replace the home link with an image.
the home link is only visible when you navigate away from the home page. In each controller file you have the code to display the home link breadcrumb before the current path breadcrumb link. Rather than edit every controller file, i wanted to know if there was a way to replace the home link with an image, like an icon of a house
Re: How to replace Breadcrumb Home with image?
Posted: Thu Apr 21, 2011 9:55 pm
by reynierpm
Once again with CSS and some tricky JS you can exchange text with images. See this example:
Code: Select all
<a href="index.php?route=home"><span>Home</span></a>
With JS (I prefer jQuery and also is bundled in OpenCart) you can add or remove CSS properties so you can get the Home text and replace with <img /> tags. Sounds complex but isn't. Just take a look at jQuery Docs and try to do this example.
Cheers and lucky
Re: How to replace Breadcrumb Home with image?
Posted: Fri Apr 22, 2011 12:19 am
by SXGuy
ok, i managed to do it, slightly easier than using a span class and defining it in the stylesheet
catalog/view/theme/yourtheme/template/common/header.tpl
find
Code: Select all
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><a href="<?php echo str_replace('&', '&', $breadcrumb['href']); ?>"><?php echo $breadcrumb['text']; ?></a>
<?php } ?>
change to
Code: Select all
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php if (($breadcrumb['href']) && ($breadcrumb['href'] == 'http://www.yoursite.com/index.php?route=common/home')) { ?>
<a href="<?php echo str_replace('&', '&', $breadcrumb['href']); ?>"><img src="catalog/view/theme/yourtheme/image/yourimage.png"></a>
<?php } else { ?>
<?php echo $breadcrumb['separator']; ?><a href="<?php echo str_replace('&', '&', $breadcrumb['href']); ?>"><?php echo $breadcrumb['text']; ?></a>
<?php } ?>
<?php } ?>
Probably abit messy, but it works
Re: [SOLVED] How to replace Breadcrumb Home with image?
Posted: Fri Jun 03, 2011 12:14 am
by roberttimes
great idea but it's not working for me. is this version specific code? I'm on 1.4.9.5. Thanks!