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:
Code:
.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:
Code:
<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>></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 |
More Information