[CB]SlipStream Splitter w/Different H/B/BG Images

[(¯`•DregondRahl•._)]

People like the new style with the head, base and background images, some call it tri image?, what this code does is add different head/base/background images for each category. It should be in pure DOM.

For Each category thier is an ID, using CSS you just add the id with head/base in the end. you can ajust the width, and the height of the Image using CSS as shown below.

MAIN HEADDER


<style type="text/css">
<!--

.CATIDhead {
        background-image: url(URL OF HEAD IMAGE);
           height: 34px;
        width: 725px;
}

.CATIDbase {
        background-image: url(URL OF BASE IMAGE);
        height: 34px;
        width: 725px;
}
.CATIDbg {
        background-image: url(URL OF BG IMAGE);
        width: 725px;
}

-->
</style>



CATID : Enter the catagory id, it can be found by entering into a board inside that category and clicking the category name from the nav bar on top in this case its 'General' so when you click on it you'll be directed to a /index.cgi#general where general is the category ID.

in this case ".generalhead" & ".generalbase" & ".generalbg"




MAIN FOOTER


<script type='text/Javascript'>
<!--

/* SlipStream Category Splitter w/Different head/base images - DregondRahl
Donot Repost this code or edit this copyright
support.proboards.com */


var iTableWidth = "97%";
var catSpacing = "30px";

//Do not Edit Below

var table = document.getElementsByTagName('table');
var div = document.createElement('div');
var divA = document.createElement('div');
      divA.style.height = catSpacing ;

if(location.href.match(/action=(change|home)/i) || !location.href.match(/action=/i)){
      for(i=0; i<table.length; i++){
            if(table.cellPadding =='4' && table[i-1].className =='bordercolor' && table.rows[0].cells[0].firstChild.innerHTML.match(/Forum\sName/i)){
                  for(r=1; r<table.rows.length; r++){

                        if(table.rows[r].getElementsByTagName('a')[0].name){

                              var name = table.rows[r].getElementsByTagName('a')[0].name
                              var divH = document.createElement('div');
                              var divB = document.createElement('div');
                                    divH.className = name+'head';
                                    divB.className = name+'base';

                              var tabA = document.createElement('table')
                                    tabA.appendChild(document.createElement('tbody'));
                                    tabA.cellPadding = '0';
                                    tabA.cellSpacing = '0';
                                    tabA.width = '100%';
                                    tabA.id ='daSplit';

                              var tr = document.createElement('tr');
                                    tr.appendChild(document.createElement('td'));
                                    tr.firstChild.className = name+'bg';

                              var tab = document.createElement('table');
                                    tab.width = iTableWidth;
                                    tab.className = 'bordercolor';
                                    tab.cellPadding = '4';
                                    tab.cellSpacing = '1';
                                    tab.align ='center';

                              var cat = table.rows[r].cells[0].lastChild;
                                    tab.appendChild(document.createElement('tbody'));
                                    tab.firstChild.appendChild(table.rows[0].cloneNode(true));

                              var title = tab.rows[0].cells[0].firstChild.firstChild;
                                    title.parentNode.replaceChild(cat,title);

                              tr.firstChild.appendChild(tab);
                              tabA.firstChild.appendChild(tr);
                              div.appendChild(divA.cloneNode(true));
                              div.appendChild(divH);
                              div.appendChild(tabA);
                              div.appendChild(divB);


                        } else if(table.rows[r].cells[4]){
                              tab.lastChild.appendChild(table.rows[r].cloneNode(true));
                        }
                  }

                  table[i-1].parentNode.replaceChild(div,table[i-1]);
                  break;
            }
      }
}
//-->
</script>




var iTableWidth = "97%";
var catSpacing = "30px";


catSpacing is for the space between each cat..well duh.

iTableWidth : in this categroy spliter its IMPORTANT to stay 97% or less acording to the backround image, otherwise it wont show.
if you need any help you can ask in this thread, it has to be less than forum width.


Special thanks to Chris and Peter when i was practicing DOM


Note: i know long name >.< i lack creativity.