[CB]Category Splitter w/Different Head/Base Images

[(¯`•DregondRahl•._)]

Okay, what this code does is add different head/base 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 shwon 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;
}

-->
</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"




MAIN FOOTER



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

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


var iTableWidth = "100%";
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 tab = document.createElement('table');
                                    tab.width = iTableWidth;
                                    tab.className = 'bordercolor';
                                    tab.id = 'daSplit';
                                    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);


                              div.appendChild(divA.cloneNode(true));
                              div.appendChild(divH);
                              div.appendChild(tab);
                              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 = "100%";
var catSpacing = "30px";


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

iTableWidth is a bit of an addOn, coz some people like thier categories a little thinner than other tables, but keeping it at 100% will be normal



Special thanks to Chris and Peter when i was practicing DOM