XF 1.2 Styling Breadcrumbs in 1.2

[Rob]

Ok, this is really frying my brain now. I have the breadcrumbs all set up lovely and they look fine, except there is no breadcrumb arrow because its the same color as the other stuff.

I want a breadcrumb arrow.... i've tried changing stuff on the outer and inner (left borders) and also on the breadcrumb content background. It seems everything i do results in solid triangles or straight edge borders at the limits of the arrow.

I really wish there was a tutorial to style the breadcrumbs. I'm sure it would be real easy for me to hack the css but I really hoped style properties would do this.

 

[Shelley]

Here's a couple of styled bradcrumb designs you could possibly look at for reference so you familiarise yourself with the various elements. I don't think anything much as changed in 1.2 regarding the breadcrumbs.

http://xenforo.com/community/resources/breadcrumb-enhancement.932/
http://xenforo.com/community/resources/breadcrumb-ribbon-enhancement.868/

 

[Paul B]

I did something a bit different as I'm not a fan of the big triangular ended blocks.



I tried vertical lines but that just looked wrong.

 

[Shelley]

I did something a bit different as I'm not a fan of the big triangular ended blocks.

View attachment 53004

I tried vertical lines but that just looked wrong.

Same here. I have never been a fan of the xenforo breadcrumb design.

edit: yeah vertical lines do look odd (tried that also)

 

[Rob]

I did something a bit different as I'm not a fan of the big triangular ended blocks.

View attachment 53004

I tried vertical lines but that just looked wrong.

I love it... How?

 

[Paul B]

Lots of changes to the SPs and then this added to EXTRA.css:

/* Breadcrumb */
.breadcrumb .crust a.crumb:after {
content: "›";
font-weight: bold;
position: absolute;
top: -1px;
right: -2px;
}

 

[Rob]

Heh... I'm fine with CSS. Its the SP's that shake my brain lol