[CB] Dynamically Tabbed Table

I'll cover the basics of editing the table here, but if you have any questions please make a thread in code support.

CSS

.tabbg {
      background-color: #dadada;
      border-bottom: 1px solid #000000;
      border-right: 1px solid #000000;
}

.tabbgselected {
      background-color: #efefef;
      border-bottom: 1px solid #efefef;
      border-right: 1px solid #000000;
}

These two classes determine how a tab will behave when it is and isn't selected. The second class which has the word "selected" in it is the class for when the tab is selected. I like to have this class' background color and bottom border color the same as the windowbg class' background color (Admin > Skins / Forum Colors > Modify Skin > Window Background 1) so that the tab appears to be "connected" with the content below.

#pro_tabs td, #pro_sidebar td {
      font-size: 10pt;
      font-weight: bold;
      text-align: center;
}

This part is for styling the tab and sidebar title text.

#pro_content {
      font-size: 10pt;
      padding: 10px;
}

This part is for styling the tab content text.

#pro_threads {
      font-size: 10pt;
      font-weight: bold;
      line-height: 1.5em;
      text-align: left;
}

This part is for the right hand column titled by default as "Important Threads". You don't have to have this so feel free to remove that column along with the CSS shown above. Just be sure to change the colspan in the line below to 1 if you choose to do this without the generator.

<td class="titlebg" align="center" colspan="2" style="padding: 4px; cursor: pointer;" onclick="DTT.toggleTable();">

If you have more than one skin, I suggest making a separate copy of the CSS for each skin and hosting it on a remote website. If you don't know how to do this, make a thread in code support.

Adding Tabs

It is recommended that you skip this section and just use the generator in the first post to create your tabs.

To add a tab, just add one of the lines shown below to the table in the above post (after this line towards the top: <tr id="pro_tabs">). For the ID, be sure to place "nav_" in front of it followed by a unique word/number that you will use later.

<td class="tabbg" onclick="DTT.toggleTab(this.id);" id="nav_welcome">Welcome</td>

Then add the bold text for the last tab only.

id="nav_staff" style="border-right: none;">Welcome</td>

Note that one tab needs to be selected by default, so give whichever tab you choose the class name of "tabbgselected" instead of "tabbg". Also, find this line in the Javascript code and enter the same ID excluding the "nav_" part.

selected: {
      id: "welcome",
      listItem: {}
},

Once you know how many tabs you are going to use you need to edit a two things. First, go back up to the CSS we were editing above, and change the width to 100 divided by the total amount of tabs you have. So if you have two tabs, 100 / 2 = 50%.

#pro_tabs td {
      width: 50%;
      cursor: pointer;
}

Next, find this line a few lines down from where you previously added your tabs above, and set the colspan attribute to the number of tabs you have.

<td class="windowbg" colspan="2">

Directly below this line is where the content goes, and all you need to do is add what is below and edit the ID by using the same ID you used for the tab above except that you place "pro_" in front of the ID instead of "nav_".

<div id="pro_welcome" style="display: none;">
      <p>Welcome to <b><i>Your Site Name</i></b>!</p>
      <p>We appreciate your visit to us. Please take the time to browse through and <a href="/index.cgi?action=register">register</a> if you're interested in us.</p>
      <p>We hope you enjoy your stay,<br /><span style="margin-left: 20px;"></span>Your Site Name Management and Moderation Team.</p>
</div>

Please note that the number one error that people make when putting this table together is invalid nesting. Make sure all of your HTML tags (<td>, <div>, etc.) are correctly lined up. I highly recommend editing this in a text editor such as notepad.