XF 1.4 CSS Sprite for Logo

Arty

Well-known member
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)
 
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
There is CSS to add. You need to set width and height for "#logo a" and assign background image to it.
 
@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!
 
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
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.
 

Tracy Perry

Well-known member
You would be better addressed by asking this in the UI.X related style discussion area for the style.
 
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.
Yes, I changed the <a href=""> to my site's URL, but is there anything wrong with the CSS? Or...?

And alright.
 
Top