• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Breadcrumb Enhancement

Unmaintained Breadcrumb Enhancement v1

No permission to download
breadcrumb-enhancement-preview.png

Summary: This will give your Breadcrumb area a visual which I think looks nice but more importantly deviatesfrom the default look.

Install: Upload the image in the archive to your /gradients folder and then paste the following code in your EXTRA.CSS Template.

Code:
 /*BREADCRUMB ENHANCEMENTS*/

.breadcrumb  {
    background: url("@imagePath/xenforo/gradients/bbsmiley-breadcrumb-gradient.png") repeat-x scroll center top #3f3f3f;
    border: 1px solid #000;
    box-shadow: 0 0 1px #bfbfbf inset;
    color: #747474;
    border-radius: 4px;
}

.breadcrumb .crust a.crumb:after {
    color: #747474;
    content: ">";
    font-size: 12px;
    position: relative;
    right: -10px;
    top: 0px;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #000;
    background-color: none !important;
}

.breadcrumb .crust:last-child a.crumb  {
    font-weight: bold;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #000;
    color: #ababab;
}

.breadcrumb .crust a.crumb {
    background-color: transparent;
    text-shadow: 0 0 0 transparent, 1px 1px 0 #000;
    line-height: 29px !important;
}

.breadcrumb .crust {
    height: 30px;
}

.breadcrumb .crust:hover a.crumb {
    color: #ababab;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    opacity: 0.5;
    background-color: transparent;
    border: none !important;
}

.breadcrumb .crust:hover .arrow span {
    border-width: none;
    background-color: transparent !important;
}

.breadcrumb .crust:first-child a.crumb {
    background-color: transparent;
}

.breadcrumb .crust .arrow span {
    background-color: transparent;
    border-width: 0px 0px 0px 0px;
}

.breadcrumb .crust .arrow {
    border-width: 0px
}

.breadcrumb .crust a.crumb { 
    border-bottom: 0px solid #A5CAE4;
    color: #999999;
    line-height: 30px;
}

.breadcrumb .jumpMenuTrigger:hover {
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    opacity: 0.5;
}

/*BREADCRUMB ENHANCEMENTS*/
Author
Shelley
Downloads
140
First release
Last update
Rating
5.00 star(s) 7 ratings

Latest reviews

A+. Amazing work!
Wonderful tweak to the breadcrumb! And it matches my forum ;)
Love it :D
Nice! Thanks for sharing.
Awesome stuff Shelley! Been learning a lot from your template mods!
you are doing really great mods. I checked this one and the previous one, design and colour harmony is good. You should make themes and sell ;).
Loving your work, looks fantastic.
Shelley
Shelley
Thanks for the comments Chris. :) And appreciate you taking the time to review and rate the resource. :bigthumbsup: