XF 1.4 CSS Header Styling Help

[chris_61]

I'm trying to get the a few pieces of text to far right of the header where it says TEXT here but instead its displaying over the logo. I had this working before but I was on 1.2.5 with text on the left, logo in the the middle and text to the right but my database got corrupt and so i lost the code. I've been trying to recreate it for my current needs and cant get it working.

Any help would very much be appreciated.

Website URL: http://mcbuffalo.com

Please see below photo:

CSS (Extra.css):

#logo .serverlink a {
        color: #FFF;
        font-weight: bold
    }
    #logo .serverlink {
        width: 100%;
        padding: 0px;
        margin: 0px;
        position: absolute;
        bottom: 4px;
        z-index: 2;
        line-height: 2em;
        font-weight: bold;
        color: #FFF;
        display: block;
        vertical-align: text-bottom;
        outline: 0 none;
        text-transform: uppercase;
        font-size: 1.1em;
        font-weight: bold;
        color: #FFF;
        text-align: center;
        text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5),0px -1px 5px rgba(0, 0, 0, 0.5),-1px 0px 5px rgba(0, 0, 0, 0.5),-1px -1px 5px rgba(0, 0, 0, 0.5);
        filter: dropshadow(color=#000000,offx=0,offy=0);
    }
    #logo .serverlink.left { float: left; left: 0px; width: 40%; text-align: left; padding-left: 5px; }
    #logo .serverlink.right { float: right; right: 0px; width: 40%;  text-align: right; padding-right: 5px; }

Logo Block code:

        <xen:hook name="header_logo">

        <div id="logo"><a href="{$logoLink}">
            <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>
  

<h2 class="serverlink left">
</h2>
<h2 class="serverlink right">
    <a href="ts3server://ts.mcbuffalo.com">TeamSpeak: ts.mcbuffalo.com</a>
    <br>
    Server IP: play.mcbuffalo.com
</h2>

 

[chris_61]

Bump

 

[Paul B]

The code is inside the logo div so it is constrained by the width of the logo.

Move it outside the div.

 

[Dylan V]

Hi,

See my post here.