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

Discussion in 'Troubleshooting and Problems' started by toodlez, Mar 10, 2012.

  1. toodlez

    toodlez Active Member

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

    Thanks!
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Style Properties -> Breadcrumb -> Item Content, First Item
     
  3. toodlez

    toodlez Active Member

    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"
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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>
    
     
    fun2mass and Akela like this.
  5. toodlez

    toodlez Active Member


    Nice...

    Now how do I remove the "Forums" part of the breadcrumbs ?
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
    Akela likes this.
  7. toodlez

    toodlez Active Member

    Thanks bro
     

Share This Page