move the CSS from a anchor to li anchor

[stevied]

I have the following code

<telerik:RadTabStrip ID="RadTabStrip1" runat="server"
                Skin="" EnableEmbeddedSkins="False">
                <Tabs>
                    <telerik:RadTab runat="server" SelectedIndex="0"
                        Text="cbfootball.co.uk" CssClass="cbTab"  SelectedCssClass="cbSelected"
                        HoveredCssClass="cbHovered" ChildGroupCssClass="cbChildTab"
                        NavigateUrl="~/default.aspx">
                        <Tabs>
                            <telerik:RadTab runat="server" Text="Home" CssClass="first" NavigateUrl="~/default.aspx" />
                            <telerik:RadTab runat="server" Text="News" NavigateUrl="~/news.aspx" />
                            <telerik:RadTab runat="server" Text="Community" />
                            <telerik:RadTab runat="server" Text="Awards" />
                            <telerik:RadTab runat="server" Text="Competitions" />
                            <telerik:RadTab runat="server" Text="Activity" />
                            <telerik:RadTab runat="server" Text="Predictions" />
                            <telerik:RadTab runat="server" Text="Under 19s" />
                            <telerik:RadTab runat="server" Text="Charity" />
                            <telerik:RadTab runat="server" Text="Contact" CssClass="tabLast" NavigateUrl="~/contact_cbfootball.aspx" />
                       </Tabs>
                    </telerik:RadTab>

                    <telerik:RadTab runat="server" Text="Score Selector"
                        Width="240px" CssClass="ssTab" SelectedCssClass="ssSelected" SelectedIndex="0"
                        HoveredCssClass="ssHovered" ChildGroupCssClass="ssChildTab"
                        NavigateUrl="~/score_selector/Default.aspx">
                        <Tabs>
                            <telerik:RadTab runat="server" Text="Home" CssClass="first" NavigateUrl="~/score_selector/Default.aspx" />
                            <telerik:RadTab runat="server" Text="Make Predictions"  NavigateUrl="~/score_selector/makepredictions.aspx" />
                            <telerik:RadTab runat="server" Text="My Results" />
                            <telerik:RadTab runat="server" Text="Mini Leagues" />
                            <telerik:RadTab runat="server" Text="Create Leagues" />
                            <telerik:RadTab runat="server" Text="Invite Friend" />
                            <telerik:RadTab runat="server" Text="Prizes" />
                            <telerik:RadTab runat

Whihc produces HTML like this...

<div id="tabNav">
            <div id="ctl00_mainNav1_RadTabStrip1" class="RadTabStrip RadTabStrip_ RadTabStripTop_ ">
    <!-- 2008.3.1314.35 --><div class="rtsLevel rtsLevel1">
        <ul class="rtsUL"><li class="rtsLI rtsFirst"><a class="rtsLink cbTab rtsSelected cbSelected" href="default.aspx"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">cbfootball.co.uk</span></span></span></a></li><li class="rtsLI rtsLast" style="width:240px;"><a class="rtsLink rtsAfter ssTab" href="score_selector/Default.aspx"><span class="rtsOut"><span class="rtsIn"><span class="rtsTxt">Score Selector</span></span></span></a></li></ul>

As you can see i have two main tabs which are identified in the a anchor (cbTab and ssTab) Is there a way to move these identifers to the li or indeed the ul as I am using sIFR for my menu headers which does NOT like a anchors which is giving me an click error in IE7 & 8, hopes this makes sense.

Regards,

Stevied

[Alex Gyoshev]

Hello Stephen,

It does make sense!

Unfortunately, we don't have a property to change the CssClass of the wrapping element. Such a feature makes sense and I'll make sure to implement it next week. If time is of critical importance, you can move the classes using the following jQuery snippet:

$telerik.$('#<%= RadTabStrip1.ClientID %> .rtsLink').each (function () {
    var customCssClass = this.parentNode._item.get_cssClass();
    if (customCssClass !== "") {
        $telerik.$(this.parentNode).addClass(customCssClass);
        this.parentNode._item.set_cssClass("");
    }
});

// init sIFR

Greetings,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[stevied]

thanks for the great feedback, as a work around i removed the sIFR and used a text image instead which with a little tweaking works well.

Once this update comes out i can update and revert back to the sIFR text.

Regards,

Stevied

[Rutger Buijzen]

Hi Alex,

Has this feature been implemented in the latest release? And if so, what's the properrty name and will it work with the DNN SkinObject?

Thanks!

Rutger

[Kamen Bundev]

Hello Rutger,

This attribute was added in release 2009.2 826 (Q2 SP1) under the name of OuterCssClass.

Sincerely yours,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Rutger Buijzen]

Thanks!

[Rutger Buijzen]

Seems that the RadTabStrip DotNetNuke SkinObject does not react to this property?

[Dimitar Milushev]

Hello Rutger,

You should set this property directly to the TabStrip definition in RadTabStrip.ascx.

Sincerely yours,
Dimitar Milushev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.