Custom Css Tips for Jquery Tabs

I love Jquery Tabs , it just make your life easier... well, only when you use his custom CSS.

But how about integrating it with your custom CSS, instead of his restrictive-gun-in-head Themes? , of course we know how to create a Tab Menu in CSS, but integrate it with Jquery Tabs is not so easy. So after one day of debugging my own code i will give you some tips to create your custom css for jquery tabs.

Tip 1: Know the classes for the Navigation Tab Bar: There is only one class that you will need to know little grasshoper:

• ui-state-active: As the name implied, this class is added to the tab that is currently selected, dont mind the other classses, you will not need them, this is the silver bullet class for jquery tabs.

So we will need 4 css for know

1. The Default Navigation Bar Css
2. The Css for the a tag inside tha navbar
3. The Css of the ui-state-active bar
4. And the a tag inside the active navbar
   

So the css for this navigation bar(1) will go like this:

ul.grindyMenu li{
background:white;
color:#D09984;
display:inline;
list-style:none;
padding:1px 15px 1px 15px;
}

Then we add the a tag css(2)

ul.grindyMenu a{
text-decoration:none;
font-size:0.7em;
font-weight:bolder;
}

And for the active tab css(3), it will be like this :

ul.grindyMenu li.ui-state-active{
background:#D09984;
}

Finally the a tag inside the active tab (4):

ul.grindyMenu li.ui-state-active a{
color:white;
}

Now there is a small catch, your css file should have those rules written in that order. Maybe here you will not need to follow that tip, but what if you need to create a rule for the ui-state-default class. Do you notice how the active and not active tabs, both have the ui-state-default class? If you declare ui-state-default after ui-sate-active, it will override it:


So make your life easier and put those rules in order, first the default class, and then the active class in your css file.

Tip 2: Know the classes for the Panels, here also we wil only need one class:

• ui-tabs.hide: This is the most important class, this class make the non active panels to hide
  

.ui-tabs-hide{
display:none;
}

And that's it. Put this class and everything will be allright. Happy coding!