MyBB Community Forums

Full Version: Help with custom container.
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello all!


Thanks to ThemeFreak I was able to add a custom container by adding.

<!-- custom container -->

<div id="custom-container">

To the top of my Header template. And then I've added

<!-- end #custom-container -->

</div>

With that I'm able to add css to my themes global.css and adjust the width of the forum like this.
www.therustyspittoon.com/forums

#custom-container {
 width:1000px;
 margin: 0 auto;
 background-color:#fff;
}

I'm trying to add to the css and add a space between the top of the page and the header but if I add

padding-top: 20px;

It just extends the length of the container it doesn't space it out like this.
[Image: padding_header.png]

Any ideas? In advanced, thanks!


P.S. - Now that I think of it, it would be nice to space out both the header and footer. So the darker background color shows around the margin of everything in the middle.

(2015-08-25, 12:36 AM)Evanonian Wrote: [ -> ]Hello all!


Thanks to ThemeFreak I was able to add a custom container by adding.

<!-- custom container -->

<div id="custom-container">

To the top of my Header template. And then I've added

<!-- end #custom-container -->

</div>

With that I'm able to add css to my themes global.css and adjust the width of the forum like this.
www.therustyspittoon.com/forums

#custom-container {
 width:1000px;
 margin: 0 auto;
 background-color:#fff;
}

I'm trying to add to the css and add a space between the top of the page and the header but if I add

padding-top: 20px;

It just extends the length of the container it doesn't space it out like this.
[Image: padding_header.png]

Any ideas? In advanced, thanks!


P.S. - Now that I think of it, it would be nice to space out both the header and footer. So the darker background color shows around the margin of everything in the middle.

Nevermind, I figured it out! Big Grin

#custom-container {
 width:1000px;
 /*margin: 0 auto;*/
 margin-top: 20px;
 margin-bottom: 20px;
 margin-right: auto;
 margin-left: auto;
 background-color:#fff;
}