MyBB Community Forums
Template Gradient - Printable Version

+- MyBB Community Forums (
+-- Forum: Community Archive (
+--- Forum: Archived Forums (
+---- Forum: Archived Development and Support (
+----- Forum: MyBB 1.2 Series (
+------ Forum: MyBB 1.2 General Support (
+------ Thread: Template Gradient (/thread-24984.html)

Template Gradient - st0rmer - 2007-10-23

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

RE: Template Gradient - st0rmer - 2007-10-26

Does anyone know how i can do this?

RE: Template Gradient - jzetterman - 2007-10-26

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!

RE: Template Gradient - st0rmer - 2007-10-26

Take a look at the attached screenshot. There is a small gradient right next to the main forum container


RE: Template Gradient - Lopalong - 2007-10-27

Hi stOrmer,

This will add the shadows for you. Toungue

Header Template:

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


<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

RE: Template Gradient - st0rmer - 2007-10-27

Thanks lopalong! I appreciate your effort, i didn't know about shadows before Smile

RE: Template Gradient - Lopalong - 2007-10-27

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

RE: Template Gradient - st0rmer - 2007-10-27

OK, i'll do that in the future Wink (edited my previous post too)