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

Images in Breadcrumb

Discussion in 'Styling and Customization Questions' started by Mythotical, Aug 13, 2011.

  1. Mythotical

    Mythotical Well-Known Member

    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
     
  2. Mythotical

    Mythotical Well-Known Member

    Anyone got any suggestions?
     
  3. TazDevilLooney

    TazDevilLooney Active Member

    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
     
  4. Mythotical

    Mythotical Well-Known Member

    Perfect, thank you
     
    TazDevilLooney likes this.

Share This Page