Breadcrumb Ribbon Enhancement

Unmaintained Breadcrumb Ribbon Enhancement v1

No permission to download
WSUcs.png

screenshot-bc-ribbon.webp


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.
Author
Shelley
Downloads
46
Views
847
First release
Last update

Ratings

5.00 star(s) 1 ratings

Latest reviews

Loving it, it looks very good!
If you want to see another thing you can do with it, check http://www.hlxbans.net/forum/
Top Bottom