Breadcrumb Ribbon Enhancement v1

Compatible XF Versions: 1.x

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.

Reactions: Meyc and winjoke

Search

Breadcrumb Ribbon Enhancement v1

More resources from ENXF NET