• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Skyscraper at the right side

Arty

Well-known member
#3
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
Code:
    <div class="pageContent">
       <!-- main content area -->
in replace field put
Code:
    <div class="pageContent withAd">
       <!-- main content area -->
       <div class="rightAd"><xen:include template="ad_right" /></div>
then add this to extra.css template:
Code:
#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
Code:
@media { max-width: 800px) {
  #content .pageContent.withAd { padding-right: 10px; }
  .rightAd { display: none; }
}
 

DRaver

Active member
#5
@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.

upload_2015-2-7_10-52-21.png

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

Arty

Well-known member
#7
That would require adjusting header, content and footer, so its not a good idea.
Code:
#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:
Code:
@media (max-width: 800px) {
#content, .footer, .footerLegal, #headerMover #header { padding-right: 0; }
.rightAd { display: none; }
}
 

DRaver

Active member
#8
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??
 

DRaver

Active member
#11
@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

Well-known member
#14
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
Code:
  <div id="headerProxy"></div>
with
Code:
<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
Code:
div#headerMover #header { position: relative; }
 

Sperber

Active member
#15
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.