• 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

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

mrGTB

Well-known member
#4
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.

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

Robby

Well-known member
#7
Hello,

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

Code:
@media (max-width:@maxResponsiveWideWidth) {
  .Responsive .adheader {
  display: none;
  }
 

Brogan

XenForo moderator
Staff member
#8
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.