CODEWITHSUNDEEP
cssjquery-ui
user14696
user14696

Reputation: 677

Jquery UI - can't seem to figure out the css to customize tab colors

I am struggling through the documentation on jquery ui (specifically tabs:

I've digested the js functions...but I am struggling with the css. For example, I cannot figure how to change the border color (it is like my customizations are not even being read)...

Here is my code so far...

    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" rel="stylesheet" /> 
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  ui.tabs-container {position: relative; background: #0000cd; }
  ui.tabs {
      float: left;
      background: white;
      height:400px;
      line-height: 30 px;
      padding: 0 16px;
      width:409px;
      scrollbar:false;
      cursor: pointer;
} 
    ui.tabs:hover{ background: #f4f4f4; }
    ui.contents {
      float: left;
      position: absolute;
      left: 5%;
      height: 300px;
      margin-top: 31 px;
      padding: 0 px;
      border: 1 px solid #ccc;
      font-weight: normal;
      display: none;
}

Upvotes: 0

Views: 403

Answers (2)

m.spyratos
m.spyratos

Reputation: 4219

Probably you are looking for two classes. ui-state-default and ui-state-active. So, just add the styling you need for each state. Example:

.ui-state-default {border:1px solid #000;}
.ui-state-active {border:1px solid #fff;}

Note, that your css (above code) must be after jQuery's jquery-ui.css, otherwise you have to use !important for changes to take place.

As darkajax mention though, you have to start using firebug (or Chrome's tools).

Upvotes: 0

DarkAjax
DarkAjax

Reputation: 16223

When it comes to jQuery UI there's usually a lot of classes involved with different levels of cascading, so I recommend you use Chrome's developer tools or Firefox's Firebug to figure out what you need to target with your css.

For example, with this:

.ui-state-default.ui-corner-top.ui-tabs-active {
  background: red;
}

You can change the color of the active tab...

Demo: http://jsbin.com/umixan/1/edit

Upvotes: 3

Related Questions