Mod Version: 1.00, by private_ale
vB Version: 4.2.x
PS: на 4.2.x работает без проблем, правда на обычном стиле. Я это к тому, что как то давненько изменения вносил в новый стиль, так там получалось туфтово, может просто стиль не под версию vb был... . Так что, пробуем сами.

Пример:


Открыть шаблон additional.css и добавить в самый низ:
PHP код:
.bread_box {
    
margin0;
    
overflowhidden;
    
clearboth;
}
.
breadcrumb {
    
positionrelative;
    
font11px 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};
    
overflowhidden;
}
.
breadcrumb .crust {
    
displayblock;
    
floatleft;
    
positionrelative;
}
.
breadcrumb .crust:first-child a.crumb {
    
padding-left13px;
    -
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-decorationnone;
    
background-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the background color of the CRUMBS, ie: the links */
    
padding0 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;
    
outline0 none;
    -
moz-outline-style0 none;
    
displayblock;
    
line-height22px;
    
_border-bottomnone;
    
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 {
    
backgroundtransparent none;
    
color: {vb:stylevar footer_time_color}; /* this is the color of the last crumb, ie: the final destination */
    
font-weightbold;
}
.
breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
    
line-height22px;
}
.
breadcrumb .crust .arrow {
    
border12px solid transparent;
    
border-right1px none black;
    
border-left: {vb:stylevar sidebar_border}; /* this is the _background_ color of the "arrow" */
    
border-left-width12px !important;
    
border-left-stylesolid !important;
    
displayblock;
    
positionabsolute;
    
right: -12px;
    
top: -1px;
    
z-index50;
    
width0px;
    
height0px;
}
.
breadcrumb .crust .arrow span {
    
border12px solid transparent;
    
border-right1px none black;
    
border-left-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the border color of the "arrow" */
    
displayblock;
    
positionabsolute;
    
left: -13px;
    
top: -12px;
    
z-index51;
    
white-spacenowrap;
    
overflowhidden;
    
text-indent9999px;
    
width0px;
    
height0px;
}
.
breadcrumb .refresh:hover background-position0px -16px; }
.
breadcrumb .crust:last-child a.crumb font-weightbold; }
.
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 */

Открыть шаблон navbar и найти:
PHP код:
<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
И заменяем этим:
PHP код:
<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}
            </
span>
        </
fieldset>
    </
nav>
</
div
Открыть шаблон navbar_link и заменяем в нём всё этим:
PHP код:
<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>></span>
        </
span>
    </
span>
<
vb:else />
    <
span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
        <
class="lastcrumb">
            <
span itemprop="title">{vb:raw nav_title}</span>
        </
b>
    </
span>
</
vb:if>