XF 1.3 Ad a section (adWords block) OUTSIDE Xenforo via CSS?

[Mr. Strange]

I have an active forum at kaijucombat.com/community/ - I've been very happy with Xenforo. Recently the community decided to allow ads on the site - which has been a GREAT success thus far. I used the built-in ad location template to put an ad under the top breadcrumbs. Easy.

But what I REALLY want is to put a vertical ad banner on the left / right of the forums. On a PC screen, there's a ton of unused space on either side of the forums.

I'm not very experienced in css etc, but I'm a fairly sharp fellow, and I figured I could work out how to put an ad banner there. I found the root css, and added a new section which created an ad banner. Sweet!

Unfortunately, this banner was anchored to the right-hand side of the screen, so if the window size were reduced, it would cover a bunch of the right-hand side of the forums. And it looked like a mess on mobile.

What I want is a block that sits to the right of the main forum area, and wouldn't overlap the forums even if the screen became too narrow to see this new block. I've got six (6) units of goodwill ready to deliver to any helpful person who can give me the secret to producing this layout properly!

EDIT: So, I see this question has been asked without answer before... fingers crossed that my luck is better! That first link has a really great image, in case there was any confusion about my goal.

 

[Mr. Strange]

Ouch. 900 views and not a single reply?

I know this can't be terribly difficult - maybe the layout / format folks hang out in a different forum section?

 

[Mr. Strange]

Ok, I'm not giving up on this. So instead of asking how to do this, I guess I'll just work through it on my own, and talk about what I'm doing. Maybe something I'm saying will prompt some help!

Looking at PAGE_CONTAINER I see this broad structure:

<div id="headerMover">

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

<div id="content">

<div class="pageWidth">

<div id="pageContent"></div>

<div id="mainContainer">

<div id="mainContent"></div>​

</div>
<aside>

<div class="sidebar"></div>​

</aside>​

</div>​

</div>​

</div>

<header></header>
</div>

<div id="rightAds"></div>
<div id="leftAds"></div>
----

Those two <div> sections at the bottom ("rightAds" and "leftAds") are fields I added. Structured like this, they show up at the bottom of my forum page. Ad content is loading fine - I just need to position them.

I have no direct experience using .css, but I know my way around code in general. I suspect that somewhere we should have #defined "style" definitions for "content" "pageContent" etc. I think that might be the proper location to add new "rightAds" and "leftAds" definitions.

But searching templates for #pageContent or #mainContent gives me no results. I feel like the file public.css is where I should find these things... And that includes EXTRA.css - so maybe I should add definitions there? But since I don't see #defines - should I be positioning my ads via some other method?

 

[Mr. Strange]

So - adding the following bits to EXTRA.css is getting me in the right direction:

#rightAds {

padding:15px;
float:right;​

}
#leftAds {

padding:15px;
float:left;​

}
----
Next step is to try to set them to some absolute X position, and get them near the top of the page, instead of the bottom. My hope is that I can do that through pure .css, rather than moving the <div> declarations to the top of the PAGE_CONTAINER info. Suggestions welcome!

 

[Mr. Strange]

Ok, I'm nearly done. My EXTRA.css now looks like this:

#rightAds{
position: relative;
padding:10px;
float: right;
left: 100px;
}
#leftAds{
position: relative;
padding:10px;
float: left;
left: -100px;
}

So I have them positioned correctly, EXCEPT that instead of a fixed "left" value, I need to querry the current position of the forum content within the browser window. Ads are 300px wide, so if "Forum" were the value containing the top-left coordinate of the forum content, I could use:

left: Forum.left - 300px;

I thought I could get this value using the offset() function, as in var Forum=$("mainContent").offset();
But that's not working. Any thoughts about how to get this last value?

 

[Bram]

Must be annoying to speak to yourself here I wish I could help you but I haven't got a clue.

Hopefully some of the wizards here can help you out.

 

[Mr. Strange]

And I've got it working!

(Check out http://kaijucombat.com/community/index.php ) to see how great it looks!

So assuming you have your adsense account setup, generate the HTML for 2 ads. We'll call this "Ad Code Left" and "Ad Code Right."

Now there are just three simple changes you need to make to your xenforo templates:

1 - Edit PAGE_CONTAINER
Browse in Xenforo to PAGE_CONTAINER, and insert the following text:

</div>
------- You are inserting the bit between these lines! --------
<div id="LeftAds">
Ad Code Left
</div>
<div id="RightAds">
Ad Code Right
</div>
------- You are inserting the bit between these lines! --------
</div>
</div>

<header>
<xen:include template="header" />
<xen:edithint template="navigation" />
<xen:edithint template="search_bar" />
</header>

(I've left the "header" bit at the bottom, so you can find the correct location within the PAGE_CONTAINER file.)

2 - Edit EXTRA.css
Save and exit PAGE_CONTAINER, and browse to EXTRA.css, and insert the following bit aynwhere:

#RightAds {
right: -315px;
top: 0;
position: absolute;
}

#LeftAds {
left: -315px;
top: 0;
position: absolute;
}

3 - Edit public.css
Save and exit EXTRA.css, and browse to public.css, and find the bit which begins with ".pageWidth"

Inside ".pageWidth" you'll see a line which says "margin: auto;" - simply insert a new line after that which says "position: relative;" (Don't forget the semicolon!)

Save and exit. You are now good to go!

 

[Mr. Strange]

If an admin would please change the title of this thread by adding [Solved!] to the beginning, I think it would help folks find this info again. Since at least a dozen people before me have come here looking for this information, it's probably worth conserving.