XF 1.4 Skyscraper at the right side

[DRaver]

How can i display a scyscraper at the right side ?

 

[DRaver]

I don´t get it. Why is no one here who can help me?

 

[Arty]

There is no ad template for that spot, so you'll need to use template modifications to edit page_container template.

1. Create template with your ad code, lets call it "ad_right". Put your ad code in it.

2. Create template modification for "page_container" template. In search field put

    <div class="pageContent">
       <!-- main content area -->

in replace field put

    <div class="pageContent withAd">
       <!-- main content area -->
       <div class="rightAd"><xen:include template="ad_right" /></div>

then add this to extra.css template:

#content .pageContent.withAd { position: relative; padding-right: 200px; }
.rightAd { position: absolute; right: 0; }

In that code change 200 to width of your banner + 10.

If you want to hide banner on mobile devices because its more of annoyance than helpful on devices where there is no space for banners, add this to extra.css below your code

@media { max-width: 800px) {
  #content .pageContent.withAd { padding-right: 10px; }
  .rightAd { display: none; }
}

 

[DRaver]

Thanks, I will test it.

 

[DRaver]

@Arty Thanks for you help.

Unfortunately, there is still a small problem.
The Banner is right but insight the forum. But as you can see it on the picture in my post 1, I need it outside.
Here ist the picture of my test environment.



If you can fix this little problem, than you are my hero .

 

[tajhay]

fix this little problem

What is your URL? You wont be able to see the scryscraper on lower resolutions. You know that right?

 

[Arty]

That would require adjusting header, content and footer, so its not a good idea.

#content, .footer, .footerLegal, #headerMover #header { padding-right: 200px; }
#headerMover #header { box-sizing: border-box; }
#content .pageContent.withAd { position: relative; }
.rightAd { position: absolute; right: -200px; }

and responsive block:

@media (max-width: 800px) {
#content, .footer, .footerLegal, #headerMover #header { padding-right: 0; }
.rightAd { display: none; }
}

 

[DRaver]

Why is that not a good idea? I have e special code for the banner, to not diplay on mobil displays.
I need that banner outside the forum to display wallpaper banner.
Where do I have to add this code??

 

[Arty]

Its a replacement for css you've added to extra.css

 

[DRaver]

@Arty Thank you !!! Thank you !!! Thank you !!! Thank you !!! Thank you !!! Thank you !!!

 

[DRaver]

@Arty I have a little problem. I must load the leaderboard banner before the skyscraper.

So for the leaderboard I use the ad_header template from XF.

The skyscraper is loading at line 200 with your code.
The leaderboard at line 3280

Do you have any idea how I can change the order without the template to break anything?

 

[Arty]

Can you post screenshot?

 

[DRaver]

Can you post screenshot?

A screenshot from what?

 

[Arty]

Oh, you mean loading order. I thought there was overlap of banners.

For that you need to move header block above content. Open page_container, replace

  <div id="headerProxy"></div>

with

<header>
   <link rel="xenforo_template" type="text/html" href="header.html" />
   <link rel="xenforo_template_hint" type="text/html" href="navigation.html" />
   <link rel="xenforo_template_hint" type="text/html" href="search_bar.html" />
</header>

then find second block closer to bottom of that file and delete it.

Then add this to extra.css

div#headerMover #header { position: relative; }

 

[Sperber]

DRaver,

has this fixed your problem? I´m about to switch from vbulletin to xf and only the missing wallpaper solution is the reason that holds me back. I have a contract for the wallpaper with a premium partner and would have to pay a substantial contractual fine, when the wallpaper ad-spot wouldn´t be present anymore.

 

[Bram]

Have you found a comfortable solution for this @Sperber ?

 

[Sperber]

Have you found a comfortable solution for this @Sperber ?

Unfortunal not.

 

[Bram]

Sorry to hear that @Sperber


Nobody else that has a 100% fitting solution?