[Solved] Tab Styling

[Ed]

I have a tab control I am using, but I have some requirements that are not necessarily covered in the documentation or on the demo site.

I need to know if I can insert a style into the 'li' elements. Something along the lines of how we can do:

New With { .class = "SomeNewClass"}

The requirement I have is that all 6 tabs cannot have just an active color and an inactive color. I need to actually have "groups". What I mean by that is:

Can I have different inactive/active colors for groups of tabs?

For instance:

In the 6 tabs, the first two will have two shades of purple for inactive/active, the next two will have two shades of blue for inactive/active, etc., etc.

Thanks for any and all replies/suggestions.

[Ed]

I figured out I can indeed use the HTMLAttributes to insert a class or id, still struggling with css to change the '<li>' though for this 'grouping' I need to resolve.

Any suggestions would be helpful and appreciated.

[Ed]

Here is what the '<li>' looks like now:

<li id="TaggedItemsTab" class="t-item t-state-active">

Anyone have a suggestion for overiding the t-state-active class for the id above?

[Dimo]

Hi Ed,

Styles assigned to IDs always take precedence over styles assigned to class names, so you shouldn't have problems with customizing the tab's apearance. You can even use

#MyID.t-state-active  /* (no space between the ID and class) */
{

}

which will apply styles to active tabs having the specified ID.

Regards,
Dimo
the Telerik team

[Ed]

Thanks Dimo, it's the approach I actually took and got it working beautifully.

[Marco Teodoro]

Hi, i'm trying to do the same thing...

i have the following css code

#tab1.t-state-active
{
        background: url('themes/base/images/blue_R_corne_btn.png');
        background-repeat:no-repeat;
}


#tab1.t-state-default
{
     background: url('themes/base/images/gray2_R_corner_btn.png');
     background-repeat:no-repeat;
}

But the active state is overridden by the default state. how can i have a background image for active state and another for default state?

best regards

[Dimo]

Hello Marco,

You need to reverse the order of the two CSS rules, as the t-state-default CSS class is always applied.

Greetings,
Dimo
the Telerik team