Breadcrumb Ribbon Enhancement

Breadcrumb Ribbon Enhancement v1

No permission to download
  • Author XenForo Rocks
  • Creation date
    • You can download only 0 resources in 24 hours
    • You need more than 0 posts to download the resource

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.

XenForo Rocks
First release
Last update
0.00 star(s) 0 ratings

More resources from XenForo Rocks