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

Discussion in 'Styling and Customization Questions' started by Hizen, Jun 29, 2016.

  1. Hizen

    Hizen New Member

    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
    [​IMG]
    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. Hizen

    Hizen New Member

    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.
     
  3. Hizen

    Hizen New Member

    Up.
     
  4. AndyB

    AndyB Well-Known Member

  5. Hizen

    Hizen New Member

    Thank you @AndyB I appreciate your reply. :)
     
    AndyB likes this.
  6. Hizen

    Hizen New Member

    I tried this for the following result:

    [​IMG]

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

    Hizen New Member

    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Ă :
    [​IMG]
     

Share This Page