Styling ControlsFX Breadcrumb - css

Question

I am using BreadcrumbBar from ControlsFX which works fine. The only problem i have is styling it to look like the image below. When using scenic view i saw that this component only has three classes .bread-crumb-bar, .button, .first. I tried adding border image like so, but did not appear.
/*
* ControlFX bread crumb
*
*/
.bread-crumb-bar {
}
.bread-crumb-bar .button {
-fx-padding: 0 3 0 3;
-fx-border-color: null;
-fx-border-insets: 0;
-fx-border-image-source: url("../images/icon/crumb-focused.png");
-fx-border-image-slice: 1 10 1 10 fill;
-fx-border-image-width: 1 10 1 10;
-fx-border-image-repeat: stretch;
}
.bread-crumb-bar .button.first {
}
How can i style controlsfx breadcrumb to look like breadcrumb in the image

Answer 1

That's how i have solved it very similar. For the slash you need the image.
You need to fiddle around with padding and set your font-family appropriately. Didnt find a selector for the last/selected crumb.
bread-crumb-bar {
-fx-background-color: transparent;
}
.bread-crumb-bar .button {
-fx-padding: 8 12 8 20;
-fx-border-color: null;
-fx-border-insets: 0;
-fx-content-display: left;
-fx-background-position: left center;
-fx-background-repeat: no-repeat;
-fx-background-image: url("../img/slash.png");
-fx-background-color: transparent;
-fx-border-color: transparent;
-fx-shape: null;
}
.bread-crumb-bar .first {
-fx-background-color: transparent ;
-fx-border-color: transparent;
-fx-font-size: 1.11em;
-fx-text-fill: #000;
-fx-background-image: null;
-fx-shape: null;
-fx-padding: 8 12 8 0;
}
.crumb {
-fx-text-fill: #000;
}
.crumb:hover,
.crumb:selected,
.crumb:focused
{
-fx-background-color: rgba(0,0,0,0.1);
-fx-border-color: null;
-fx-font-size: 1.11em;
-fx-text-fill: rgba(0,0,0,0.5);
}