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.



  • About Us

    Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.
  • Like us on Facebook

  • Buy us a beer!

    The management works very hard to make sure the community is running the best software, best designs, and all the other bells and whistles. Care to buy us a beer? We'd really appreciate it!

    Donate to us!