When you insert this table into your forum, you will notice that all of the table except for the tabs will take your forum's default colors. I kept the tabs from inheriting from other classes to keep things simple and to not have any confusion. What you need to modify is the CSS shown below which will be generated for you.

.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.

If you have more than one skin with different colors, you can use Javascript to print the correct skin colors with this method.

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

if(pb_skinid == 1){
   document.write(
      "<style type='text/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;" +
      "}" +
      "</style>"
   );
} else if(pb_skinid == 2){
   document.write(
      "<style type='text/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;" +
      "}" +
      "</style>"
   );
}

//-->
</script>

A lot of people have wanted to know how to make each tab or one of the tabs have a fixed height so that the content will scroll and prevent the table's height from increasing and decreasing between tabs. To do this, you just have to put a division element like the one below in each of your tabs with the same height.

Note that in this generator on the list tabs you can only insert the code around each item's content and not the entire cell. If you want the div placed around the entire cell, you'll have to do that by hand which is not difficult. Once you have generated your code, just search for the tab's content and place the opening and closing divs shown above around everything, but be sure to put it within the tab's main division element like below.

Click on a staff name above to read about them.

Name: SynfulRegrets

Rank: Administrator

Name: Yurisnow

Rank: Administrator

Name: Delusionment

Rank: Global Moderator

Name: Boots

Rank: Global Moderator

Name: Tsubasa

Rank: Moderator

- Home
- New Topics
- Help
- Search
- Members
- Link Six