[Forum] Make sidebar contents overflow

[JackieChun]

The sidebar in our forum contains a square AdSense ad, and I would like the ad to ignore sidebar's padding/margins and sit on top of them instead of being covered on the sides. That way the sidebar could be much narrower. Right now it's accommodating both the width of the square ad + margins/padding so it's too wide.

What can be added to the forum block or javascript itself to accomplish that?

[Riasat]

Can't help without seeing the actual issue.

[JackieChun]

Link

[Riasat]

Edit the forum block and use a new template instead of block_html. e.g., block_my_sidebar_ad

Then add a template with that name from style manager. Put your ad codes with necessary HTML in that template. Most likely, a <li> wrap would work just fine.

[JackieChun]

Riasat, I'm not familiar with the template creation process. Could you tell me exactly what tags it needs to have in order to house a single javascript ad?

[Riasat]

admincp > styles > add new template > give it a name like block_my_sidebar_ad

admincp > styles > edit templates > block templates > block_my_sidebar_ad

in there put,
<li>
your_ad_code_goes_here
</li>

save.

Put block_my_sidebar_ad as template name in the forum block you created for the ad.

[JackieChun]

Thank you, I will try that. Just for my own knowledge, how does a template accomplish this when an html block does not?

[Riasat]

The html block you create by default uses block_html template. It has some codes for the border and etc. By simply using <li> instead of those, you can probably get what you want.

[JackieChun]

OK, so it doesn't work when it's just wrapped in <li> tags. The block just doesn't show up in the sidebar. So I decided to take block_html and cut it down element by element until it has the bare minimums left.

Here's what it was like before:

<li>
<div class="block smaller">
<div class="blocksubhead">
<a class="collapse" id="collapse_block_html_{vb:raw blockinfo.blockid}" href="{vb:raw relpath}#top"><img alt="" src="{vb:stylevar imgdir_button}/collapse_40b.png" id="collapseimg_html_{vb:raw blockinfo.blockid}"/></a>
<span class="blocktitle">{vb:raw blockinfo.title}</span>
</div>
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
{vb:raw content}
</div>
</div>
</div>
<div class="underblock"></div>
</li>

And here's what i have left with everything still working.

<li>

<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
{vb:raw content}
</div>

</li>

Cutting down all that stuff has helped reduce the empty stuff on the sides by about 10 pixels, but there's still a lot more that can go. Any ideas?

[Riasat]

Looking kinda ok to me. Is there anything specific you want to be changed?

[JackieChun]

I need the ad to match the entire width of the sidebar, border to border.