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

Discussion in 'Styling and Customization Questions' started by Rum Runner Entertainment, Feb 3, 2015.

  1. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

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

    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)
     
  3. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

    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?
     
  4. Arty

    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.
     
  5. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

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

    Rum Runner Entertainment Active Member

    @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. Rum Runner Entertainment

    Rum Runner Entertainment Active Member

    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!
     
  8. Arty

    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.
     
  9. Tracy Perry

    Tracy Perry Well-Known Member

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

    Rum Runner Entertainment Active Member

    Yes, I changed the <a href=""> to my site's URL, but is there anything wrong with the CSS? Or...?

    And alright.
     

Share This Page