CSS3 Breadcrumbs with 4 Variations

[picaflor-azul]

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

[lat9]

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

[picaflor-azul]

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

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

Thanks,

Anne

[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.

[picaflor-azul]

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

[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!