XF 2.0 Adding Advertisement to Right of Logo

MattRock

Member
It's wild to think that I am the first to look for some guidance on this, but here I am! In XF 1, I was able to edit the page container to get an advertisement to the right of the logo block, as seen below:

1532114722856.webp

I'm really struggling with XF 2 to get this accomplished. Does anyone have any guidance for how I may do this, without having to purchase the very expensive "Ads Manager 2" add-on?

Thanks for any help anyone can provide!
 
Amazing! I didn’t even see this feature! Thanks for the guidance. I wish there was more documentation for XF 2, but even without, its very nice!
Haha, i had never used this, but i seen the ad hook in the template "PAGE_CONTAINER" <xf:ad position="container_header" />.
So yeah glad it worked, cheers mate.
 
Did you float it right?

This is how it is typically achieved in XF1:
HTML:
<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>
 
  • Like
Reactions: KSA
Did you float it right?

This is how it is typically achieved in XF1:
HTML:
<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>

That did not seem to do the trick, but I think this is headed in the right direction.
 
That did not seem to do the trick, but I think this is headed in the right direction.
Im not sure this would work for adsense as i cant test it. But this mite be worth a shot.

HTML:
Code:
<div class="headerad">YOUR AD CODE</div>

extra.less
Code:
.headerad {
    margin-top: -262px;
    margin-right: 0px;
    margin-bottom: 0px;
    max-height: 120px;
}
@media (max-width: 920px) {
    .headerad {
        display: none;
    }
}

If this works, edit to your needs.

EDIT: Updated code.

demo.webp
 
Last edited:
Yep, I just added the following code to the "container header" advertisement block:

<div style="display: block; float: right; margin-top: -94px;">
!!! ADSENSE CODE HERE !!!
</div>
Good stuff mate, glad you worked it out. A code like that did cross my mind, but i then thought of ipad and mobile users. My code will make the ad hide on mobile. But long as your happy mate, cheers ;)
 
Top Bottom