FAQ Хлебные крошки для XenForo

Администратор · Регистрация: 27.02.2009

В шаблон PAGE_CONTAINER -> page_container_js_head добавляем строчки подключения скриптов:

PHP код:



    <link rel="stylesheet" href="js/jquery/BreadCrumb.css" type="text/css">
    <script src="js/jquery/jquery.easing.1.3.js" type="text/javascript" language="JavaScript">
    </script>
    <script src="js/jquery/jquery.jBreadCrumb.1.1.js" type="text/javascript" language="JavaScript">
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function()
        {
            jQuery("#breadCrumb").jBreadCrumb();
        })
    </script>

Соответственно данные файлы BreadCrumb.css, jquery.easing.1.3.js, jquery.jBreadCrumb.1.1.js заливаем в папку js/jquery/ в корне вашего форума.

Файлы изображений IconHome.gif, ChevronOverlay.png, Chevron.gif также заливаем в ту папку js/jquery/ (возможно вам нужно будет поправить эти картинки в фотошопе, чтобы они соответствовали оформлению вашего форума)

Далее находим шаблон breadcrumb и заменяем его содержимое на этот код:

PHP код:



<xen:edithint template="breadcrumb.css" />
    
<nav>
    <xen:if is="!{$quickNavSelected} AND {$navigation}">
        <xen:foreach loop="$navigation" value="$breadcrumb">
            <xen:if is="{$breadcrumb.node_id}">
                <xen:set var="$quickNavSelected">node-{$breadcrumb.node_id}</xen:set>
            </xen:if>
        </xen:foreach>
    </xen:if>

    <fieldset class="breadcrumb">
        <a href="{xen:link misc/quick-navigation-menu, '', 'selected={$quickNavSelected}'}" class="OverlayTrigger jumpMenuTrigger" data-cacheOverlay="true" title="{xen:phrase open_quick_navigation}"><!--{xen:phrase jump_to}...--></a>
            
        <div class="boardTitle"><strong>{$xenOptions.boardTitle}</strong></div>
        
<div class="breadCrumbHolder module">
    <div id="breadCrumb" class="breadCrumb module">
        <ul>
            <xen:if is="{$showHomeLink}">
                <li{xen:if $microdata, ' itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"'}>
                    <a href="{$homeLink}" {xen:if $microdata, ' rel="up" itemprop="url"'}><span{xen:if $microdata, ' itemprop="title"'}>{xen:phrase home}</span></a>
                </li>
            <xen:elseif is="{$selectedTabId} != {$homeTabId}" />
                <li{xen:if $microdata, ' itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"'}>
                    <a href="{$homeTab.href}"{xen:if $microdata, ' rel="up" itemprop="url"'}><span{xen:if $microdata, ' itemprop="title"'}>{$homeTab.title}</span></a>
                </li>
            </xen:if>
            
            <xen:if is="{$selectedTab}">
                <li{xen:if $microdata, ' itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"'}>
                    <a href="{$selectedTab.href}" {xen:if $microdata, ' rel="up" itemprop="url"'}><span{xen:if $microdata, ' itemprop="title"'}>{$selectedTab.title}</span></a>
                </li>
            </xen:if>
            
            <xen:if is="{$navigation}">
                <xen:foreach loop="$navigation" value="$breadcrumb" i="$i" count="$count">
                    <li class="crust"{xen:if $microdata, ' itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"'}>
                        <a href="{xen:raw $breadcrumb.href}" {xen:if $microdata, ' rel="up" itemprop="url"'}><span{xen:if $microdata, ' itemprop="title"'}>{xen:raw $breadcrumb.value}</span></a>
                    </li>
                </xen:foreach>
            </xen:if>
        </ul>
    </div>
</div>
        <div class="chevronOverlay main"></div>
    </fieldset>
</nav>

Скрипт берем тут - CompareNetworks jQuery'd Bread Crumb - jBreadCrumb
Или скачиваем у нас, сразу готовые для закачки файлы.

Замечание: так как хлебные крошки в ксенфоро дублируются ещё и в футере страницы, то там скрипт не обрабатывает их должным образом, так как если на странице используются еще крошки, то они должны иметь другой ID, в нашем случае получается что ID также дублируется.

Из футера крошки можно убрать, зайдя в шаблон PAGE_CONTAINER и удалив из нижней его части такой код:

PHP код:



            <xen:hook name="page_container_breadcrumb_bottom">            
            <div class="breadBoxBottom"><xen:include template="breadcrumb" /></div>
            </xen:hook>
                        
            <xen:include template="ad_below_bottom_breadcrumb" />

Тем самым у нас крошки будут только под навбаром, вверху страницы.

Пользователь · Регистрация: 13.04.2012

да все-таки хф-раш отдыхает таких админов как Вы да туда к ним 1.1.2 - Хлебные крошки» на jQuery | Форум сайта XenForo-Russia

Пользователь · Регистрация: 13.04.2012

Vector скажите как вставить иконку домашней 30х30 а то у меня пол ототбражается

Добавлено через 41 секунду
свою чтоб не менялась

Администратор · Регистрация: 27.02.2009

пробывал инспектировать иконку фаербагом? может она находится в диве со свойством overflow или с заданными шириной и высотой...

Пользователь · Регистрация: 13.04.2012

ширину и высоту изменил но с расположением что то не так не пойму срезает и все может просто устал сильно чего не замечаю

Администратор · Регистрация: 27.02.2009

в CSS:
.breadCrumb ul li - изменит ширину и высоту
.breadCrumb ul li.first a - аналогично
.breadCrumb ul - высоту
.breadCrumb - высоту

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
FAQ Как русифицировать XenForo?	HaSp	XenForo	2	26.01.2013 17:39
Проблема Хлебные крошки » на jQuery	Skrimm	XenForo	1	17.09.2012 00:01
Вопрос xenforo 1.1.1	Kasper55	XenForo	9	19.12.2011 23:33
Инфо XenForo 1.0.3	Vector	XenForo	0	12.07.2011 19:18
Обзор XenForo 1.0.0 Beta 6	Vector	XenForo	0	17.01.2011 20:24

Vector #4
7630 МГц Администратор Вес репутации: 0 Регистрация: 27.02.2009 Адрес: Москва Сообщений: 7,302 Сказал(а) спасибо: 578 Спасибок 2,627 в 1,832 сообщениях	Re: Хлебные крошки для XenForo - 24.09.2012, 00:11 пробывал инспектировать иконку фаербагом? может она находится в диве со свойством overflow или с заданными шириной и высотой...

Vector #6
7630 МГц Администратор Вес репутации: 0 Регистрация: 27.02.2009 Адрес: Москва Сообщений: 7,302 Сказал(а) спасибо: 578 Спасибок 2,627 в 1,832 сообщениях	Re: Хлебные крошки для XenForo - 24.09.2012, 00:40 в CSS: .breadCrumb ul li - изменит ширину и высоту .breadCrumb ul li.first a - аналогично .breadCrumb ul - высоту .breadCrumb - высоту