Replace "Home" with an image in breadlinks

[thunderup]

Hi, I was wonder where I need to go to change the "Home" in the breadlinks into an image of a home icon?

Thanks!

 

[Paul B]

Style Properties -> Breadcrumb -> Item Content, First Item

 

[thunderup]

And I do what ?
I'm not trying to change the background image I just want the image to display once in place of "Home"

 

[Jake Bunce]

Admin CP -> Appearance -> Templates -> breadcrumb

Replace the red 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:

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



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

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

 

[thunderup]

Admin CP -> Appearance -> Templates -> breadcrumb

Replace the red 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:

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

<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]

Same template:

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

 

[thunderup]

Thanks bro