Where and how to change css for selected tab

[IQworks]

Hi,
   Right now, the selected tab changes the text color to black.
   I am trying to change the tab currently selected to retain its text color , change to bold and to be in italics ?
   I have my master page coded this way ... 
 

<%= Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group.Add("Site.css")
.Add("telerik.common.css")
.Add("telerik.hay.css")
.Combined(true)
) %>

  After reviewing a few "telerik css" posts,  I was thinking that all I needed to do was go into my telerik.hay.css and change the    

.t-state-selected

 

,.t-state-selected .t-header,.t-state-selected .t-state-hover,.t-state-selected .t-link{color:#fff;}
 to

 

.t-state-selected

 

,.t-state-selected .t-header,.t-state-selected .t-state-hover,.t-state-selected .t-link{font-weight:bold;font-style:italic;}

But its not working ?  Not sure I am suppose to be making the change here ?

  thanks again for your time

[Alex Gyoshev]

Hello IQworks,

You should be able to make these changes using the Visual Style Builder.

Regards,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[IQworks]

Hi Alex,
   Thank you for the link.
    But when clicked on the link the screen looked like what I am sending you in the screen shot, and, it just froze ?

    In the mean time, shouldn't the first attempt I sent you work ?

[IQworks]

Hi, 
    Is there another way I can use the Visual Style Builder ? 
    Or, is it possible to achieve the css changes I posted earlier by doing something along these lines right inside (or with inline css) .... 
    ,.t-state-selected .t-header,.t-state-selected .t-state-hover,.t-state-selected .t-link{font-weight:bold;font-style:italic;}  
   Thanks for your time.

[Alex Gyoshev]

Hi IQworks,

The issue is caused by some wrong styles for IE and will be fixed next week - you can use Firefox in the meantime.

The CSS class names are shared between all components, so if you want to specify the styles for the tabstrip only, you should use the following:

.t-tabstrip .t-state-active .t-link {
    font-weight: bold;
    font-style: italic;
}

In order to make the link preserve its color, remove the .t-state-active .t-link line from the skin (should be around line 120)

Best wishes,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[IQworks]

Alex,
    thank you, that works great !

[IQworks]

Hi Alex, 
 Sorry to be so picky on this one, after looking at it closer, it solves just half this issue. 

  Forgot to mention that I could not find ".t-state-active .t-link" , but I found this " .t-state-active,.t-state-active .t-link{color:#333;}" and commented it out ,and this gives the effect on the selected tabs its true. 
 
  But my first tab is an information tab, but when it comes up, I need its text to have its own color. of course it has lost its Hay.css now with the commenting out of " .t-state-active,.t-state-active .t-link{color:#333;}" ? Of course I could hard code the background color for that tab, but then I would be commited to this skin.

Please see the attatched to understand what I have tried and what I am trying to achieve ....

thanks as always

 

[Alex Gyoshev]

Hi IQworks,

The effect can be easily achieved using the LinkHtmlAttributes property, like this:

    <style type="text/css">
        .t-tabstrip .t-state-active .t-link
        {
            font-weight: bold;
            font-style: italic;
        }
    </style>

    <% Html.Telerik().TabStrip()
                      .Name("TabStrip")
                      .Items(tabstrip =>
                      {
                          tabstrip.Add().Text("Analytics Work Page ...").Selected(true)
                              .Content(() => { %>a<%});

                          tabstrip.Add().Text("Company O")
                            .HtmlAttributes(new { style = "background-color: blue;" })
                            .LinkHtmlAttributes(new { style = "color: #fff;" })
                              .Content(() => {%>b<%});
                      })
                      .Render(); %>

Greetings,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[IQworks]

Thank you Alex, that  worked.

[QCF]

i use the Visual Style Builder. and save my  Tabstrip but what i should do so i can use it.

 

[Alex Gyoshev]

Hello Ahmed,

You need to register the generated stylesheet on the page using a <link> tag or through the stylesheetregistrar.

Kind regards,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[QCF]

can you explain more or give example?

[Atanas Korchev]

Hi Ahmed Salman,

Here is the example

<link rel="stylesheet" href="path_to_the_css_file" type="text/css" />

or

<%= Html.Telerik().StyleSheetRegistrar()
          .DefaultGroup(group => group.Add("css_file_name")) 
%>

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[QCF]

i try to register my CSS

"<link rel="stylesheet" href="path_to_the_css_file" type="text/css" />"

but noting chage ??

i cannot see my style ?