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

Breadcrumb Ribbon Enhancement v1

Breadcrumb Ribbon Enhancement

  1. Shelley

    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

    <div class="breadcrumbleft"></div><div class="breadcrumbright"></div>
    <fieldset class="breadcrumb">
    Install: Secondly, copy and paste the following into your EXTRA.CSS Template
    .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.

    .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.
    JVCode, Brandon Sheley, Alien and 3 others like this.

Recent Reviews

  1. Vincent
    Version: v1