Problem with advertisement in header

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

This example shows why I did it this way.

banner-header.webp

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.

.adheader {
float:right;
display:inline-block;
margin: 5px 40px 5px 0;
}

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.
 
Hello,

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

Code:
@media (max-width:@maxResponsiveWideWidth) {
  .Responsive .adheader {
  display: none;
  }
 
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.
 
I think it's bad to hide ads using CSS or something. If you choose to use AdSense, then what's the reason to hide it?
And if you need to hide, just remove the Ads.

Let me know if i'm correct
You can hide Adsense ads on mobile devices with CSS and display them on desktop.
 
Top Bottom