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 Header Styling Help

Discussion in 'Styling and Customization Questions' started by chris_61, Jun 17, 2015.

  1. chris_61

    chris_61 Member

    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>
    <h2 class="serverlink left">
    <h2 class="serverlink right">
        <a href="ts3server://ts.mcbuffalo.com">TeamSpeak: ts.mcbuffalo.com</a>
        Server IP: play.mcbuffalo.com
    Last edited: Jun 17, 2015
  2. chris_61

    chris_61 Member

  3. Brogan

    Brogan XenForo Moderator Staff Member

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

    Move it outside the div.
  4. Dylan V

    Dylan V Well-Known Member


    See my post here.

Share This Page