MyBB Community Forums

Full Version: Question about background color and width
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello everyone,

I'm not very skilled at CSS, or anything code related for that matter I've been slowly working my way through editing the default template. I just did it by selecting "Create Theme" and then making  a corresponding Template Set and linked the two. From there I've been editing the Global.css and template files of the newly created theme. (hopefully this is correct.)

I digress, what I would like to do is this. http://therustyspittoon.com/images/test.png

Inside the lines I would like to keep the white background, outside of the lines I would like a darker color. Is there a easy way to achieve this or is? or is this something difficult to do? I really have no point of reference in terms of difficulty. I've been able to fiddle my way through most of everything to this point with help from Google here and there, but I'm completely lost on this.

In advanced, thanks!  Cool
The following edits will get you a fixed width. The second part is where you edit the outer content.

Part 1

Add to the top of your header template:

<!-- custom container -->
<div id="custom-container">

Add to the bottom of your footer template:

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

Add to the end of your global.css file:

/* custom css */
#custom-container {
  width:960px;
  margin: 0 auto;
  background-color:#fff;
}

Part 2

Edit the "body" class in global.css to change the outer background. Edit the #custom-container in global.css to suit your needs also.
(08-22-2015, 12:29 AM)ThemeFreaknet Wrote: [ -> ]The following edits will get you a fixed width. The second part is where you edit the outer content.

Part 1

Add to the top of your header template:

<!-- custom container -->
<div id="custom-container">

Add to the bottom of your footer template:

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

Add to the end of your global.css file:

/* custom css */
#custom-container {
  width:960px;
  margin: 0 auto;
  background-color:#fff;
}

Part 2

Edit the "body" class in global.css to change the outer background. Edit the #custom-container in global.css to suit your needs also.

That is amazing, thank you it worked like a charm!  Big Grin

EDIT EDIT:

Never mind, It fixed itself after I cleared the cache a few times.

EDIT:

Actually, there seems to be one small issue at the bottom of my footer here.
http://therustyspittoon.com/images/footer.png

Let me know if you need more info. Big Grin
(08-22-2015, 01:47 AM)Evanonian Wrote: [ -> ]That is amazing, thank you it worked like a charm!  Big Grin

EDIT EDIT:

Never mind, It fixed itself after I cleared the cache a few times.

EDIT:

Actually, there seems to be one small issue at the bottom of my footer here.
http://therustyspittoon.com/images/footer.png

Let me know if you need more info. Big Grin

I don't see an error with your footer on the live site?

Never mind. I didn't read your post right.
When you place a link to your forum, it can be found easily I think.

When it is a table there in the footer template, than it is most probably a colspan of a td there.
The #custom-container is probably set smaller than one of your inner containers. You could try editing global.css again for any containers that have a fixed width bigger than what you set.

Find:

.wrapper {
    width: 85%;
    min-width: 970px;
    max-width: 1500px;
    margin: auto;
}

Replace with:

.wrapper {
    margin: auto;
}

Find:

#container {
    color: #333;
    text-align: left;
    line-height: 1.4;
    font-family: Tahoma,Verdana,Arial,sans-serif;
    font-size: 13px;
    margin: 0px;
    min-width: 990px;
}

Replace with:

#container {
    color: #333;
    text-align: left;
    line-height: 1.4;
    font-family: Tahoma,Verdana,Arial,sans-serif;
    font-size: 13px;
    margin: 0px;
}
(08-22-2015, 05:06 PM)ThemeFreaknet Wrote: [ -> ]The #custom-container is probably set smaller than one of your inner containers. You could try editing global.css again for any containers that have a fixed width bigger than what you set.

Find:

.wrapper {
    width: 85%;
    min-width: 970px;
    max-width: 1500px;
    margin: auto;
}

Replace with:

.wrapper {
    margin: auto;
}

Find:

#container {
    color: #333;
    text-align: left;
    line-height: 1.4;
    font-family: Tahoma,Verdana,Arial,sans-serif;
    font-size: 13px;
    margin: 0px;
    min-width: 990px;
}

Replace with:

#container {
    color: #333;
    text-align: left;
    line-height: 1.4;
    font-family: Tahoma,Verdana,Arial,sans-serif;
    font-size: 13px;
    margin: 0px;
}

Thank you, one more question.

Is there a way that you know of to add padding to the header here http://therustyspittoon.com/forums/ to look like that of my wordpress page here http://therustyspittoon.com

You've been so helpful!