MyBB Community Forums

How do I make my Forum's background transparent.. something like friendster.com! sorry for my bad english. ^_^ hope you'll understand.

Go to: ACP > Themes > Your theme > Edit > global.css > Edit in Advanced Mode > and find;

#container{
..
}

and Add the following code in "background attribute"

 rgba(255, 255, 255, 0.5);

For example, if your #container style is like this;

#container {
	width: 95%;
background: #fff;
	border: 1px solid #e4e4e4;
	color: #000000;
	margin: auto auto;
	padding: 20px;
	text-align: left; /* IE 5 fix */
}

After changing it becomes;

#container {
	width: 95%;
background: rgba(255, 255, 255, 0.5);
	border: 1px solid #e4e4e4;
	color: #000000;
	margin: auto auto;
	padding: 20px;
	text-align: left; /* IE 5 fix */
}

rgba doesn't work on all browsers yet.
I would suggest using a transparent image as you background. So in your image editor (Photoshop, The Gimp, ...) create a 30 by 30 pixels image and fill it with the color you want. Now change the opacity to 50% or something and save the image to a PNG file (let's say bg.png). Upload the image to the image folder. Now edit the global.css stylesheet form your theme via AdminCP > Templates & Style > Themes > (your theme) > global.css > Advanced Mode. Now search for (it can be different for your theme):

#container {
	width: 95%;
	background: #fff;
	border: 1px solid #e4e4e4;
	color: #000000;
	margin: auto auto;
	padding: 20px;
	text-align: left; /* IE 5 fix */
}

and replace with:

#container {
	width: 95%;
	background: transparent url(images/bg.png);
	border: 1px solid #e4e4e4;
	color: #000000;
	margin: auto auto;
	padding: 20px;
	text-align: left; /* IE 5 fix */
}

Look at the background attribute.

exactly! but I have a problem when I use a big photo..

[attachment=22690]

Those with the red lines only appears the image..

How can I make the tables of the board or category transparent?
need help..

---

anyone?! need help about this!

Can I have a link to your website? I will see what elements need to be changed.

(2011-05-12, 08:57 AM)Aries-Belgium Wrote: [ -> ]Can I have a link to your website? I will see what elements need to be changed.

this is my website, www.wwe-philippines.tk .. hope you can help me, ^_^

I think this solution is the easiest. It worked for me.

Here is what my container looks like:

#container {
width: 98%;
color: #000000;
border: 0px solid #e4e4e4;
margin: auto auto;
padding: 10px;
text-align: left;
}

That makes the container transparent but the body then shows through. So this is what I have for body:

body {
color: #000;
text-align: center;
line-height: 1.4;
font-family: Verdana, Arial, Sans-Serif;
font-size: 13px;
}

Note that neither has a background line. That is what makes them "transparent'. Since the container and body background are now gone, I widened the forum a bit by reducing the padding to 10px and increasing the width to 98%.