Dodawanie stylów niestandardowych do kart interfejsu Jquery UI

Question

Próbuję dodać niestandardowe style dla moich kart interfejsu użytkownika jquery. Jest to oczekiwane wyjście dla kart.

Starałem się zrozumieć to, ale nadal nie dostać żadnych szczęścia.

Jest to kod do tej pory:

<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

Answer 1

ja praca z skrzypce podasz. I to jest wynik:

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

Moje rozwiązanie zależy HTML5 znaku, więc jeśli to nie nadaje się do daj mi znać „Uwaga!”.

Aby zmienić nav bar biały trzeba pracować z:

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

Zmienianie właściwości tła, jak chcesz.

aktywna karta jest obsługiwana przez:

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

Wszystkie inne karty są obsługiwane przez:

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

Answer 2

Korzystanie !important, Twój arkusz stylów kaskadowych nie jest już. Staraj się tego unikać!