• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Images in Breadcrumb

Mythotical

Well-known member
#1
I'm trying to get images in the breadcrumb next to each active link but I can only manage to get it to work on the home link as shown in the screenshot.

Here is my breadcrumb template:
HTML:
<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>
        
        <span class="crumbs">
            <xen:if is="{$showHomeLink}">
                <span class="crust"{xen:if $microdata, ' itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"'}>
                    <a href="{$homeLink}" class="crumb"{xen:if $microdata, ' rel="up" itemprop="url"'}><span{xen:if $microdata, ' itemprop="title"'}>{xen:phrase home}</span></a>
                    <span class="heirarchy"><span><img src="@imagePath/xenforo/xportal/heirarchy.png" border="0" /></span></span>
                </span>
            <xen:elseif is="{$selectedTabId} != {$homeTabId}" />
                <span class="crust"{xen:if $microdata, ' itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"'}>
                    <a href="{$homeTab.href}" class="crumb"{xen:if $microdata, ' rel="up" itemprop="url"'}"><span{xen:if $microdata, ' itemprop="title"'}>{$homeTab.title}</span></a>
                    <span class="heirarchy"><span><img src="@imagePath/xenforo/xportal/heirarchy.png" border="0" /></span></span>
                </span>
            </xen:if>
            
            <xen:if is="{$selectedTab}">
                <span class="crust"{xen:if $microdata, ' itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"'}>
                    <a href="{$selectedTab.href}" class="crumb"{xen:if $microdata, ' rel="up" itemprop="url"'}><span{xen:if $microdata, ' itemprop="title"'}>{$selectedTab.title}</span></a>
                    <span class="heirarchy"><span><img src="@imagePath/xenforo/xportal/heirarchy-join.png" border="0" /></span></span>
                </span>
            </xen:if>
            
            <xen:if is="{$navigation}">
                <xen:foreach loop="$navigation" value="$breadcrumb" i="$i" count="$count">
                    <span class="crust"{xen:if $microdata, ' itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"'}>
                        <a href="{xen:raw $breadcrumb.href}" class="crumb"{xen:if $microdata, ' rel="up" itemprop="url"'}><span{xen:if $microdata, ' itemprop="title"'}>{xen:raw $breadcrumb.value}</span></a>
                        <span class="heirarchy"><span><img src="@imagePath/xenforo/xportal/heirarchy-join.png" border="0" /></span></span>
                    </span>
                </xen:foreach>
            </xen:if>
        </span>
    </fieldset>
</nav>
Here is my breadcrumb.css template:
HTML:
.breadBoxTop,
.breadBoxBottom
{
    @property "breadBox";
    padding: 10px 5px;
    margin: 0 -5px;
    overflow: hidden;
    zoom: 1;
    clear: both;
    @property "/breadBox";
}

.breadBoxTop
{
}

.breadBoxTop .topCtrl
{
    @property "breadBoxTopCtrl";
    margin-left: 5px;
    float: right;
    line-height: 24px;
    @property "/breadBoxTopCtrl";
}

.breadcrumb
{
    @property "breadcrumb";
    font-size: 11px;
    background-image: url('@imagePath/xenforo/xportal/heirarchy.png');
    background-repeat: no-repeat;
    background-position: left;
    overflow: hidden;
    zoom: 1;
    @property "/breadcrumb";
}

.breadcrumb .boardTitle
{
    @property "breadcrumbBoardTitle";
    display: none;
    @property "/breadcrumbBoardTitle";
}

.breadcrumb .crust
{
    @property "breadcrumbItemCrust";
    display: block;
    float: left;
    position: relative;
    margin-left: 15px;
    zoom: 1;
    @property "/breadcrumbItemCrust";
}

.breadcrumb .crust a.crumb
{
    @property "breadcrumbItemCrumb";
    text-decoration: none;
    padding: 0 10px 0 18px;
    margin-bottom: -1px;
    outline: 0 none;
    -moz-outline-style: 0 none;
    display: block;
    line-height: 24px;
    _border-bottom: none;
    @property "/breadcrumbItemCrumb";
}

    .breadcrumb .crust:first-child a.crumb
    {
        @property "breadcrumbItemFirstCrumb";
        padding-left: 10px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        @property "/breadcrumbItemFirstCrumb";
    }
    
    .breadcrumb .crust:last-child a.crumb
    {
        @property "breadcrumbItemLastCrumb";
        font-weight: bold;
        @property "/breadcrumbItemLastCrumb";
    }

.breadcrumb .crust .arrow
{
    @property "breadcrumbItemArrowOuter";
    border-color: transparent;
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 50;
    width: 0px;
    height: 0px;
    @property "/breadcrumbItemArrowOuter";
}

.breadcrumb .crust .arrow span
{
    @property "breadcrumbItemArrowInner";
    border-color: transparent;
    display: block;
    position: absolute;
    top: -12px;
    z-index: 51;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 9999px;
    width: 0px;
    height: 0px;
    @property "/breadcrumbItemArrowInner";
}

.breadcrumb .crust:hover a.crumb
{
    @property "breadcrumbItemCrumbHover";
    color: #000000;
    @property "/breadcrumbItemCrumbHover";
}

.breadcrumb .crust:hover .arrow span
{
    border-left-color: @breadcrumbItemCrumbHover.background-color;
}

    .breadcrumb .crust .arrow
    {
        /* hide from IE6 */
        _display: none;
    }

.breadcrumb .jumpMenuTrigger
{
    @property "breadcrumbJumpMenuTrigger";
    background: transparent url('@imagePath/xenforo/widgets/quicknav.png') no-repeat;
    margin: 5px;
    display: block;
    float: right;
    white-space: nowrap;
    text-indent: 9999px;
    overflow: hidden;
    width: 13px;
    height: 13px;
    @property "/breadcrumbJumpMenuTrigger";
}
.heirarchy
{
    @property "breadcrumbItemArrowOuter";
    border-color: transparent;
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 50;
    width: 0px;
    height: 0px;
    @property "/breadcrumbItemArrowOuter";
}

.heirarchy span
{
    @property "breadcrumbItemArrowInner";
    border-color: transparent;
    display: block;
    position: absolute;
    top: -12px;
    z-index: 51;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 9999px;
    width: 0px;
    height: 0px;
    @property "/breadcrumbItemArrowInner";
}
.heirarchy span
{
    border-left-color: @breadcrumbItemCrumbHover.background-color;
}

    .heirarchy
    {
        /* hide from IE6 */
        _display: none;
    }
breadcrumb.png
 
#3
Would something like this be what your looking for.

breadcrumb.png

The arrows are .png

breadcrumb

Code:
<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>

        <span class="crumbs">

            <xen:if is="{$showHomeLink}">
                <span class="crust"{xen:if $microdata, ' itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"'}>
                    <a href="{$homeLink}" class="crumb"{xen:if $microdata, ' rel="up" itemprop="url"'} style="background:none !important;"><span class="arrow2" {xen:if $microdata, ' itemprop="title"'}>{xen:phrase home}</span></a>
                    <!-- <span class="arrow"><span></span></span> -->
                </span>
            <xen:elseif is="{$selectedTabId} != {$homeTabId}" />
                <span class="crust"{xen:if $microdata, ' itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"'}>
                    <a href="{$homeTab.href}" class="crumb"{xen:if $microdata, ' rel="up" itemprop="url"'}"  style="background:none !important;"><span{xen:if $microdata, ' itemprop="title"'}>{$homeTab.title}</span></a>
            <!--    <span class="arrow"><span>  --> </span></span>
                </span>
            </xen:if>

            <xen:if is="{$selectedTab}">
                <span class="crust"{xen:if $microdata, ' itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"'}>
                    <a href="{$selectedTab.href}" class="crumb"  style="background:none;" {xen:if $microdata, ' rel="up" itemprop="url"'}><span class="arrow2" {xen:if $microdata, ' itemprop="title"'}>{$selectedTab.title}</span></a>
                    <!-- <span class="arrow"><span>&gt;</span></span> -->
                </span>
            </xen:if>

            <xen:if is="{$navigation}">
                <xen:foreach loop="$navigation" value="$breadcrumb" i="$i" count="$count">
                    <span class="crust"{xen:if $microdata, ' itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"'}>
                        <a href="{xen:raw $breadcrumb.href}" class="crumb" style="background:none;" {xen:if $microdata, ' rel="up" itemprop="url"'}><span class="arrow2" {xen:if $microdata, ' itemprop="title"'}>{xen:raw $breadcrumb.value}</span></a>
                        <!--  <span class="arrow"><span>&gt;  </span></span> -->
                    </span>
                </xen:foreach>
            </xen:if>
        </span>
    </fieldset>
</nav>
Place this code at bottom of the breadcrumb.css

breadcrumb.css

Code:
.arrow2 {background:url(styles/default/xenforo/icons/arrow2.png) no-repeat left;padding-left:10px;}
.breadcrumb .crust a.crumb {padding:0px;padding-right:3px;}
Place the .png in styles/default/xenforo/icons/arrow2.png arrow2.png

Hope this helps. :D