XF 2.0 Adding Advertisement to Right of Logo

[MattRock]

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:



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!

 

[Jordyn]

Is choosing Position "container header" in Setup>>Advertising not work?

 

[MattRock]

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!

 

[Jordyn]

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.

 

[Vanjoe]

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!

Screenshot of how it looks compared to your original mockup?

 

[MattRock]

Screenshot of how it looks compared to your original mockup?

Here's the problem now - it doesn't place the ad to the right of the logo, but instead on a new line:



Anyone have any thoughts on how to fix?

 

[Paul B]

Did you float it right?

This is how it is typically achieved in XF1:

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

 

[MattRock]

Did you float it right?

This is how it is typically achieved in XF1:

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

 

[Jordyn]

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:

<div class="headerad">YOUR AD CODE</div>

extra.less

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

 

[MattRock]

I'm all set folks, thanks for the help here!

 

[Jordyn]

I'm all set folks, thanks for the help here!

Thats great mate, so what worked? So you can help others

 

[MattRock]

Thats great mate, so what worked? So you can help others

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>

 

[Jordyn]

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