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

XF 1.4 CSS Sprite for Logo

Arty

Well-known member
#2
All custom css should go to extra.css. Add custom rule for #logo a

Logo is an image, not background image, so you also need a template modification for logo_block template to remove that image (or simply edit logo_block template)
 
#3
Alright, but is there any "CSS to add" really? Well I mean, I know it's a sprite, but is it supposed to be identified as a 'background image' or an image with a... Ugh hard to explain.., but I think you get my point?
 

Arty

Well-known member
#4
There is CSS to add. You need to set width and height for "#logo a" and assign background image to it.
 
#6
@Arty

This is what I have in my logo_block template:
HTML:
<div id="logoBlock">

    <xen:if is="@uix_pageStyle != 1">
    <div class="pageWidth">
    </xen:if>   
       
        <div class="pageContent">
       
        <xen:if is="@uix_pageStyle == 1">
        <div class="pageWidth">
        </xen:if>
           
        <xen:hook name="header_logo">
        <div id="logo"><a href="https://forums-piratesonlinerewritten.com">
       
            <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
            <xen:if is="@uix_logoText"><h2 class="uix_textLogo"><xen:if is="@uix_logoTextIcon"><i class="uix_icon @uix_logoTextIcon"></i></xen:if>@uix_logoText</h2><xen:else /><img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" /></xen:if>
            <xen:if is="@uix_sloganText"><div class="uix_slogan">@uix_sloganText</div></xen:if>
       
        </a></div>
        </xen:hook>
       
        <xen:if is="{$canSearch} && @uix_searchPosition == 1 && !( @uix_navStyle == 2 || ( @uix_navStyle == 3 && @uix_pageStyle != 1 ) )"><xen:include template="search_bar" /></xen:if>
       
        <xen:include template="ad_header" />           
        <span class="helper"></span>
        </div>
    </div>   
</div>
and this is what I added into my EXTRA.css template:
Code:
#logo a
{
width:1170px;
height:115px;
text-decoration:none;
display:block;
background-image:url(/data/images/Rum1.png);
background-position:0 0;
}
And for some reason, it's not working I don't know why.

Thanks!
 
#7
I added in CSS into the EXTRA.css template for the logo sprite image, but for some reason it is not working.

Here is the CSS:
Code:
#logo a
{
width:1170px;
height:115px;
text-decoration:none;
display:block;
background-image:url(/data/images/Rum1.png);
background-position:0 0;
}
and here is the Logo_block HTML code which I currently have in place:
HTML:
<div id="logoBlock">

    <xen:if is="@uix_pageStyle != 1">
    <div class="pageWidth">
    </xen:if>   
       
        <div class="pageContent">
       
        <xen:if is="@uix_pageStyle == 1">
        <div class="pageWidth">
        </xen:if>
           
        <xen:hook name="header_logo">
        <div id="logo"><a href="https://forums-piratesonlinerewritten.com">
       
            <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
            <xen:if is="@uix_logoText"><h2 class="uix_textLogo"><xen:if is="@uix_logoTextIcon"><i class="uix_icon @uix_logoTextIcon"></i></xen:if>@uix_logoText</h2><xen:else /><img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" /></xen:if>
            <xen:if is="@uix_sloganText"><div class="uix_slogan">@uix_sloganText</div></xen:if>
       
        </a></div>
        </xen:hook>
       
        <xen:if is="{$canSearch} && @uix_searchPosition == 1 && !( @uix_navStyle == 2 || ( @uix_navStyle == 3 && @uix_pageStyle != 1 ) )"><xen:include template="search_bar" /></xen:if>
       
        <xen:include template="ad_header" />           
        <span class="helper"></span>
        </div>
    </div>   
</div>
Thanks!
 

Arty

Well-known member
#8
That's not default style code, so could be something in it that makes logo behave differently.

Or URL for background image could be wrong. Try opening that URL in browser.