Post by SXGuy » Wed Apr 20, 2011 10:43 pm

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?
Last edited by SXGuy on Fri Apr 22, 2011 12:19 am, edited 1 time in total.

Active Member

Posts

Joined
Sun Nov 08, 2009 2:07 am

Post by reynierpm » Thu Apr 21, 2011 8:59 am

CSS? Breadcrumbs use CSS for styles and then you can use your own background images or wathever you want to do ;)

User avatar
Active Member

Posts

Joined
Tue Jan 12, 2010 9:51 pm

Post by SXGuy » Thu Apr 21, 2011 2:49 pm

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

Active Member

Posts

Joined
Sun Nov 08, 2009 2:07 am

Post by reynierpm » Thu Apr 21, 2011 9:55 pm

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

User avatar
Active Member

Posts

Joined
Tue Jan 12, 2010 9:51 pm

Post by SXGuy » Fri Apr 22, 2011 12:19 am

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

Active Member

Posts

Joined
Sun Nov 08, 2009 2:07 am

Post by roberttimes » Fri Jun 03, 2011 12:14 am

great idea but it's not working for me. is this version specific code? I'm on 1.4.9.5. Thanks!

Newbie

Posts

Joined
Tue May 31, 2011 10:31 pm
Who is online

Users browsing this forum: Majestic-12 [Bot] and 31 guests