PDA

View Full Version : Changing Style of tabs



vajrakumar.d
14 Jul 2011, 2:12 AM
Hello,
I am having a tabpanel whose style i want to change almost like google chrome tabs.
just will attach the screen shot of how i want & how i have .
I think this i can solve using css,
can any one help me on this ..

skirtle
17 Jul 2011, 4:14 AM
You're correct, CSS should be the way forward.

Using a tool like Firebug or the Chrome Developer Tools it should be quite easy to figure out what CSS rules you need. Just inspect the elements of the tabs and see what rules are applied at the moment. The tab header uses a <ul> and each tab is an <li>.

Here's an example that makes the tabs horrible colors. It should give you an idea what each rule does, modify as necessary to get the desired look:


.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close {
background-color: red;
background-image: none;
}

.x-tab-strip-top .x-tab-left {
background-color: green;
background-image: none;
}

.x-tab-strip-top .x-tab-strip-inner {
background-color: white;
background-image: none;
}

.x-tab-strip-top .x-tab-right {
background-color: blue;
background-image: none;
}

.x-tab-strip-top .x-tab-strip-active .x-tab-left {
background-color: #006400;
}

.x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner {
background-color: gray;
}

.x-tab-strip-top .x-tab-strip-active .x-tab-right {
background-color: #00008b;
}

To get the effect you want it probably makes sense to get rid of the 2px gap between each tab too:


ul.x-tab-strip li {
margin-left: 0;
}