Magento Forum

Add Image Between Breadcrumbs
 
ecommerce-store
Sr. Member
 
Avatar
Total Posts:  181
Joined:  2008-04-16
Roma
 

Hy Guys,

i can’t insert a gif or png betweel breadcrumbs, i would change the slash with a little image, but i don’t know how.

Someone know?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Black Cat
Mentor
 
Avatar
Total Posts:  3481
Joined:  2008-02-14
Assemini / Cagliari (Italy)
 

i have identic problem!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Christian_Norway
Sr. Member
 
Total Posts:  135
Joined:  2008-06-18
 

Yeah, I need this aswell..

I’m also looking for how to add images between the main horizontal menu on the site.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

something like this:

#breadcrumbs li a {padding:0 4px;background: url(../images/divider.gif) no-repeat right center}

use padding to control the space.

remove the image from last item

#breadcrumbs li.last a { background: none;}

 
Magento Community Magento Community
Magento Community
Magento Community
 
ecommerce-store
Sr. Member
 
Avatar
Total Posts:  181
Joined:  2008-04-16
Roma
 

Thanks, i test it now.

 
Magento Community Magento Community
Magento Community
Magento Community
 
ecommerce-store
Sr. Member
 
Avatar
Total Posts:  181
Joined:  2008-04-16
Roma
 

@
chinesedream

There’s a method for insert an image ? Becouse you tell me how can i insert a div background .

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Sorry, that is my code smile I have ID instead of class

This is what magento has:
<ul class="breadcrumbs">

just add these two lines and change the image name to yours.
.breadcrumbs li a {padding:0 4px;background: url(../images/divider.gif) no-repeat right center}
.breadcrumbs li.last a { background: none;}

don’t worry about the ‘last’ class. This ‘ <?php if(!$_crumbInfo['last']): ?> ‘ will add it to the last crumb.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

Sorry, that is my code smile I have ID instead of class

This is what magento has:
<ul class="breadcrumbs">

just add these two lines and change the image name to yours.
.breadcrumbs li a {padding:0 4px;background: url(../images/divider.gif) no-repeat right center}
.breadcrumbs li.last a { background: none;}

don’t worry about the ‘last’ class. This ‘ <?php if(!$_crumbInfo['last']): ?> ‘ will add it to the last crumb.

For image that serves only presentational purpose, it’s best to place it as a background.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 
chinesedream - 02 August 2008 02:32 AM

.breadcrumbs li.last a { background: none;}

don’t worry about the ‘last’ class. This ‘ <?php if(!$_crumbInfo['last']): ?> ‘ will add it to the last crumb.

For image that serves only presentational purpose, it’s best to place it as a background.

I’d just remember if your last crumb isn’t anchord, you can omit this because the background image is declared in the ‘a’
.breadcrumbs li.last a { background: none;}

 
Magento Community Magento Community
Magento Community
Magento Community
 
Black Cat
Mentor
 
Avatar
Total Posts:  3481
Joined:  2008-02-14
Assemini / Cagliari (Italy)
 

i want the <img> because it is a png and it is positioned in a div with background in png.. so.. con ie6 don’t work, (there is also a bugfix for png.. but don’t work

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 
Black Cat - 02 August 2008 03:49 PM

i want the <img> because it is a png and it is positioned in a div with background in png.. so.. con ie6 don’t work, (there is also a bugfix for png.. but don’t work

well, as long as it’s not with background repeat it will work for IE6. You can also achieve transparent with gif for a small image like this.
It’s really a ill-practise to use img attribute for this kind of purpose.

 
Magento Community Magento Community
Magento Community
Magento Community
 
chaproo
Member
 
Total Posts:  48
Joined:  2009-02-13
 

Please forgive for bringing up an old thread.
I have been searching for days for the above information , my only problem is my css skills are not to great.

Can anyone explain if anything needs to be changed in the /var/www/vhosts/electros.co.uk/httpdocs/app/design/frontend/default/mytheme/template/page or do i just need to put the above into the css ?

Once again my apologies for bringing an old thread up.

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
chaproo
Member
 
Total Posts:  48
Joined:  2009-02-13
 

Please someone have mercy on me i still cant fathom it out , please im really desparate , just some small pointers will do and ill try work out the rest red face

 
Magento Community Magento Community
Magento Community
Magento Community
 
magikthemes
Sr. Member
 
Avatar
Total Posts:  82
Joined:  2011-06-21
 
chaproo - 11 July 2011 11:29 AM

Please forgive for bringing up an old thread.
I have been searching for days for the above information , my only problem is my css skills are not to great.

Can anyone explain if anything needs to be changed in the /var/www/vhosts/electros.co.uk/httpdocs/app/design/frontend/default/mytheme/template/page or do i just need to put the above into the css ?


Once again my apologies for bringing an old thread up.



Thanks

Hi,

You just need to edit the styles.css file “skin/frontend/default/Your_Theme/skin/css/styles.css “
Just find this class

breadcrumbs

and add the image there.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top