Summary: This will give your Breadcrumb area a visual which I think looks nice but more importantly deviatesfrom the default look.
Install: Upload the image in the archive to your /gradients folder and then paste the following code in your EXTRA.CSS Template.
Code:
/*BREADCRUMB ENHANCEMENTS*/
.breadcrumb {
background: url("@imagePath/xenforo/gradients/bbsmiley-breadcrumb-gradient.png") repeat-x scroll center top #3f3f3f;
border: 1px solid #000;
box-shadow: 0 0 1px #bfbfbf inset;
color: #747474;
border-radius: 4px;
}
.breadcrumb .crust a.crumb:after {
color: #747474;
content: ">";
font-size: 12px;
position: relative;
right: -10px;
top: 0px;
text-shadow: 0 0 0 transparent, 1px 1px 0 #000;
background-color: none !important;
}
.breadcrumb .crust:last-child a.crumb {
font-weight: bold;
text-shadow: 0 0 0 transparent, 1px 1px 0 #000;
color: #ababab;
}
.breadcrumb .crust a.crumb {
background-color: transparent;
text-shadow: 0 0 0 transparent, 1px 1px 0 #000;
line-height: 29px !important;
}
.breadcrumb .crust {
height: 30px;
}
.breadcrumb .crust:hover a.crumb {
color: #ababab;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
opacity: 0.5;
background-color: transparent;
border: none !important;
}
.breadcrumb .crust:hover .arrow span {
border-width: none;
background-color: transparent !important;
}
.breadcrumb .crust:first-child a.crumb {
background-color: transparent;
}
.breadcrumb .crust .arrow span {
background-color: transparent;
border-width: 0px 0px 0px 0px;
}
.breadcrumb .crust .arrow {
border-width: 0px
}
.breadcrumb .crust a.crumb {
border-bottom: 0px solid #A5CAE4;
color: #999999;
line-height: 30px;
}
.breadcrumb .jumpMenuTrigger:hover {
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
opacity: 0.5;
}
/*BREADCRUMB ENHANCEMENTS*/
