1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Breadcrumb Enhancement v1

This will visually alter your breadcrumb area

  1. Shelley
    [​IMG]
    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*/
     
    
    Warning, iBreaZz-, ubocash and 6 others like this.

Recent Reviews

  1. BioRage
    BioRage
    5/5,
    Version: v1
    A+. Amazing work!
  2. Robyn Unc Privette
    Robyn Unc Privette
    5/5,
    Version: v1
    Wonderful tweak to the breadcrumb! And it matches my forum ;)
  3. MichaelDance
    MichaelDance
    5/5,
    Version: v1
    Love it :D
  4. FredC
    FredC
    5/5,
    Version: v1
    Nice! Thanks for sharing.
  5. gldtn
    gldtn
    5/5,
    Version: v1
    Awesome stuff Shelley! Been learning a lot from your template mods!
  6. StRonK
    StRonK
    5/5,
    Version: v1
    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 ;).
  7. Chris D
    Chris D
    5/5,
    Version: v1
    Loving your work, looks fantastic.
    1. Shelley
      Author's Response
      Thanks for the comments Chris. :) And appreciate you taking the time to review and rate the resource. :bigthumbsup: