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.

enter image description here

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

Everything looks fine in the shared JSFiddle. Even if you want to override any exiting css property try adding !important at the end of each property. — Aditya Singh
– Aditya Singh, Commented Jun 10, 2013 at 7:31
Please share a specific property which you are not able to change. — Aditya Singh
– Aditya Singh, Commented Jun 10, 2013 at 8:05

Aleksei Anatskii · Accepted Answer · 2013-06-10 09:46:30Z

11

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*/
}

answered Jun 10, 2013 at 9:46

Aleksei Anatskii

3074 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TNK Over a year ago

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 Over a year ago

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

Davor Mlinaric · Accepted Answer · 2013-06-10 09:56:16Z

3

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

answered Jun 10, 2013 at 9:56

Davor Mlinaric

2,0271 gold badge20 silver badges26 bronze badges

Collectives™ on Stack Overflow

Adding custom styles to Jquery UI tabs

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related