Adding custom styles to Jquery UI tabs

Question

I am trying to add some custom styles for my jquery UI tabs. This is my expecting output for tabs.

I tried to figure it out, but still not get any luck.

This is the code so far :

<div id="main">
            <div class="ui-widget-header ui-corner-top">
                <ul>
                    <li><a href="#tabs-1">My Databases</a></li>
                    <li><a href="#tabs-2">Database Stats</a></li>
                </ul>
            </div>

            <div id="tabs-1" class="tabs3">
                <p>Database stats</p>
            </div>

            <div id="tabs-2" class="tabs3">
                <p>You could not be registered due to a system error. We apologize for any inconvenience.</p>
            </div>
</div>

CSS :

#main {
   margin-left: 246px;
   position: relative;
    padding: 0;
}


#main ul, .tabs3 {
   white-space: nowrap;
}

#main ul{
   border-bottom: medium none;
   //padding: 6px;
    height: 25px;
    border: none;
}

.ui-tabs .ui-tabs-nav {
   margin: 0;
   padding: 0.2em 0.2em 0;
    border: none;
}

.ui-tabs .ui-tabs-nav li {
    border: none;
    margin: 0 0 -5px 0;
}

#main ul.ui-widget-header, #main ul.ui-widget-content, #main ul.ui-state-default, #main ul.ui-state-hover {
    background: none;
    border: none
}

#main .ui-tabs-active a {
   -moz-border-bottom-colors: none;
   -moz-border-left-colors: none;
   -moz-border-right-colors: none;
   -moz-border-top-colors: none;
   background: url("images/ui-bg_highlight-hard_100_f9f9f9_1x100.png") repeat-x scroll 50% top #F9F9F9;
   border-color: #CCCCCC;
   border-image: none;
   border-style: solid;
   border-width: 1px 1px 0;
   color: #222222;
   position: relative;
   z-index: 5;
}

MY JSfiddle

Solution 1

I've work with fiddle you've provided. And this is result:

http://jsfiddle.net/qP8DY/7/

My solution depends on html5 "!important" mark, so if it not suitable for you let me know.

To change nav bar background you must work with:

.ui-tabs-nav {
    background-color: #222 !important; /*To overwrite jquery-ui.css*/
    height: 30px;                        /*To stop nav block scaling of tab size*/
}

Changing background property as you wish.

Active tab is handled by:

#main .ui-tabs-active a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: white;        /*To make it looks like on example pic, it is possible do do with it whatever you want*/
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px 1px 0;
    border-radius: 5px 5px 0 0;    /*To affect only top corners*/
    color: #222222;
    position: relative;
    z-index: 5;
    color: black !important;             /*To overwrite jquery-ui.css*/
    text-decoration: none !important;     /*To overwrite jquery-ui.css*/
}

All other tabs are handled by:

.ui-tabs .ui-tabs-nav li {
    position: relative;    /*To overwrite jquery-ui.css*/
    top: -10px !important;  /*To overwrite jquery-ui.css*/
    border: none;
margin: 0 0 -5px 0;
    background: none;
}
.ui-tabs-anchor{
    color: white !important;                  /*To overwrite jquery-ui.css*/
    text-decoration: underline !important;    /*To overwrite jquery-ui.css*/
}

Solution 2

Using !important, your stylesheet isn't cascading anymore. Try to avoid using this!

Comments

[TNK]

Thank you for your answer and its the perfect answer which I looking for. Tell me, without !important is there any other way to do this?

[Aleksei Anatskii]

You just need to deal with css override. In short: more specific rules override more general ones. Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used. When multiple rules of the same "specificity level" exist, whichever one appears last wins. More detailed see here: link