Developer Spot

CSS Rules

We're done with all the template edits. Now we just need to save the CSS rules for styling the 'tabs' on the Forumhome.

13. Select Main CSS from the drop-down menu in the style manager for the skin we are editing.

14. Scroll down to the end of the page for the Additional CSS Definitions section.

15. Enter the following CSS rules in the 2^nd text field:

ul.domtabs { float:left; margin:0; padding:0; list-style: none; }
ul.domtabs li { float: left; padding:0 1px 0 0; }

ul.domtabs a {
  padding: 5px 10px; display: block; text-decoration: none;
  font: bold 12px arial;  color: #FFFFFF;
  background: #5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left;
}

ul.domtabs a:hover { text-decoration: underline; }
ul.domtabs li.active a {
  background: #869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left;
}

html>body ul.domtabs a { height:auto; }

.domtab .tabcontent { clear:both; width:auto; }

16. Finally, Hit the [Save] button!

We're done. Refresh your Forumhome to see the tabs in action.
Here's an animated demo of the tabbed Forumhome:

(Click on the image above to see the full-sized image. Filetype: GIF. File Size: 200 kb.)

If you are not at ease with making the above mentioned changes, or fear that you’ll end up messing your vBulletin Forum; feel free to open a thread in our Forum Management section or simply add a comment here; asking for further assistance.