Jump to the post that solved this thread.
Solved: 6 Years, 5 Months, 2 Weeks ago [How To?] Change Default theme background to look like MyBB support forum
#1
Solved: 6 Years, 5 Months, 2 Weeks ago
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?
Reply
#2
Solved: 6 Years, 5 Months, 2 Weeks ago
(2014-10-27, 02:17 PM)mnikolic007 Wrote: 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!
Hey man, what's up?
Reply
#3
Solved: 6 Years, 5 Months, 2 Weeks ago
Nothing changes, background is still white.
Reply
#4
Solved: 6 Years, 5 Months, 2 Weeks ago
(2014-10-27, 04:09 PM)mnikolic007 Wrote: Nothing changes, background is still white.

Could you provide the websites url?
Reply
#5
Solved: 6 Years, 5 Months, 2 Weeks ago
(2014-10-27, 06:22 PM)ErraticFox Wrote:
(2014-10-27, 04:09 PM)mnikolic007 Wrote: Nothing changes, background is still white.

Could you provide the websites url?

http://forum.laidbackguild.com/
Reply
#6
Solved: 6 Years, 5 Months, 2 Weeks ago
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.
Reply
#7
Solved: 6 Years, 5 Months, 2 Weeks ago
(2014-10-27, 07:12 PM)Destroy666 Wrote: 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:
[Image: BDNEakK.jpg]
Reply
#8
Solved: 6 Years, 5 Months, 2 Weeks ago
Then you have to lower #content's width (for example width: 85%;) and add the background line back to #container.
Reply
#9
Solved: 6 Years, 5 Months, 2 Weeks ago
(2014-10-27, 07:36 PM)Destroy666 Wrote: 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;
}
Reply
#10
Solved: 6 Years, 5 Months, 2 Weeks ago
You didn't do the 2nd part...

(2014-10-27, 07:36 PM)Destroy666 Wrote: 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
Reply
Jump to the post that solved this thread.


Forum Jump:


Users browsing this thread: 1 Guest(s)