[CB] Tri-Image Category Splitter

[Scorpian]

Alright. Well, what exactly do we have here? Well, if anybody saw my Revamped 2 template, you will already know. Every category splitter released to the public that I have seen (which is, if not close to all) have been dual-image. A head image, the boards, and a base image. That's it. This category splitter, however, is tri-image. It features a head image, a center image, the boards (overlayed onto the center image), and a base image. This will be very useful for premade templates, unique skins, etc.

The Code:
<style type='text/css'>
.headimage{
text-align: center;
}
.headimage font{
color: #F1F1F1;
}
</style>

<script type='text/javascript'>
/* Tri-Image Category Splitter by Scorpian
Copyright (c)2006 Roddy Innovations Designs
Version 1 ~ http://roddyinnovations.com */

/*=== Edit These ===*/
var hImg = 'URL_OF_HEAD_IMAGE.gif'; // The url of your head image
var hHeight = '25'; // The height of the head image

var cImg = 'URL_OF_CENTER_IMAGE.gif'; // The url of the image the boards will be overlayed on

var bImg = 'URL_OF_BASE_IMAGE.gif'; // The url of your base image
var bHeight = '10'; // The height of your base image

var sWidth = '90%'; // The width of the overlayed table
var gHeight = '20'; // The height of the gap between the categories

var hCat = 'no'; // Show the category text on the head image? 'yes' or 'no'.
var fNrow = 'yes'; // Show the forum name row? 'yes' or 'no'.
var mArRow = 'yes'; // Show the mark as read bar? 'yes' or 'no'.

/*=== Do Not Edit ===*/
if(location.href.match(/action=home$/i) || !location.href.match(/(action|board)=/i)){
document.write("<script type='text/javascript' src='http://roddyinnovations.com/pbhacks/trisplitter.js'></scr" + "ipt>");
}
</script>
This code IS cross browser. It has been tested and works perfectly in Firefox 1.5 and Internet Explorer 6.

Editing the Code:

First off, the code goes in your main footers. You'll notice a block of CSS at the very top.
<style type='text/css'>
.headimage{
text-align: center;
}
.headimage font{
color: #F1F1F1;
}
</style>
You only need to edit this if you're putting the category name text into the head image. If you're not, ignore it. However, if you are, pay attention.

.headimage{
text-align: center;
}

This is where you add attributes to the head image cell itself. You can modify the padding, align, etc. You can use this, along with the next block, to precisely place the category text wherever you want.

.headimage font{
color: #F1F1F1;
}

This is where you add attributes to the head image text. You can change its color, size, font weight, etc.

Simple knowledge of CSS is required to edit this part. If you need help with anything, just reply in this thread.

Next up is the head image information. It is in this code block:

var hImg = 'URL_OF_HEAD_IMAGE.gif'; // The url of your head image
var hHeight = '25'; // The height of the head image

The first variable is the url of your head image. Be sure to put in between the quotes, and NOT AFTER THE //! The second variable is the height of the head image. Make sure you put it between the quotes. DO NOT add 'px' to the end or use percents.

Now for the center image.

var cImg = 'URL_OF_CENTER_IMAGE.gif'; // The url of the image the boards will be overlayed on

This image is the url of the center part of the board area. It is what the boards will be overlayed onto. In other words, it's the side image. Place the url between the quotes.

Now for the base image options.

var bImg = 'URL_OF_BASE_IMAGE.gif'; // The url of your base image
var bHeight = '10'; // The height of your base image

This is pretty much identical to the head image information. The url of your base image is the first variable. The height of the image is the second.

Alright, now for the tricky part.

var sWidth = '90%'; // The width of the overlayed table
var gHeight = '20'; // The height of the gap between the categories

The first variable is how wide you want the table overlayed on the center image to be. This is the table that will contain the forum name row, the boards, etc. It MUST be less than your forum width. If it's not, it defeats the purpose of the code. It can be either a percent, or numeric value. DO NOT add 'px' to the end.

The second variable is simple. It's the height of the gap you want between the categories. No, it can't be a percent. Yes, it can be a number. Yes, it can be 0.

Last customization options are the display options.

var hCat = 'no'; // Show the category text on the head image? 'yes' or 'no'.
var fNrow = 'yes'; // Show the forum name row? 'yes' or 'no'.
var mArRow = 'yes'; // Show the mark as read bar? 'yes' or 'no'.


ALL of those three variables have 2, and ONLY 2 options. They can either be 'yes' or 'no'. Quotes ARE required around the word. The first variable is whether or not you want the category name shown on the head image. If you choose 'yes', the category text will be shown on the head image, and not in the center table. Also, if you choose 'yes', you'll want to edit the CSS block I mentioned earlier.

The second variable is whether or not you want the forum name row shown. The third is whether or not you want the mark as read bar to be shown.