CSS3 Breadcrumbs with 4 Variations

Hello ;-)

Spruce up your zen cart breadcrumbs navigation with this easy to use module that uses CSS3 functionality.

Features include:

• Choose from 4 styles
• Neutral styles included
• Easily customizable
• No images, easy to update/maintain
• Scalable em based
• Fallbacks for older browsers
• W3C Valid XHTML and CSS3
• Cross Browser Compatible with any modern browser
• No changes to core files
• asy Installation
• Detailed HTML readme file with written instructions and screenshots, and links to videos for the installation and customization steps.
• Fully compatible with versions 1.3.8x, 1.3.9x, 1.5x. Would probably work with lower versions although it has not been tested.

See a live demo here:

CSS3 Breadcrumbs with 4 Variations LiveDemo

Click through to categories--dresses--intimiates--subsub1--subsub2

Please post any bugs or questions here.

Thanks,

Anne

Wow! This looks great ... when did you submit it?

lat9:

Wow! This looks great ... when did you submit it?

Thank you ;-) I just submitted it the other day.

Thanks,

Anne

Anne,
This is a great little mod, and I thank you for your work in it's development. I got it up and running with absolutely no issues whatsoever... couldn't ask for an easier install.

I do have a question, though. In trying (miserably) to change the colors, I find that I'm totally confused. Your instruction says to change the hex colors as needed, but that's it. I've two problems: I can't figure out which code is associated with which element, and I thought hex was six characters, but you've got a mix of what looks like half a hex code, and some RGB.

Can I ask for a cheat sheet? My site is located at: survivit dot net
I'd like to set up to have the buttons normally colored 85C285, hover colored 3B783B, normal text FFFFFF, hover text E20000

ul#breadcrumbs-two{margin: 0;padding: 0;list-style: none;}
#breadcrumbs-two{overflow: hidden;width: 100%;}
#breadcrumbs-two li{float: left;margin: 0 .5em 0 1em;margin-left:20px;margin-top:5px;font-weight:bold;}
#breadcrumbs-two li a{margin-left:-10px;margin-top:-5px;font-weight:normal;}
#breadcrumbs-two a{background: #ddd;padding: .7em 1em;float: left;text-decoration: none;color: #444;text-shadow: 0 1px 0 rgba(255,255,255,.5);-moz-text-shadow: 0 1px 0 rgba(255,255,255,.5);-webkit-text-shadow: 0 1px 0 rgba(255,255,255,.5);position: relative;}
#breadcrumbs-two a:hover{background: #444;color:#fff;}
#breadcrumbs-two a::before{content: "";position: absolute;top: 50%;margin-top: -1.5em;border-width: 1.5em 0 1.5em 1em;border-style: solid;border-color: #ddd #ddd #ddd transparent;left: -1em;}
#breadcrumbs-two a:hover::before{border-color: #444 #444 #444 transparent;}
#breadcrumbs-two a::after{content: "";position: absolute;top: 50%;margin-top: -1.5em;border-top: 1.5em solid transparent;border-bottom: 1.5em solid transparent;border-left: 1em solid #ddd;right: -1em;}
#breadcrumbs-two a:hover::after{border-left-color: #444;}

Thank you again for such a wonderful mod.

Czar:

Anne,
This is a great little mod, and I thank you for your work in it's development. I got it up and running with absolutely no issues whatsoever... couldn't ask for an easier install.

I do have a question, though. In trying (miserably) to change the colors, I find that I'm totally confused. Your instruction says to change the hex colors as needed, but that's it. I've two problems: I can't figure out which code is associated with which element, and I thought hex was six characters, but you've got a mix of what looks like half a hex code, and some RGB.

Can I ask for a cheat sheet? My site is located at: survivit dot net
I'd like to set up to have the buttons normally colored 85C285, hover colored 3B783B, normal text FFFFFF, hover text E20000

ul#breadcrumbs-two{margin: 0;padding: 0;list-style: none;}
#breadcrumbs-two{overflow: hidden;width: 100%;}
#breadcrumbs-two li{float: left;margin: 0 .5em 0 1em;margin-left:20px;margin-top:5px;font-weight:bold;}
#breadcrumbs-two li a{margin-left:-10px;margin-top:-5px;font-weight:normal;}
#breadcrumbs-two a{background: #ddd;padding: .7em 1em;float: left;text-decoration: none;color: #444;text-shadow: 0 1px 0 rgba(255,255,255,.5);-moz-text-shadow: 0 1px 0 rgba(255,255,255,.5);-webkit-text-shadow: 0 1px 0 rgba(255,255,255,.5);position: relative;}
#breadcrumbs-two a:hover{background: #444;color:#fff;}
#breadcrumbs-two a::before{content: "";position: absolute;top: 50%;margin-top: -1.5em;border-width: 1.5em 0 1.5em 1em;border-style: solid;border-color: #ddd #ddd #ddd transparent;left: -1em;}
#breadcrumbs-two a:hover::before{border-color: #444 #444 #444 transparent;}
#breadcrumbs-two a::after{content: "";position: absolute;top: 50%;margin-top: -1.5em;border-top: 1.5em solid transparent;border-bottom: 1.5em solid transparent;border-left: 1em solid #ddd;right: -1em;}
#breadcrumbs-two a:hover::after{border-left-color: #444;}

Thank you again for such a wonderful mod.

Currently the breadcrumbs are set to show in #ddd and hover in #444. Just replace these two colors with your two colors in each instance they are shown in the stylesheet.

Thanks,

Anne

Success! I didn't know about shorthand color codes... I"m certainly learning something new every day with this site.

Again, a million thanks!

Here's a Bug Report update: for some odd reason the modified colors don't seem to work on EZ Pages...

I've got two EZ Pages, an About Us, and a Manufacturer's page. Both of them are showing the default colors, which seems to be pretty odd as the original color combination is no longer on the server?

Czar:

Success! I didn't know about shorthand color codes... I"m certainly learning something new every day with this site.

Again, a million thanks!

I am happy that you figured it out ;-)

Thanks,

Anne

Czar:

Here's a Bug Report update: for some odd reason the modified colors don't seem to work on EZ Pages...

I've got two EZ Pages, an About Us, and a Manufacturer's page. Both of them are showing the default colors, which seems to be pretty odd as the original color combination is no longer on the server?

What is the link to your site? Have you reloaded the page in the browser?

Thanks,

Anne

Thank you so much for this awesome Mod. I am having issue with it rendering correctly. Please take a look at this link: http://www.clevershoppers.com/index.php?main_page=index&cPath=5_334_2536 you will notice the white line that's part of the arrow. It looks to me like something is off but not sure how to fix it. Interesting enough, the whole browser that shows this correctly is IE (which usually is the one that doesn't work) :D Thanks!

BlessIsaacola:

Thank you so much for this awesome Mod. I am having issue with it rendering correctly. Please take a look at this link: http://www.clevershoppers.com/index.php?main_page=index&cPath=5_334_2536 you will notice the white line that's part of the arrow. It looks to me like something is off but not sure how to fix it. Interesting enough, the whole browser that shows this correctly is IE (which usually is the one that doesn't work) :D Thanks!

I would recommend restoring the original stylesheet and then making your changes again, one at a time, checking in between each change.

Thanks,

Anne

picaflor-azul:

I would recommend restoring the original stylesheet and then making your changes again, one at a time, checking in between each change.

Thanks,

Anne

Thanks for your response. I think for now, I will disable the mod and then when I have time I will do as you suggest. It's not that simple to simply replace our stylesheet.css with the default. That will make things much worse. I am currently testing another template and perhaps when that's rolled out I will incorporate. It strange that it behaves differently in different browsers.

BlessIsaacola:

Thanks for your response. I think for now, I will disable the mod and then when I have time I will do as you suggest. It's not that simple to simply replace our stylesheet.css with the default. That will make things much worse. I am currently testing another template and perhaps when that's rolled out I will incorporate. It strange that it behaves differently in different browsers.

No, I meant you should replace the stylesheet from the module with the default from the module stylesheet_css3_breadcrumbs_2.css

Thanks,

Anne