Welcome to Our Community

Registration on our forums are now open for some days! Feel free to sign up today.

Breadcrumb Ribbon Enhancement v1

Breadcrumb Ribbon Enhancement

  1. XenForo Rocks
    [​IMG]
    [​IMG]

    Summary: This enhance will transform your breadcrumbs into a Ribbon type visual. I've tested this on a default style and applied it to one other custom style and it appears to display correctly.

    Install: Firstly, upload the images via FTP in the archive to your /gradients folder and then log into your AdminCP >> Appearance >>Templates >> and in the breadcrumbs template

    Add:

    Code:
    <div class="breadcrumbleft"></div><div class="breadcrumbright"></div>
    
    
    
    Above:

    Code:
    <fieldset class="breadcrumb">
    
    
    Install: Secondly, copy and paste the following into your EXTRA.CSS Template

    Code:
    .breadcrumbleft {
    background: url("@imagePath/xenforo/gradients/breadcrumbleft.png") no-repeat scroll center top transparent !important;
        display: block;
        float: left;
        height: 47px;
        width: 65px;
    }
    .breadcrumbright {
    background: url("@imagePath/xenforo/gradients/breadcrumbright.png") no-repeat scroll left top  transparent !important;
        display: inline-block;
        float: right;
        height: 47px;
        width: 65px;
    }
    .breadcrumb {
        background: url("@imagePath/xenforo/gradients/breadcrumb-center.png") repeat-x scroll center top transparent !important;
        height: 47px;
        border-left: 0 solid blue !important;
        border-right: 0 solid blue !important;
        border-radius: 0!important;
        border-top: 0px solid #5f554a !important;
        border-bottom: 0px solid #5f554a !important;
    }
    .breadcrumb .crust a.crumb {
        background-color: transparent!important;
        border-bottom: 0px solid #A5CAE4 !important;
        line-height: 37px;
        color: #ede3d7;
    }
    .breadcrumb .crust a.crumb:hover {
      color: white !important;
    }
    .breadcrumb .crust .arrow span {
        border-width: 0 !important;
    }
    .breadcrumb .crust .arrow {
        border-style: none!important;
    }
    
    Optional install: Because the default xenforo trigger icon doesn't look quite right on the ribbon design I re-designed the icon and set it at a 50% fill rate so it will appear visually better on the ribbon.

    Upload the trigger.png icon to your /gradients folder Simply add the following to EXTRA.CSS Template.

    Code:
    .breadcrumb .jumpMenuTrigger {
      background: url("@imagePath/xenforo/gradients/trigger.png") no-repeat scroll transparent !important;
      width: 22px !important;
      height: 22px !important;
    }
    
    Additional Notes: At this time the ribbons I designed come in black and red. I may submit other colours as time permits.

    Conditions of use: This pack may be used on forums, websites but cannot be redistributed or repackaged in any way shape or form for any reason without prior consent of the author.