Issue Changing Background Colors for Tabstrip Items

[Christopher]

Hi,

I am having a pretty difficult time getting the tabstrip coloring that I am looking for. The end goal I was going for was a dark blue background with white text and the active tab to be shown in a different background color. Here is what I have so far. I am changing the text via inline styling, trying to follow the demo for Tabstrip. I have the class of .k-link defining the background color. This works well and does show the correct styling. However, when adding the red color for the selected tab via the .k-state-active class, it does not override the .k-link class background color. If I do not define the k-link background, the color of the active tab does populate. I assume I am doing this wrong, so what is the best way to change the background color of the tab while still allowing me to change the selected tab color?

[Tsvetomila]

Hello Christopher,

Thank you for sharing the details of the requirements and the code snippets. They were very helpful.

Beginning with the R1 2023 version of Telerik UI for ASP.NET Core, the names of the State Classes have been updated to omit the term 'state' from their configuration names.

Consequently, the use of 'k-state-active' or 'k-active' will vary based on the specific product version being utilized. The example provided below has been created with the latest product version and employs the 'k-active' class.

To implement color changes for the TabStrip component items, consider using the following approach:

Apply styling over the component for the Initial, hover and selected states:

<style>
    .k-active span.k-link{  // Selected tab manipulation
        color: red;
        background-color: lightgray;
    }

    .k-tabstrip-items .k-link:hover {  // On hover change
        color: pink;
        background-color: gray;
    }

    .k-tabstrip-items .k-link {      // Initial setup
        color: green;
        background-color: lightblue;
    }
</style>

This implementation eliminates the need for inline color additions.

Result illustration:

This implementation can be explored in practice through the Telerik REPL for ASP.NET Core Example.

Let me know how the suggested configuration works for you.

Regards,

Tsvetomila
Progress Telerik