[Solved] TabStrip Custom Skin

[Marco Teodoro]

Hello, i need to create a custom skin for tabstrip control.

Can someone tell me how to do this?

[Dimo]

Hello Marco,

Knowing the HTML elements and CSS classes that are used by the component (you can see these in the HTML source via Firebug), you can either create styling for the TabStrip from scratch, or override the existing styles. For example here is how to override:

If the native styling for the border color of the TabStrip items is determined by:

.t-state-default {

    border-color: #A7BAC5;

}

You can set a custom border color with

.t-tabstrip .t-state-default {

    border-color: red;

}

Afterwards, you will need to define also a hover and active border color with:

.t-tabstrip .t-state-hover {

    border-color: blue;

}

.t-tabstrip .t-state-active {

    border-color: green;

}

The main gradient of the TabStrip is determined by the t-header CSS class. You may want to override that styling too.

Generally, I recommend you to get familiar with the rules of CSS specificity, inheritance and cascade:

http://css.maxdesign.com.au/ - see the presentations at the bottom of the page. The information about specificity is in the third presentation, starting from slide 50. I recommend you to watch the whole first and third presentations to gain better understanding how CSS works and how conflicting styles are applied by the browser.

Here is one more article on the matter:

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Regards,
Dimo
the Telerik team