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

Replace "Home" with an image in breadlinks

Jake Bunce

XenForo moderator
Staff member
#4
Admin CP -> Appearance -> Templates -> breadcrumb

Replace the red code:

Code:
			<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="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"'}><span{xen:if $microdata, ' itemprop="title"'}>{$homeTab.title}</span></a>
					<span class="arrow"><span></span></span>
				</span>
			</xen:if>
Like so:

Code:
			<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"'}><img src="path/to/image.gif" /></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"'}><span{xen:if $microdata, ' itemprop="title"'}>{$homeTab.title}</span></a>
					<span class="arrow"><span></span></span>
				</span>
			</xen:if>
The result:

Screen shot 2012-03-10 at 11.16.31 PM.png

I had to add some inline styling to position it just right:

Code:
			<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"'}><img style="position: relative; top: 4px;" src="path/to/image.gif" /></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"'}><span{xen:if $microdata, ' itemprop="title"'}>{$homeTab.title}</span></a>
					<span class="arrow"><span></span></span>
				</span>
			</xen:if>
 

toodlez

Active member
#5
Admin CP -> Appearance -> Templates -> breadcrumb

Replace the red code:

Code:
<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="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"'}><span{xen:if $microdata, ' itemprop="title"'}>{$homeTab.title}</span></a>
<span class="arrow"><span></span></span>
</span>
</xen:if>
Like so:

Code:
<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"'}><img src="path/to/image.gif" /></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"'}><span{xen:if $microdata, ' itemprop="title"'}>{$homeTab.title}</span></a>
<span class="arrow"><span></span></span>
</span>
</xen:if>
The result:

View attachment 26954

I had to add some inline styling to position it just right:

Code:
<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"'}><img style="position: relative; top: 4px;" src="path/to/image.gif" /></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"'}><span{xen:if $microdata, ' itemprop="title"'}>{$homeTab.title}</span></a>
<span class="arrow"><span></span></span>
</span>
</xen:if>

Nice...

Now how do I remove the "Forums" part of the breadcrumbs ?
 

Jake Bunce

XenForo moderator
Staff member
#6
Same template:

Code:
			<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="arrow"><span>&gt;</span></span>
				</span>
			</xen:if>
But this is generic code for the current tab. There is nothing specific for the "Forums" crumb.