Forum Design Suggestions

[kira]

Right off of the bat there are two things that I see that I can easily fix in terms of forum design. Feel free to criticize my thoughts on this but I feel that they need to be fixed.

#1-The size of the forum. In my humble opinion it is far too wide and needs to be resized a bit.

#2-The posts are not split. It looks better on a site if the posts are split with some sort of splitter, even if it is invisible.

I can easily offer both of these codes if my help is desired with these two design objectives.

[/blockquote]

[lucas]

or, we could just give the poptart (whose kin i ate this morning :D) the codes.

1.

In order to do this, you must copy and paste this code:
<div id="wel"></div>
<script type="text/javascript">
<!--
var welcomeTable = document.getElementsByTagName("table").item(0);
document.getElementById("wel").appendChild(welcomeTable);
//-->
</script>
Paste it right under the Global Headers of your side tables code.

Also, find this portion of the code to resize the welcome table:
<script>
// Resize the welcome table - can be % or a number of pixels
document.getElementsByTagName('table')[0].style.width='95%';
</script>

change the width to, say, 700px. <3

2.

global footers.

<script type="text/javascript">
<!--

/*Post Splitter - By iAlex - Open Source*/

var iSplitHeight="30px"; //Split Height

if(location.href.match(/action=display/)){
     var iTd=document.getElementsByTagName('td');
     var i=iTd.length;
     while(--i){
           if(iTd.item(i).width=="20%" && iTd.item(i).height=="100%" && iTd.item(i).className.match(/windowbg(2)?/) && iTd.item(i).align=="left" && iTd.item(i).vAlign=="top" || iTd.item(i).colSpan=="2" && iTd.item(i).className.match(/titlebg/) && iTd.item(i).width=="100%" && iTd.item(i).parentNode.previousSibling && iTd.item(i).parentNode.previousSibling.cells[0].height=="100%" || iTd.item(i).vAlign=="middle" && iTd.item(i).align=="left" && iTd.item(i).width=="100%" && iTd.item(i).colSpan=="2" && iTd.item(i).innerHTML.match(/Admin Functions/)){
                 var iTable=document.createElement('div');
                 iTable.innerHTML='<div style="height: '+iSplitHeight+'"></div><div class="iPostSplitHead" style="background-position: center center; background-repeat: no-repeat;"></div><table width="100%" align="center" class="bordercolor" cellspacing="1" cellpadding="4"><tr>'+iTd.item(i).parentNode.innerHTML+'</tr></table><div class="iPostSplitBase" style="background-position: center center; background-repeat: no-repeat;"></div>';
                 iTd.item(i).parentNode.style.display='none';
                 var iQuickenThre = iTd.item(i).parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
                 iQuickenThre.parentNode.parentNode.insertBefore(iTable, iQuickenThre.parentNode.nextSibling);
           }
     }
}

//-->
</script>

[kira]

Well since I did not have time to get peoples input before moving on, I will go on with what I was about to say.

For resizing the Forum if you have Smangii's Sidetables then don't worry about the code above that Lucas provided. Built into your sideboard code is a code to resize the forum. Here is how to do it:

1) Go to your Global Header
2) Press Control + F
3) Search for the following:


<table width="95%" align="center" cellpadding="0px" cellspacing="0px">


Once you have do you see the part that says "95%"? Good. Now just change that to the right fit.

My suggestion is that we use 72%. It makes the Forum look best in my opinion.

As for the post splitter I cannot say with absolute certainty that the code Lucas gave will work since I've never used it, but I'm sure he is a good enough member that you trust in his ability to provide codes.

[/blockquote]

[lucas]

the code i gave was already in the side tables code. :I i just quoted what smangii originally had on the description for the code. and that code should work since it was on slightly insane. though, i never split the posts... so... yeah.

[ViciousPoptart]

@lucas: How dare you eat my brethren!
...
I fixed the width, and I'm not quite sure if the second coding worked, though.... -wasn't really sure what it was supposed to do in the first place-

[kira]

If you did add the second one then no it did not work. It is suppose to make a split in between separate posts.

However the width looks great now

[/blockquote]

[ViciousPoptart]

Well, darn. I'll erase that one.

[kira]

Okay here is what you can do to get this one to work.

#1- Got to your Global Footer.

#2- Put in the following code [even though it tells you can edit a section, don't edit them]:


<script type='text/javascript'>
/* Post Splitter with Head/Base images v2
By Scorpian: [url]http://roddyinnovations.com[/url] */

/*/_| Edit These |_\*/
var riHead = 'http://i1081.photobucket.com/albums/j355/kkira2/tex_block_transparent.png'; // URL of head image
var riBase = 'http://i1081.photobucket.com/albums/j355/kkira2/tex_block_transparent.png'; // URL of base image
var riGap = '25'; // Height of gap
var riAuthor = 'yes'; // Show "author|topics" row? 'yes' or 'no' only

/*/_| Do Not Edit |_\*/
var riTable = document.getElementsByTagName('table');
var headImg = document.createElement('img');
var baseImg = document.createElement('img');
headImg.src = riHead; baseImg.src = riBase;
var tehTab = document.createElement('table');
var tehBody = document.createElement('tbody');
tehTab.cellSpacing = 1; tehTab.cellPadding = 4;
tehTab.className = 'bordercolor'; tehTab.width = '100%';
var gapDiv = document.createElement('div');
gapDiv.style.height = riGap;
var end = false; var insBef = false;
if(location.href.match(/action=display/i)){
   for(a=0; a<riTable.length; a++){
       if(riTable[a].cellSpacing == 1 && riTable[a].cellPadding == 4 && riTable[a].rows[0].cells[0].colSpan == 2){
           riTable[a-1].style.backgroundColor = 'transparent';
           riTable[a].className = 'bordercolor';
           var newCell = riTable[a-1].insertRow(-1).insertCell(0);
           for(b=2; b<riTable[a].rows.length; b++){
               if(!insBef){
                   if(riTable[a].rows[b-1].cells[0].className == "catbg" && riTable[a].rows[b-1].cells[0].innerHTML.match(/>Poll</i)){
                       var insBef = true;
                       newCell.appendChild(gapDiv.cloneNode(true));
                   }
               }
               if(riTable[a].rows[b].cells[0].className.match(/windowbg/i) && !riTable[a].rows[b-1].cells[0].innerHTML.match(/>Poll</i)){
                   var newTable = tehTab.cloneNode(true);
                   var newTab = tehBody.cloneNode(true);
                   if(riTable[a].rows[b-1].cells[0].className == 'catbg' && riTable[a].rows[b-2].cells[0].className == 'titlebg'){
                       newTab.appendChild(riTable[a].rows[b-2].cloneNode(true));
                       riTable[a].rows[b-2].style.display = 'none';
                       if(riAuthor == 'yes'){ newTab.appendChild(riTable[a].rows[b-1].cloneNode(true)); }
                       riTable[a].rows[b-1].style.display = 'none';
                   }
                   if(insBef){
                       newTab.appendChild(riTable[a].rows[0].cloneNode(true));
                       riTable[a].rows[0].style.display = 'none';
                       if(riAuthor == 'yes'){ newTab.appendChild(riTable[a].rows[3].cloneNode(true)); }
                       riTable[a].rows[3].style.display = 'none';
                   }
                   newTab.appendChild(riTable[a].rows[b].cloneNode(true));
                   riTable[a].rows[b].style.display = 'none';
                   if(riTable[a].rows[b+1] && riTable[a].rows[b+1].cells[0].className == 'titlebg'){
                       var end = true;
                       newTab.appendChild(riTable[a].rows[b+1].cloneNode(true));
                       riTable[a].rows[b+1].style.display = 'none';
                       if(riTable[a].rows[b+2]){
                           newTab.appendChild(riTable[a].rows[b+2].cloneNode(true));
                           riTable[a].rows[b+2].style.display = 'none';
                       }
                   }
                   newCell.appendChild(headImg.cloneNode(true));
                   newTable.appendChild(newTab);
                   newCell.appendChild(newTable);
                   newCell.appendChild(baseImg.cloneNode(true));
                   if(!end){ newCell.appendChild(gapDiv.cloneNode(true)); }
               }
           }
           if(insBef){
               riTable[a].parentNode.insertBefore(headImg.cloneNode(true),riTable[a]);
               riTable[a].parentNode.insertBefore(baseImg.cloneNode(true),riTable[a].nextSibling);
           }else{
               riTable[a].parentNode.parentNode.style.display = 'none';
           }
           break;
       }
   }
}
</script>


[/blockquote]

[ViciousPoptart]

Posted it. I can see it worked.

[lucas]

replace the photobucket image urls with this: i50.tinypic.com/2zej6th.png

tinypic hates me, so you can rehost it if you want. y'know, just to make sure it doesn't randomly delete itself. :I