Free Mod How to add borders to the breadcrumbs

[glennrocksvb]

To achieve this style for the breadcrumb:



add this custom css in css_additional template in AdminCP or in CSS Editor in Sitebuilder.

#breadcrumbs .ellipsis {
    line-height: 25px !important;
}

#breadcrumbs .crumb-link:hover {
    color: #019DCE;
}

#breadcrumbs .crumb-link {
    border: 1px solid #ccc;
    padding: 4px 6px;
    border-radius: 3PX;
    margin: 2px 0;
    display: inline-block;
    line-height: 1em;
    white-space: nowrap
}

#breadcrumbs .separator {
    margin-top: 9px;
}

[Fleet]

Mine seems to be cut off. This is cool though. Im assuming its because of the width of my forum.

[Fleet]

Fixed it. Thanks. This is cool Glenn.

[bluebarracudas]

Hi Glenn. Was applying this nice mod and seem to be cutting off my home button


Could you point me in the direction of fixing this? Thanks

[glennrocksvb]

bluebarracudas, the height in this CSS is the culprit.

#breadcrumbs .crumb:first-child {
    position: relative;
    text-indent: 0!important;
    background: transparent none;
    background-position: 0 0;
    width: auto!important;
[COLOR=#FF0000]height: 15px!important;[/COLOR]
    margin-top: 0px!important;
    padding-left: 20px;
}

The above code is in your css_additional template. If you remove the height, the issue will go away.

[bluebarracudas]

Worked like a charm. Enjoy the late night snack on me!

[WatchSteve]

Really like this addition! Thanks

[nijohn]

Thank you so much. It took less than 20 seconds to make it work. Looks nice

[panzerscope]

Awesome, quick question. After adding this, the little arrows between the bordered breadcrumbs are no longer centered. What would I need to change to re-center them, see my attachment for example of the issue.

[glennrocksvb]

Quick answer:
- go to AdminCP > Style > CSS Editor
- scroll down the bottom and add lines:

/* vertically center arrow icons in the breadcrumb */
li.vb-icon { height: 17px !important; }

--Stimpy

The CSS selector in the above suggested code is too generic that it might also apply to other non-breadcrumb sections. The safer solution and better is to simply adjust the value of top margin in the last block of code in the original code in post #1 below:

#breadcrumbs .separator {
    margin-top: 9px; [COLOR=#FF0000]/* adjust value as needed */[/COLOR]
}

[Damas]

Thank you,

installed but have problem when the forum name too long in google chrome only

[glennrocksvb]

That's an issue introduced in one of the recent releases. It added a max-width of 300px for each breadrumb link. vB said they are fixing it in 5.5.3.

In the meantime, try adding this custom CSS to remove the max-width restriction: (Untested)

#breadcrumbs .crumb.ellipsis {
    max-width: none;
}

[Damas]

( Edited )

Its working great

Thank you so much for help

[glennrocksvb]

Glad to help Damas

[Damas]

New way, Can we convert this css code to use it in vb 5 ?

I use it on my old vb3.

It will look like this




The original on vb3

/*NavBar*/
.SHA-Navbar, .Nav-Link{background:#FFFFFF;border:1px solid #D7D7D7;margin:5px 0;color:#646C74;text-shadow:1px 1px 1px #FFFFFF;clear:both;overflow:hidden;margin:0 0 50px 0;}
.SHA-Navbar{padding:5px;font-size:13px;font-weight:700;}.Nav-Link{width:100%;}
.Nav-Link{padding:0;list-style:none;}
.Nav-Link a{padding:.5em 1.9em .5em .8em;float:right;text-decoration:none;color:#646C74;position:relative;background-image:linear-gradient(to left, #FFFFFF, #F2F2F2);}
.Nav-Link li:first-child a{padding-right:5px;}
.Nav-Link a:after, .Nav-Link a:before{content:"";position:absolute;top:50%;margin-top:-1.5em;border-top:1.5em solid transparent;border-bottom:1.5em solid transparent;border-right:1em solid;left:-0.9em;}
.Nav-Link a:after{border-right-color:#F2F2F2;z-index:2;}
.Nav-Link a:before{border-right-color:#FFFFFF;left:-13px;z-index:1;}
.Nav-Link .current, .Nav-Link .current:hover{background:none;vertical-align:-7px;margin:0 25px 0 0;}
.Nav-Link .current:after, .Nav-Link .current:before{content:normal;}