MyBB Community Forums

Full Version: Template Gradient
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
How do i add a gradient to either side of my forum, like this forum has done. I can set a fixed width, and put a fixed image, but i don't get how this forum has a gradient going in different directions?

I'd appreciate any help, Thanks
Does anyone know how i can do this?
Do you mean the pattern that they have on either side, it's not a gradient. A gradient is what you see as the background for the area where the title of this thread is.

To do it, go into your Admin Panel and navigate to the Themes section. Choose edit theme style on the appropriate theme and then in the Body section, in the background box, replace #fff with this:

#fff url('images/your_image_here.gif') no-repeat

Note that you change where it says "your_image_here.gif" to the filename of your image. Also, you can change "no-repeat" to "repeat-x" or "repeat-y" depending on if you want the image to repeat on the x axis or the y axis (left and right or up and down). You can also just use "repeat" if you want it to repeat left and right and up and down. Hope that helps!
Take a look at the attached screenshot. There is a small gradient right next to the main forum container

[attachment=7773]
Hi stOrmer,

This will add the shadows for you. Toungue

Header Template:

AFTER <a name="top" id="top"></a>

ADD;

<div id="shadow-left">
<div id="shadow-right">

Add the CODE below to the Additional Css.

#shadow-left {
	background-image: url(images/YOUR THEME/pageshadow_left.png);
	background-repeat: repeat-y;
	background-position: left;
}
#shadow-right {
	padding: 0px, 30px, 15px, 30px;
	background-image: url(images/YOUR THEME/pageshadow_right.png);
	background-repeat: repeat-y;
	background-position: right;
}

Add the images below to your theme image file. Big Grin
Thanks lopalong! I appreciate your effort, i didn't know about shadows before Smile
You can change the "little" shadow graphics to any other sized graphic or colour you wish to use. Smile

Just a friendly bit of advice:

There's no need to quote the immediate post above your own, just use "New Reply". Wink
OK, i'll do that in the future Wink (edited my previous post too)