[Z]{tutorial} Adding side images

[Zenko]

Someone ask help about adding images on the side the board so I made this tutorial to help that person and everyone out. Hope you aprove ^^

~~~

This tutorial will teach you how to add side images around your forum. Here is an example

^skin done by extremepixels not me. Is just a screenshot to show you an example.


Let's begin...

Loging to admin cp and go to your template manager. myBB Control Panel » Template Manager
expand your skin and look for header click "change original".

Find:

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

Above add:

<table width="850px" cellpadding="0" cellspacing="0">
<tr>
<td width="100px" class="left_img" valign="top"><img src="{$theme['imgdir']}/left_image.gif" width="100px" alt="" />
</td>
<td>     

save.

Now edit footer page (in your template mangager *same page as header*)

Find:

<br class="clear" />
		</div>
		</div>

Below Add:

</td>
<td valign="top" width="100px" class="right_img"><img src="{$theme['imgdir']}/right_image.gif" width="100px" alt="" />
</td>
</tr>
</table>
  

what we did is added a table covering the whole forum and making three TD's (1, left image. 2, the forum (header, userlinks, forum sections etc...) 3, right image.


Now go to your Theme manager. myBB Control Panel » Theme Manager and edit your theme. Scroll to dot the bottom and where the box say's "additonal css" add the code below:

.left_img { 
	background: url(images/left_image.gif);
	}
.right_img { 
	background: url(images/right_image.gif);
	}

And your set. Just remember to replace the images names and the image sizes. You can get more creative and add classes to the tables and such but this is just a basic example. Before I forget remember that you create your side images and put them on the "images" folder. (www.yoursite.com/myBB/images). If you want to place them differently just add the folder name with a back slash before the the gif image name. Like this: (images/skin_name/right_image.gif)

Hope this helped out a bit and if you find yourself lost or have suggestions/comments feel free to post them.

~Z

[artsu]

Great tut! Just what I was looking for! Going to try this when I get everything else on my design ready.

[zaher1988]

Ah nice.. now i dont have to explain everytime lead them to here

[kingvarun]

Sorry but this doesnt work for me

[Zenko]

EDIT: I see I made a mistake on my css, here is the correct css:

.left_img {
    background: url(images/left_image.gif);
    }
.right_img {
    background: url(images/right_image.gif);
    }

hope this fix your user.

Btw, I just made the code off my head so I see why I should test first XD

~Z

[kingvarun]

Still doesnt work for me

[Zenko]

well if it doesn't work can you say what is wrong? Because that will help.

~Z

[Carey]

how well will this look if i'm using side boxes?

[B-P]

well if it doesn't work can you say what is wrong? Because that will help.

~Z

It only works in internet explorer, and hes probably using firefox

[EviL]

it's working only IE....