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

[Hizen]

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

Spoiler: Example

    #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);
    }

 

[Hizen]

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.

 

[Hizen]

Up.

 

[AndyB]

You might like this add-on:

https://xenforo.com/community/resources/ad-manager-header.4922/

 

[Hizen]

Thank you @AndyB I appreciate your reply.

 

[Hizen]

You might like this add-on:

https://xenforo.com/community/resources/ad-manager-header.4922/

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

<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

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

 

[Hizen]

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.

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