• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Breadcrumb Ribbon Enhancement

Breadcrumb Ribbon Enhancement v1

No permission to download
Breadcrumb Ribbon Enhancement

Shelley

Well-known member
#1
Shelley submitted a new resource:

Breadcrumb Ribbon Enhancement (version v1) - Breadcrumb Ribbon Enhancement


View attachment 31563

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...
Read more about this resource...
 

Shelley

Well-known member
#4
I love it, but 1 minor thing:
View attachment 31568

The "Post new Thread" button should also be lowered when using this resource :)

Oh, and is it possible to add some little white arrows?
You could try adding the following in extra.css for arrows.

Code:
.breadcrumb .crust a.crumb:after {
content: ">";
padding-left: 5px;
}
With regards to the button. Yeah, the default button will need lowering which will be easy for users to do.
 

Vincent

Well-known member
#5
The "Post new Thread" issue got solved by changing (in xenforo.css)
Code:
.topCtrl
{
    float: right;
}
to

Code:
.topCtrl
{
    float: right;
    margin-top: 10px;
}
 

Vincent

Well-known member
#6
You could try adding the following in extra.css for arrows.

Code:
.breadcrumb .crust a.crumb:after {
content: ">";
padding-left: 5px;
}
With regards to the button. Yeah, the default button will need lowering which will be easy for users to do.
Thanks, now both my problems are solved :)
 

Shelley

Well-known member
#8
Thanks, now both my problems are solved :)
Just a side note about the placement of the post new button and it'll save you a template edit rather than alter xenforo.css you can/could add the following in EXTRA.css adjusting the margin-top size to your preference.

Code:
.breadBoxTop .topCtrl {
    margin-top: 10px;
}
 

Vincent

Well-known member
#9
Just a side note about the placement of the post new button and it'll save you a template edit rather than alter xenforo.css you can/could add the following in EXTRA.css

Code:
.breadBoxTop .topCtrl {
    margin-top: 10px;
}
Thanks! It doesn't matter though, I use TMS :)
 

Shelley

Well-known member
#15
Thanks!
Just on a side note, I want a professional opinion :D
http://www.hlxbans.net/forum/
Does that look good or not?
I've noticed your not using the two fixed right and left ribbons. I'm assuming that is intentional? If so and your going for a straight bar you can most probably remove the breadcrumb template edit <div class="breadcrumbright"> & <div class="breadcrumbleft"> from the TMS and the associated css and simply just use the repeating breadcrumb-center image. Looks good.
 

Vincent

Well-known member
#16
I've noticed your not using the two fixed right and left ribbons. I'm assuming that is intentional? If so and your going for a straight bar you can most probably remove the breadcrumb template edit <div class="breadcrumbright"> & <div class="breadcrumbleft"> from the TMS and the associated css and simply just use the repeating breadcrumb-center image. Looks good.
Yep, it's intentional. And I had thought of that, but I was lazy :p
It doesn't really matter, does it?
 

Shelley

Well-known member
#17
Yep, it's intentional. And I had thought of that, but I was lazy :p
It doesn't really matter, does it?
It does in a way because your links are shifted to the right when they don't need to be. I would personally remove them if it were me. I'd seriosly remove the other div classes takes a second lazy bones :D
 

Shelley

Well-known member
#18
Yep, it's intentional. And I had thought of that, but I was lazy :p
It doesn't really matter, does it?
Here's what it will look like without the extra two divs and with a css adjustment (below) and adding the 1px right and left 1px border to .breadcrumb.

Code:
.breadcrumb .crust a.crumb {
    padding: 0 10px !important;
}
breadcrumb-fix.png
 

Shelley

Well-known member
#20
Okay, that does indeed look better :)
I'll apply it right away :D
Thanks once again Shelley!
Great stuff. That would have been annoying me had you left it as it was. Would it help if I re-coloured the image closer to the xenforo dark blue for your site? that colour blue variation doesn't quite suit imo but the blue xenforo uses i feel would be better suited. Let us know if you want me to make that colour change.