• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.5 Where can I edit the right side of my header?

#1
Hi all,

So I have edited the background color of my logoblock by adding the last line (background-color) to header.css.

My problem is it only covers the logoblock. Where can I find the css for the other side? (the area where the login or sign up button appears)

Example image
Code:
    #logo
    {
        display: block;
        float: left;
        line-height: {xen:calc '@headerLogoHeight - 4'}px;
        *line-height: @headerLogoHeight;
        height: @headerLogoHeight;
        max-width: 100%;
        vertical-align: middle;
        background-color: rgb(0, 63, 80);
    }
 
#2
Hello friendly bump

I believe it is the area where you can put ads? as well as where the login button shows as per the example above.
 
#6
I tried this for the following result:



Commented out the script part and added a 1x80 image stretched to 518px (the max width before it begins to spill over the right-side of the page).
Code:
<div class="adManagerHeader">
<xen:comment>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</xen:comment>

<img src="/images/bannerstrip.png?v=03" width="518px" height="80px">
And my extra.css
Code:
    #logo
    {
        display: block;
        float: left;
        line-height: {xen:calc '@headerLogoHeight - 4'}px;
        *line-height: @headerLogoHeight;
        height: @headerLogoHeight;
        max-width: 100%;
        vertical-align: middle;
        background-color: #003f50;
        margin-right: 0px;
    }
How can I remove those extra white bits? There must be an option somewhere to set the colour :|
 
#7
So after two and a bit weeks I finally found a solution.

Go into extra.css
Use the padding-right css to manually push the background-color across the screen.

And then use @media (max-width: yyyypx) to adjust for the resolutions you need, so it doesn't spill over the right side of the screen.
Code:
    #logo
    {
        display: block;
        float: left;
        line-height: {xen:calc '@headerLogoHeight - 4'}px;
        *line-height: @headerLogoHeight;
        height: @headerLogoHeight;
        max-width: 100%;
        vertical-align: middle;
        background-color: #003f50;
      padding-right: 519px;
    }
 
/* Fixes logo background colour for 1368px width */
    @media (max-width:1368px) {
        #logo {
                 padding-right: 511px;
        }
    }
/* Fixes logo background colour for 1368px width */
 
/* Fixes logo background colour for 1360px width */
    @media (max-width:1360px) {
        #logo {
                 padding-right: 508px;
        }
    }
/* Fixes logo background colour for 1360px width */
 
/* Fixes logo background colour for 1280px width */
    @media (max-width:1280px) {
        #logo {
                 padding-right: 476px;
        }
    }
/* Fixes logo background colour for 1280px width */
 
/* Fixes logo background colour for 1152px width */
    @media (max-width:1152px) {
        #logo {
                 padding-right: 425px;
        }
    }
/* Fixes logo background colour for 1152px width */
 
/* Fixes logo background colour for 1024px width */
    @media (max-width:1024px) {
        #logo {
                 padding-right: 374px;
        }
    }
/* Fixes logo background colour for 1024px width */
Voilà: