Cupara
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:
Here is my breadcrumb.css template:
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;
}
