How can I change the css of jquery ui tabs. Can u plz give me the example. I want to override the current css of tabs. how can i do this.
HTML
<ul class='tabs'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
<p>Hi, this is the first tab.</p>
</div>
<div id='tab2'>
<p>This is the 2nd tab.</p>
</div>
<div id='tab3'>
<p>And this is the 3rd tab.</p>
</div>
LIke this
css
.nav-tabs {
border-bottom: 1px solid #DDDDDD;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 4px 4px 0 0;
line-height: 1.42857;
margin-right: 2px;
}
.nav-tabs > li > a:hover {
border-color: #EEEEEE #EEEEEE #DDDDDD;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #FFFFFF;
border-color: #DDDDDD #DDDDDD rgba(0, 0, 0, 0);
border-image: none;
border-style: solid;
border-width: 1px;
color: #555555;
cursor: default;
}
.nav-tabs.nav-justified {
border-bottom: 0 none;
width: 100%;
}
.nav-tabs.nav-justified > li {
float: none;
}
.nav-tabs.nav-justified > li > a {
margin-bottom: 5px;
text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
left: auto;
top: auto;
}
html
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='content' class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Hi, this is the first tab.</p>
</div>
<div class="tab-pane" id="tab2">
<p>This is the 2nd tab.</p>
</div>
<div class="tab-pane" id="tab3">
<p>And this is the 3rd tab.</p>
</div>
<div class="tab-pane" id="tab4"></div>
</div>
js
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
The easiest way is to use the Jquery UI themeroller here: http://jqueryui.com/themeroller/
This allows you to create a fully customised UI package with the theme you'd like, either one of the pre-canned ones, or a custom one.
This will affect all of your Jquery UI modules including the tabs.
Given your question, I feel this would be the best method for yourself - otherwise you'd have a pretty clear idea of where the Tabs CSS live.
In particular, you should look at the Header/Toolbar and the three clickable items if you're rolling your own.
just inspect the element, on devloper tools copy the css styles.. and place and change the styles with important or give more specificity
like this
ui-tabs-nav {
background-color: #222 !important; /*To overwrite jquery-ui.css*/
height: 30px; /*To stop nav block scaling of tab size*/
}
Jquery ui tabs or anything else, if you need to override css styles, you should test your pages on Firefox and install Firebug plugin. Thus, you just have to select the HTML elements that you want to customize to identify which styles are applied to them. Then you can add directly into the Firebug window the new css rules that are automatically applied to corresponding elements. When it is done, just copy your modifications into your css file and display your page again to confirm that everything is OK. Finally, you can test your page on other browsers. I would say that this the most efficient and easy way to work on css styles.
