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

Problem with advertisement in header

Discussion in 'Troubleshooting and Problems' started by ekogo, Mar 29, 2012.

  1. ekogo

    ekogo New Member

    Hi,

    I succesfully added ad in header following the advice here:

    http://xenforo.com/community/threads/frequently-asked-questions.5183/#post-182355

    How do I place an image or advert in the header on the right and center it vertically?
    Wrap the contents in a div like so:
    <div style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: middle">
    Image or advert code
    </div>

    Ad shows up ok, but the problem I have is that the "login or sign up" tab partially covers the ad. How would I move the ad down a little?
     
  2. mrGTB

    mrGTB Well-Known Member

    I don't have all the code I used anymore how I did it. One thing you have to do is increase the height of the LOGO so it's more than the height of the banner ad. Also can't can't remember if I used "inline-block" and not "block".

    This might help that I posted on Admin Extra at the time: http://adminextra.com/threads/styling-added-with-header-adsense-ads.4839/
     
  3. DBA

    DBA Well-Known Member

    Do you have a link?

    Adding a top margin should do the trick.
     
  4. mrGTB

    mrGTB Well-Known Member

    This is why I said your logo should first be taller in height than your banner used. You can alter the height of your logo in XF admin settings first. Then create a new logo that matches the new height used.

    Snap1.png

    This example shows why I did it this way.

    banner-header.jpg

    Your typical adsense banner used there is 468x60, but the default XF avatar height is 50px and not 60px. So if you went with a logo that's 70px height, that would give you 10px space. You can then use "5px margin-top" to centre it, if you used borders and padding around ad with CSS, you still have ample margin room to centre it inline still with logo.

    If you changed Logo to 70px in settings and created a new logo image to that size used also. I would add this in ads template.

    Code:
    <span class="adheader">Your AdSense Code</span>
    Then add this CSS to Extras template.

    The margin-right is used to push your banner away from the right-side to line things up better with the drop-down login box. You'll see what I mean testing the margin-right using different spacing in pixels. The above presumes you use a logo that's 70px height, and you banner is a 468x60px one.

    Anyway, the above should put you on the right track for doing it.
     
    HenrikHansen and DBA like this.
  5. Robby

    Robby Well-Known Member

    How to disable ad for mobile?
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    Use a media query.

    Instructions are in the FAQ in my signature.
     
  7. Robby

    Robby Well-Known Member

    Hello,

    I used this. Seems to be working.
    Nothing wrong with that code?

    Code:
    @media (max-width:@maxResponsiveWideWidth) {
      .Responsive .adheader {
      display: none;
      }
     
    Bram likes this.
  8. Brogan

    Brogan XenForo Moderator Staff Member

    What size screen did you test it on and what is maxResponsiveWideWidth set to in SPs?

    There is no 'mobile' flag, it is all based on screen widths.
     
  9. Robby

    Robby Well-Known Member

    What would be beter then?
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

    Use a media query which matches the width of the screen you are trying to remove it from.
     
  11. Bram

    Bram Well-Known Member

    The above is the first solution that has worked for me. Is it allowed though to use display none on adsense?
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

    No, it is against the AdSense ToS.
     

Share This Page