Wow Tabs

What is Wow Tabs?

It's an easy way to add a fancy tabbed interface to your website.

How do I insert my WowTabs code into my website?

When you generated your custom WowTabs you downloaded a zip file containing...

wowtabs.html - The main page that contains the tabs and content.
wowtabs.js - Javascript code that is called from the html page.
wowtabs.css - The CSS stylesheet also called from the html page
tabimages folder - containing 10 small images that make up your tabs.

As it is, this collection is set to go and working as is. However, it's more likely that you will want to drop these tabs into an existing website somewhere. Here's how...

First, upload tabimages, wowtabs.js, and wowtabs.css to your website directory. It's easiest to put these all in the same folder as the page in which you plan to use tabs.

Next, open up wowtabs.html in a text editor (or whatever program you use to edit your website), and beside that open up the html page you want to drop the tabs into. First, let's copy over the code that calls the necessary javascript and stylesheet files. It's on line 7 and 8 of wowtabs.html and looks like this...

Copy that over to your own website file, but be sure to place it somewhere in your header... before the <body> tag. It is critical that the links to these files are working, so make sure the file paths are correct. (This code assumes they are in the same folder as your web page)

Next, we can copy over the actual tabs themselves. It goes from line 19 to 62, and is marked with a couple comments. (oh... and a little ad for me... please leave that in, as it doesn't show up on your web page itself)

<div...
(lots of code)
...div>

Drop that into your page exactly where you want the tabs to go. Now you can save it, and give it a test to make sure it's functioning. (if you don't see the tab images, then your stylesheet and/or javascript is not linked properly)

Finally, it's a matter of adding your content. But before we get to that, there's one tweak you may want to change if your tabs aren't the right size for your website. In the line of code immediately following  the width of the entire tabs is set to 500 pixels (500px). You may want to change that to better suit your website.

As for the content itself, you can change the name for each tab by entering your own text where it says "Tab #1". (inside the "tabtitle" div tag) The corresponding content for that tab is clearly marked with "Tab 1 content goes here". Easy as pie!

The color of my tabs doesn't quite match the color I wanted.

Depending on the color you choose, it can shift a little bit when the images are automatically created. (this is an unfortunate side-effect of the shading, and though it has been somewhat compensated for, it's still not always perfect)

I would recommend, first, trying a color that is a little lighter or darker than what you wanted, depending on which direction the tab color is shifting.

If you're really stuck on getting the color you need, please contact me (link at the bottom of every page) with the two colors you want. You must send specific color values. I might be able to help you out, and this info will go into fixing the color shift problem once and for all