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

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

More resources from Shelley

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: