Replace "Home" with an image in breadlinks

Jake Bunce

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

Replace the red code:

Rich (BB 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:

Rich (BB 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:

Rich (BB 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:

Rich (BB 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:

Rich (BB 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:

Rich (BB 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.
 
Top