26.04.2014, 20:11
Вверх
|
#1
|
Грамотный форумчанин
Доп. информация
|
Регистрация: 09.06.2013
Сообщений: 242
Поблагодарил(а): 40
Поблагодарили: 150 / 82
|
|
Хлебные крошки как на XenForo
Mod Version: 1.00, by private_ale
vB Version: 4.2.x
PS: на 4.2.x работает без проблем, правда на обычном стиле. Я это к тому, что как то давненько изменения вносил в новый стиль, так там получалось туфтово, может просто стиль не под версию vb был... . Так что, пробуем сами.
Пример:
Открыть шаблон additional.css и добавить в самый низ:
PHP код:
.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 */ }
Открыть шаблон 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"> <b class="lastcrumb"> <span itemprop="title">{vb:raw nav_title}</span> </b> </span> </vb:if>
|
Последний раз редактировалось Serberg; 26.04.2014 в 20:46..
|
|
|