Miscellaneous Hacks - Alternative Breadcrumbs for your vB4

STOP: Before we go any further, I want to make it clear that you need to have a basic understanding of what you're doing. You need to have a basic understanding of CSS in order to make this perfect. I have tried my best to have this use vBulletin's existing stylevars, but you will most likely need to fine-tune it's cosmetic qualities on your own.

Some people have been asking for better breadcrumbs. A few months ago, I published a barebone template on how to accomplish such a task. Despite my good efforts, some people needed additional help to get it working. To make matters easier, I took time out today to make the breadcrumbs work with a vBulletin 4 system. It includes basic Microdata.

As previously mentioned above, these will need some CSS work on a non-default style. When these were originally built, it was for my website, not for mass distribution. I have given my best efforts to port it to using vBulletin's stylevars, but it's very, very crude. I have taken some time to add comments to the CSS so you can easily change the values if they don't work right.

If you want to see a live demo, you may visit my site:

https://www.beercandle.com/forum.php

Please note my site is using the original revision. This here is the adapted.

Prerequisite to setting this up: This has only been tested on vBulletin 4.1.11; Create a copy of the Style you want to apply this to. Test it first. Make sure it looks good.

> Open Template Group `CSS Templates`
>> Open Template `additional.css`
### ADD ###

.bread_box {
	margin: 0;
	overflow: hidden;
	clear: both;
}
.breadcrumb {
	position: relative;
	font: 11px Arial,Calibri,Verdana,Geneva,sans-serif;
	background: {vb:stylevar sidebar_background};
	border: {vb:stylevar sidebar_border}; /* this is the border color that's around the whole thing */
	-moz-border-radius:{vb:stylevar border_radius};
	-webkit-border-radius: {vb:stylevar border_radius};
	border-radius: {vb:stylevar border_radius};
	overflow: hidden;
}
.breadcrumb .crust {
	display: block;
	float: left;
	position: relative;
}
.breadcrumb .crust:first-child a.crumb {
	padding-left: 13px;
	-moz-border-radius-topleft:{vb:stylevar border_radius};
	-moz-border-radius-bottomleft:{vb:stylevar border_radius};
	-webkit-border-top-left-radius: {vb:stylevar border_radius};
	-webkit-border-bottom-left-radius: {vb:stylevar border_radius};
	border-top-left-radius: {vb:stylevar border_radius};
	border-bottom-left-radius: {vb:stylevar border_radius};
}
.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
	text-decoration: none;
	background-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the background color of the CRUMBS, ie: the links */
	padding: 0 10px 0 23px;
	border-bottom: {vb:stylevar sidebar_border}; /* this is the same as the border value higher up, this only shows if the last crumb causes it to overflow */
	margin-bottom: -1px;
	outline: 0 none;
	-moz-outline-style: 0 none;
	display: block;
	line-height: 22px;
	_border-bottom: none;
	color:{vb:stylevar link_color}; /* this is the color of the links in the crumbs */
	text-decoration:{vb:stylevar link_textDecoration};
}
.breadcrumb .crust b.lastcrumb {
	background: transparent none;
	color: {vb:stylevar footer_time_color}; /* this is the color of the last crumb, ie: the final destination */
	font-weight: bold;
}
.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
	line-height: 22px;
}
.breadcrumb .crust .arrow {
	border: 12px solid transparent;
	border-right: 1px none black;
	border-left: {vb:stylevar sidebar_border}; /* this is the _background_ color of the "arrow" */
	border-left-width: 12px !important;
	border-left-style: solid !important;
	display: block;
	position: absolute;
	right: -12px;
	top: -1px;
	z-index: 50;
	width: 0px;
	height: 0px;
}
.breadcrumb .crust .arrow span {
	border: 12px solid transparent;
	border-right: 1px none black;
	border-left-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the border color of the "arrow" */
	display: block;
	position: absolute;
	left: -13px;
	top: -12px;
	z-index: 51;
	white-space: nowrap;
	overflow: hidden;
	text-indent: 9999px;
	width: 0px;
	height: 0px;
}
.breadcrumb .refresh:hover { background-position: 0px -16px; }
.breadcrumb .crust:last-child a.crumb { font-weight: bold; }
.breadcrumb .crust:hover a.crumb { 
	background-color:{vb:stylevar blocksubhead_background.backgroundColor}; /* this is the background color of the crumb when it's hovered */
	color:{vb:stylevar linkhover_color}; /* likewise, this is the color of the crumb's link when hovered */
	text-decoration:{vb:stylevar linkhover_textDecoration}; 
}
.breadcrumb .crust:hover .arrow span { 
	border-left-color:{vb:stylevar blocksubhead_background.backgroundColor}; /* this is the color of the "arrow" when hovered. It should be identical to the `.breadcrumb .crust:hover a.crumb` background value */
}

> Open Template Group `Navigation / Breadcrumb Templates`
>> Open Template `navbar`
### FIND ###

<div id="breadcrumb" class="breadcrumb">
	<ul class="floatcontainer">
		<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>
		{vb:raw navbits.breadcrumb}
		{vb:raw navbits.lastelement}
	</ul>
	<hr />
</div>

### REPLACE WITH ###

<div class="bread_box">
	<nav>
		<fieldset class="breadcrumb">
			<span class="crumbs">
				<vb:if condition="$vboptions['hometitle']">
					<span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
						<a href="{vb:raw vboptions.homeurl}" class="crumb" rel="up" itemprop="url" alt="{vb:rawphrase home}">
							<span itemprop="title">{vb:raw vboptions.hometitle}</span>
						</a>
						<span class="arrow">
							<span>&gt;</span>
						</span>
					</span>
				</vb:if>
				{vb:raw navbits.breadcrumb}
				{vb:raw navbits.lastelement}
			</span>
		</fieldset>
	</nav>
</div>

>> Open template `navbar_link`
### REPLACE _EVERYTHING_ WITH ###

<vb:if condition="$show['breadcrumb']">
	<span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="{vb:raw nav_url}" class="crumb" rel="up" itemprop="url">
			<span itemprop="title">{vb:raw nav_title}</span>
		</a>
		<span class="arrow">
			<span>&gt;</span>
		</span>
	</span>
<vb:else />
	<span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<b class="lastcrumb">
			<span itemprop="title">{vb:raw nav_title}</span>
		</b>
	</span>
</vb:if>

[Onkeltyson]

Looks nice ;-) Thanks for that

[tidus78]

Two problems :

1) Layout
2) Home disappears

[MajinOLesedi]

Thank you, good job

[Winter Sonata]

very good job!

[tidus78]

Solved

Something similar for navbar?

[iBaker]

This works ok for 4.2

[GaRanT]

I have default vb4.2.0 template but with customized sidebar.
Could someone help me please with breadcrumb css to make it as default colors of sidebar.

[dwx]

Nice template hack, I really like the look of the Breadcrumbs now!

I was dealing with a lot of confusion about how to change the language on my site, so I made a small modification to add and additional language picking box to the right side of the breadcrumb box. This way it's near the top of the page instead of scrolled off the bottom.

To accommodate the slightly larger drop down box for the language selector, I had to make the bar a few px taller. Below are the code modifications from private_ale's original hack.

Here's the new code for additional.css:

.bread_box {
    margin: 0;
    overflow: hidden;
    clear: both;
}
.breadcrumb {
    position: relative;
    font: 11px Arial,Calibri,Verdana,Geneva,sans-serif;
    background: {vb:stylevar sidebar_background};
    border: {vb:stylevar sidebar_border}; /* this is the border color that's around the whole thing */
    -moz-border-radius:{vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    border-radius: {vb:stylevar border_radius};
    overflow: hidden;
}
.breadcrumb .crust {
    display: block;
    float: left;
    position: relative;
}
.breadcrumb .crust:first-child a.crumb {
    padding-left: 13px;
    -moz-border-radius-topleft:{vb:stylevar border_radius};
    -moz-border-radius-bottomleft:{vb:stylevar border_radius};
    -webkit-border-top-left-radius: {vb:stylevar border_radius};
    -webkit-border-bottom-left-radius: {vb:stylevar border_radius};
    border-top-left-radius: {vb:stylevar border_radius};
    border-bottom-left-radius: {vb:stylevar border_radius};
}
.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
    text-decoration: none;
    background-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the background color of the CRUMBS, ie: the links */
    padding: 0 10px 0 23px;
    border-bottom: {vb:stylevar sidebar_border}; /* this is the same as the border value higher up, this only shows if the last crumb causes it to overflow */
    margin-bottom: -1px;
    outline: 0 none;
    -moz-outline-style: 0 none;
    display: block;
    line-height: 29px;
    _border-bottom: none;
    color:{vb:stylevar link_color}; /* this is the color of the links in the crumbs */
    text-decoration:{vb:stylevar link_textDecoration};
}
.breadcrumb .crust b.lastcrumb {
    background: transparent none;
    color: {vb:stylevar footer_time_color}; /* this is the color of the last crumb, ie: the final destination */
    font-weight: bold;
}
.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
    line-height: 29px;
}
.breadcrumb .crust .arrow {
    border: 15px solid transparent;
    border-right: 1px none black;
    border-left: {vb:stylevar sidebar_border}; /* this is the _background_ color of the "arrow" */
    border-left-width: 15px !important;
    border-left-style: solid !important;
    display: block;
    position: absolute;
    right: -15px;
    top: -1px;
    z-index: 50;
    width: 0px;
    height: 0px;
}
.breadcrumb .crust .arrow span {
    border: 15px solid transparent;
    border-right: 1px none black;
    border-left-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the border color of the "arrow" */
    display: block;
    position: absolute;
    left: -16px;
    top: -15px;
    z-index: 51;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 9999px;
    width: 0px;
    height: 0px;
}
.breadcrumb .refresh:hover { background-position: 0px -16px; }
.breadcrumb .crust:last-child a.crumb { font-weight: bold; }
.breadcrumb .crust:hover a.crumb { 
    background-color:{vb:stylevar blocksubhead_background.backgroundColor}; /* this is the background color of the crumb when it's hovered */
    color:{vb:stylevar linkhover_color}; /* likewise, this is the color of the crumb's link when hovered */
    text-decoration:{vb:stylevar linkhover_textDecoration}; 
}
.breadcrumb .crust:hover .arrow span { 
    border-left-color:{vb:stylevar blocksubhead_background.backgroundColor}; /* this is the color of the "arrow" when hovered. It should be identical to the `.breadcrumb .crust:hover a.crumb` background value */
}

Here's the new code to add for navbar:

<div class="bread_box">
    <nav>
        <fieldset class="breadcrumb">
            <span class="crumbs">
                <vb:if condition="$vboptions['hometitle']">
                    <span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
                        <a href="{vb:raw vboptions.homeurl}" class="crumb" rel="up" itemprop="url" alt="{vb:rawphrase home}">
                            <span itemprop="title">{vb:raw vboptions.hometitle}</span>
                        </a>
                        <span class="arrow">
                            <span>&gt;</span>
                        </span>
                    </span>
                </vb:if>
                {vb:raw navbits.breadcrumb}
                {vb:raw navbits.lastelement}
<!-- Language Selector -->
<li style="float: right;">
<form action="{vb:raw vboptions.forumhome}.php" method="get" id="footer_select">
<vb:if condition="$show['languagechooser']">
<select name="langid" onchange="switch_id(this, 'lang')">
<optgroup label="{vb:rawphrase quick_language_chooser}">
{vb:raw languagechooserbits}
</optgroup>
</select>
</vb:if>
</form>     </li>
<!-- Language Selector Ends -->
            </span>
        </fieldset>
    </nav>
</div>

navbar_link remains the same.

I hope you find this hack-on-hack useful!

-dwx

[GameOverViper]

I'm having an issue with it after installing. It shows two lines on the bottom, which doesn't look like the examples I've seen here. I'm using the latest version of vbulletin, 4.2.0.

[dwx]

Originally Posted by Americanbang

I'm having an issue with it after installing. It shows two lines on the bottom, which doesn't look like the examples I've seen here. I'm using the latest version of vbulletin, 4.2.0.

I had the same issue, it was because there's an underline that's NOT overwritten by the bounding box. It's theme specific, and has nothing to do with 4.2. You tweak the CSS and make the regions larger so it fills up your space.

Take a look at the modification's I posted above, I increased the height of the bar by 6 or 7px to accommodate the language picker, and had to adjust the arrows to fit as well.

dwx