More in this section

Forums / Developing with Sitefinity / Hierarchical aTabstrip?

Hierarchical aTabstrip?

3 posts, 0 answered
  1. leroy
    leroy avatar
    5 posts
    Registered:
    06 Feb 2008
    23 Apr 2008
    Link to this post
    I am wanting the tabstrip to show child page links below when a parent tab is selected.
    I have changed the SiteFinity/Usercontrols/Navigation/MenuTabstrip.ascx to the following, but it still doesn't work? Any ideas??

    <div>
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
    <radTS:RadTabStrip ID="RadTabstrip1" EnableViewState="false" runat="server"
                    DataTextField="Text"
                    DataFieldID = "id"
                    DataFieldParentID = "parentId"
                    SelectedIndex = "0">
    </radTS:RadTabStrip>
    </div>
  2. leroy
    leroy avatar
    5 posts
    Registered:
    06 Feb 2008
    23 Apr 2008
    Link to this post
    ok, i have figured this out following:

    Implementing Site TabStrip Hierarchy Depth in fhe dev manual.

    But, my next question is how can I change the skin style or class for secondary level nav?
  3. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    24 Apr 2008
    Link to this post

    Hi leroy,

    I presume you have added the RadTabstrip in a master page. So you need to add the following properties to the RadTabStrip declaration as well: SkinsPath, Skin and CssClass.

    The SkinsPath property sets the relative path of the folder containing your skins, the Skin property sets the skin used by RadTabStrip and CssClass set CSS class or classes to be added to the RadTabStrip.

    So let’s suppose you have set the properties like this:

    SkinsPath="~/App_Themes/SiteTheme"
    Skin="SiteTabstrip"
    CssClass="CustomClass"

    The html output will look something like this:

    <div class="tabstrip RadTabStrip_SiteTabstrip CustomClass">
        <div class="levelwrap level1" style="display: block;">
            
    <ul>
                
    <li class="first"><a href="#"><span class="wrap"><span class="innerWrap">home</span></span></a></li>
                
    <li><a id="" href="#"><span class="wrap"><span class="innerWrap">page1</span></span></a></li>
                
    <li><a id="" href="#"><span class="wrap"><span class="innerWrap">page2</span></span></a></li>
                
    <li class="last"><a class="selected" href="#"><span class="wrap"><span class="innerWrap">page3</span></span></a></li>
            
    </ul>
        
    </div>
        
    <div style="display: block;" class="levelwrap level2">
            
    <ul style="display: block;">
                
    <li class="first"><a href="#"><span class="wrap"><span class="innerWrap">page31</span></span></a></li>
                
    <li><a href="#"><span class="wrap"><span class="innerWrap">page32</span></span></a></li>
                
    <li class="last"><a href="#"><span class="wrap"><span class="innerWrap">page33</span></span></a></li>
            
    </ul>
        
    </div>
    </div>

     

    So in the CSS file for SiteTabstrip skin that should be in ~/App_Themes/SiteTheme/SiteTabstrip folder you can write the CSS needed to style the secondary level nav. For example, your CSS declarations may be:

     

    .tabstrip.RadTabStrip_SiteTabstrip.CustomClass . level2 ul {
    }
    .tabstrip.RadTabStrip_SiteTabstrip.CustomClass . level2 li {
    }
    .tabstrip.RadTabStrip_SiteTabstrip.CustomClass . level2 a {
    }
    .tabstrip.RadTabStrip_SiteTabstrip.CustomClass . level2 .wrap {
    }
    .tabstrip.RadTabStrip_SiteTabstrip.CustomClass . level2 .innerWrap {
    }


    Greetings,

    Katia
    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center
Register for webinar
3 posts, 0 answered