XF 1.4 CSS Sprite for Logo

[Rum Runner Entertainment]

Where do I add the CSS to turn the the logo into a sprite?

 

[Arty]

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)

 

[Rum Runner Entertainment]

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]

There is CSS to add. You need to set width and height for "#logo a" and assign background image to it.

 

[Rum Runner Entertainment]

Alright, should this be done in the EXTRA.css template? And if so, what do I add in to the logo_block template?

 

[Rum Runner Entertainment]

@Arty

This is what I have in my logo_block template:

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

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

 

[Rum Runner Entertainment]

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:

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

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

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.

 

[TPerry]

You would be better addressed by asking this in the UI.X related style discussion area for the style.

 

[Rum Runner Entertainment]

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.