[How To?] Change Default theme background to look like MyBB support forum

[mnikolic007]

I want the forum to have a pattern bg, with white space in the middle between bg and the forum, just like this support forum. but after searching and trying things suggested in this forum I managed to change the overall background only, not reproduce the exact look. The white space would either be too big regardless of what I set in wrapper, or the whole site would look weird.

What exactly needs to be set in body, container, wrapper in global.css so I achive the same look as this forum?

[Michael2014]

I want the forum to have a pattern bg, with white space in the middle between bg and the forum, just like this support forum. but after searching and trying things suggested in this forum I managed to change the overall background only, not reproduce the exact look. The white space would either be too big regardless of what I set in wrapper, or the whole site would look weird.

What exactly needs to be set in body, container, wrapper in global.css so I achive the same look as this forum?

Drop this in your global css #Container

min-width: 990px;
background-image: url('http://turbo.designwoop.com/uploads/2012/10/subtle_background_textures_05-580x308.jpg');


let us know if it works for you and good luck!

[mnikolic007]

Nothing changes, background is still white.

[ErraticFox]

Nothing changes, background is still white.

Could you provide the websites url?

[mnikolic007]

Nothing changes, background is still white.

Could you provide the websites url?

http://forum.laidbackguild.com/

[Destroy666]

1. The line should actually be:

background: #FFF url(http://turbo.designwoop.com/uploads/2012/10/subtle_background_textures_05-580x308.jpg) repeat;

Also, it's much better to download the image, upload it to your server and then use a relative URL. Otherwise, if that server will remove the image, you'll end up with 404 image request errors.
2. And you should add it to #content in global.css, not #container.

After fixing both, CTRL + F5 the index page.

[mnikolic007]

1. The line should actually be:

background: #FFF url(http://turbo.designwoop.com/uploads/2012/10/subtle_background_textures_05-580x308.jpg) repeat;

Also, it's much better to download the image, upload it to your server and then use a relative URL. Otherwise, if that server will remove the image, you'll end up with 404 image request errors.
2. And you should add it to #content in global.css, not #container.

After fixing both, CTRL + F5 the index page.

This works, and I managed to get the same result myself before also, but it goes trough all content in the middle, and that should be white and there should be some white padding between the forum and background, like on this forum.

I made an image to illustrate it better:

[Destroy666]

Then you have to lower #content's width (for example width: 85%;) and add the background line back to #container.

[mnikolic007]

Then you have to lower #content's width (for example width: 85%;) and add the background line back to #container.

Tried it, doesn't do anything. It just moved everything to the left it's messed up a bit now. Here is what's in my global for container, wrapper, content & body:

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

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

#content {
	background: #FFF url(images/p4a.png) repeat;
	width: 85% !important;
	padding: 20px 10px;
	overflow: hidden;
}

body {
	background: #fff;
	color: #333;
	text-align: center;
	line-height: 1.4;
	margin: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
	overflow-y: scroll;
}

[Destroy666]

You didn't do the 2nd part...

and add the background line back to #container.

Then center it by adding margin: 0 auto; to #content and reset the background by adding background: #FFF; to #content too. CTRL + F5 and it will look like this: https://docs.google.com/file/d/0B6pgReiH...p=drivesdk