[CSS] Border Around Forum

[Shrike]

As proof of how much easier V5 is for customising your forum, the old Border Around Forum code can be neatly achieved with just a single line of CSS. To add this, go to Themes > Advanced Styles and Colors > Style Sheet (tab). Wait for it to load and then scroll to the bottom of the style sheet and add this:

/* border around forum */
#wrapper {background-color: @container_inner_border_color; margin-bottom: 10px; padding: 1.3em;}

• The background-color is set to use the "Inside Borders" colour at the moment but you can change this to one of the other theme variables (found at the top of the style sheet). You can also change it directly to a specific colour (eg. #D5E5B5) if you want.
• The padding is currently set to 1.3em (which is 1.3 times the default font size, normally 13px, so should be 17px). You can, of course, change this to a specific width if you want. You can use multiple values in the order "top right bottom left" if you want different width borders or no border (just use 0).
• The bottom margin is set to 10px, this provides a gap between the background and the bottom ad.

Want head/base images? See how to add multiple backgrounds in CSS and simply use the background-position property to position them where you want. Note that multiple backgrounds don't work in IE 8 and below so they'll miss out on some eye candy (they'll be able to see the first image at least, so if you only have a footer image then they'll be fine).

FAQs

• Put top advert outside border around forum
• Put bottom advert inside border around forum
• Semi-transparent background
• To add rounded corners, add .rounded-corners(5px); (including . at the start!) to the CSS, changing the 5px to the size you want.
• Add an outer border using border: 2px solid #000; changing width/style/color to suit.

[spiceelicious]

Great instructions. I've tried it on all my themes and it works great.

[TIKOLICIOUS]

THANK YOU! I had been fiddling with the border around the forum code all week because I hadn't looked at the CSS for the actual skin. Although, even if I did, I think I would have still been confused. LOL

Here's what I got when I added borders and played with the radius!

/* curved border around forum*/
#wrapper {background-color: @container_inner_border_color; width:1000px; padding: 7px;
   border-radius: 1em 20em 1em 1em;-moz-border-radius: 1em 20em 1em 1em;-webkit-border-radius: 1em 20em 1em 1em;
   border: 10px solid;
}

[Angelic Girl]

Thank you so much for posting this, so easy. :3

[adam12345]

I was wondering if you could help me.

I've applied the code above and edited some coding to include the advert below and the proboards links. However there's a line with the background showing and I can't seem to find what's causing this.

edforumtest.freemessageboards.com/

Many Thanks

[Shrike]

Nov 13, 2012 12:21:05 GMT -8 adam12345 said:

I was wondering if you could help me.

I've applied the code above and edited some coding to include the advert below and the proboards links. However there's a line with the background showing and I can't seem to find what's causing this.

edforumtest.freemessageboards.com/

Many Thanks

It doesn't look like you edited the right part of the templates. You only need to adjust the Forum Wrapper template by moving the closing div tag to include the advert and footer links. You'd want to remove the red part below and add it back in where the blue part shows:

$[content]
$[shoutbox]
</div>
</div>
$[footer]
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</div>
</body>
</html>

[adam12345]

Thanks for that Shrike it worked.

[sethron]

Now if only there were a way to apply it to individual boards separately that I could figure out.

[Shrike]

Nov 16, 2012 9:40:07 GMT -8 sethron said:

Now if only there were a way to apply it to individual boards separately that I could figure out.

It depends on how many boards you want to apply it to. If you just wanted it on one or two, don't put it in your style sheet. Instead, put it inside these two tags:

<style type="text/css">put the code here</style>

Then put it in the Header for the board you want it to apply to.

If you wanted to have something like a different style for every board, it might be easier to manage using a plugin which, with the server-side templating we can now use, wouldn't be any different performance-wise than inserting it into the headers by hand would be. I could look into making something like that if you wanted?

[Relic]

Is there a way to make this go all the way down? So that the bottom would be similar to how the top looks?

For instance, the table starts at the very very top of the page. However, it cuts off before the ad on the bottom of the page, and I'd like it to go to the very very bottom of the page.

Hopefully I'm explaining this alright?

[TornadoGTS]

Nov 16, 2012 19:14:43 GMT -8 Relic said:

Is there a way to make this go all the way down? So that the bottom would be similar to how the top looks?

For instance, the table starts at the very very top of the page. However, it cuts off before the ad on the bottom of the page, and I'd like it to go to the very very bottom of the page.

Hopefully I'm explaining this alright?

From a CSS standpoint, you could make the wrapper not have a bottom border, and the footer not have a top border, then with the right margining they would be connected and look like one solid piece. If you post your URL i could mess with the CSS to give you a preview of what im talking about.

[sethron]

Nov 16, 2012 10:38:47 GMT -8 Shrike said:

Nov 16, 2012 9:40:07 GMT -8 sethron said:

Now if only there were a way to apply it to individual boards separately that I could figure out.

It depends on how many boards you want to apply it to. If you just wanted it on one or two, don't put it in your style sheet. Instead, put it inside these two tags:

<style type="text/css">put the code here</style>

Then put it in the Header for the board you want it to apply to.

If you wanted to have something like a different style for every board, it might be easier to manage using a plugin which, with the server-side templating we can now use, wouldn't be any different performance-wise than inserting it into the headers by hand would be. I could look into making something like that if you wanted?

I tried doing it simple like that, and yet it didn't pick up. It seemed to be ignoring anything in the style tags on the headers and footers... If you could make a plug in that would allow me to easily edit different options to different boards for colors and things, I would be incredibly appreciative. I was very good with V4, but V5 seems to be kicking my butt.

Both you and another have told me a plug-in is the answer, so I put up a request that kind of spells out what I need much clearer:

support.proboards.com/index.cgi?action=display&board=pluginrequests&thread=431798

[Relic]

Nov 17, 2012 0:40:25 GMT -8 TornadoGTS said:

Nov 16, 2012 19:14:43 GMT -8 Relic said:

From a CSS standpoint, you could make the wrapper not have a bottom border, and the footer not have a top border, then with the right margining they would be connected and look like one solid piece. If you post your URL i could mess with the CSS to give you a preview of what im talking about.

1993test.freemessageboards.com/

Thanks for helping!

[TornadoGTS]

Nov 17, 2012 9:59:38 GMT -8 Relic said:

Nov 17, 2012 0:40:25 GMT -8 TornadoGTS said:

Nov 16, 2012 19:14:43 GMT -8 Relic said:

From a CSS standpoint, you could make the wrapper not have a bottom border, and the footer not have a top border, then with the right margining they would be connected and look like one solid piece. If you post your URL i could mess with the CSS to give you a preview of what im talking about.

1993test.freemessageboards.com/

Thanks for helping!

Actually just thought of something, you could go to Layout Templates>Forum Wrapper and find the part that says $[footer] and move it above the </div> thats right above it.

[Relic]

I moved the $[footer] above the </div>, and that worked wonders!

Thank you, again! <3