+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Site tabstrip separators

Site tabstrip separators

6 posts, 0 answered
  1. Sasa
    Sasa avatar
    17 posts
    Registered:
    24 Aug 2007
    26 May 2008
    Link to this post
    Hi,

    How can I add separators between tabs?

    I'm trying to create something like:

    Home | Link1 | Link2 | Link 3

    where "|" is a separator, of course.

    Thanks.
  2. Pepi
    Pepi avatar
    981 posts
    Registered:
    28 Oct 2016
    27 May 2008
    Link to this post
    Hello Sasa,

    You can customize the look and feel of each single RadTabStrip tab using the CssClass property. It determines the CSS class to be applied to the tab. Here is a simple example:

    .ascx
    <style type="text/css"
        .CustomTab 
        { 
            font-weight: bold !important; 
            border-right: solid red; 
        } 
    </style>            
     
    <radTS:RadTabStrip runat="server" ID="RadTabStrip1"
           <Tabs> 
                 <radTS:Tab Text="Tab1" CssClass="CustomTab"></radTS:Tab> 
                 <radTS:Tab Text="Tab2" CssClass="CustomTab"></radTS:Tab> 
                 <radTS:Tab Text="Tab3" CssClass="CustomTab"></radTS:Tab> 
                 <radTS:Tab Text="Tab4"></radTS:Tab> 
           </Tabs> 
    </radTS:RadTabStrip> 

    Hope this helps.

    Greetings,
    Pepi
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Sasa
    Sasa avatar
    17 posts
    Registered:
    24 Aug 2007
    27 May 2008
    Link to this post
    Yes.

    However, I'm trying to achieve this with Sitefinity's built-in navigation control "Site Tabstrip" and I don't see how I can control per-tab styles with this?
  4. Pepi
    Pepi avatar
    981 posts
    Registered:
    28 Oct 2016
    27 May 2008
    Link to this post
    Hi Sasa,

    You could implement the described logic in OnTabDataBound event handler of the SiteTabstrip control located in ~/Sitefinity/UserControls/Navigation folder:

    .ascx
    <style type="text/css"
    .CustomTab 
        font-weight: bold !important; 
        border-right: solid red; 
    </style> 
        
    <div> 
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" /> 
        <radTS:RadTabStrip ID="RadTabstrip1" runat="server" DataSourceID="SiteMapDataSource1" OnTabDataBound="RadTabstrip1_TabDataBound" EnableViewState="false"
        </radTS:RadTabStrip> 
    </div> 

    .cs
       protected void  RadTabstrip1_TabDataBound(object sender, TabStripEventArgs e) 
        { 
            e.Tab.CssClass = "CustomTab"
        } 

    Do let us know about the results.

    Kind regards,
    Pepi
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Smitha
    Smitha avatar
    22 posts
    Registered:
    29 Oct 2008
    23 Dec 2008
    Link to this post
    Hi!

    I have a similar requirement and have modified the code behind of the user control but get the error - Error 1 The type or namespace name 'TabStripEventArgs' could not be found (are you missing a using directive or an assembly reference?) C:\Program Files\telerik\Sitefinity3.5\WebSites\SuperFresh\Sitefinity\UserControls\Navigation35\SiteTabstrip.ascx.cs 90 61 C:\...\xxx\

    Please advice on how to proceed.

    Regards,
    Smitha.
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    23 Dec 2008
    Link to this post
    Hi Smitha,

    Please try to define the methods as showed below:

    protected void RadTabstrip1_TabDataBound(object sender,  RadTabStripEventArgs e) 
        { 
            e.Tab.CssClass = "CustomTab"
        }  

    I hope this helps.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Register for webinar
6 posts, 0 answered