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

Forums / Designing with Sitefinity / SiteTabStrip Seperator Help

SiteTabStrip Seperator Help

5 posts, 0 answered
  1. Richard
    Richard avatar
    3 posts
    Registered:
    30 Jan 2008
    09 Jun 2009
    Link to this post
    Hi,
    I am using the latest version of Sitefinity and have styled the SiteTabStrip (horizontal) via css but would like to have seperators (an image) between each item.

    I have found this thread http://www.sitefinity.com/support/forums/support-forum-thread/b1043S-beabge.aspx but it didnt work for me so I'm not sure if it is because I have using a different version of Sitefinity.

    Can you help?

    Thanks
    Richard
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    10 Jun 2009
    Link to this post
    Hi Richard,

    You could try using css classes and add the image for the li element, then exclude the last RadTab item.

    <style type="text/css"
    div.RadTabStrip .rtsLI  
    backgroundtransparent url('Sitefinity/UserControls/Navigation35/img/right.gif'no-repeat rightright bottombottom
    padding-right:16px
     
    div.RadTabStrip .rtsLast { 
    backgroundnone
    padding-right0px
    }  
     
    </style> 


    Kind regards,
    Ivan Dimitrov
    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.
  3. Richard
    Richard avatar
    3 posts
    Registered:
    30 Jan 2008
    10 Jun 2009
    Link to this post
    Hi thanks for this although what I am trying to achieve I don't think can be done with css.

    My SiteTabStrip is in a div which has a set height and width. In this div is a background image which is 1px wide and repeated across the width of the div.

    The background image is a gradient going from dark (top) to light (bottom), with a solid colour at the bottom of the background image which acts as an underline approximately 4px high.

    After each menu item I would like a physical divider, for example Home | About us | Contact | etc

    On the appropriate css class in the SiteTabStrip I have added a background image of a different colour underline so when people hover or select an item the underline colour changes.

    This is fine but you cannot have more than one background image in the css so if I add the divider image to the css the then my hover and selected underline image would not appear which is what is happening at the moment.

    Is there any way to physically add a dividing image via the code behind to seperate each SiteTabStrip item?
    Thanks
    Richard
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    10 Jun 2009
    Link to this post
    Hello Richard,

    Then you can try the following.

    Add the style below to your control template.

     
    <style type="text/css"
     
    .RadTabStrip .rtsSeparator { background-color:#666666display:inlinewidth:3pxpadding:0 5px; } 
     
    </style> 

    For the background you can have image as well. This class will control only the separator, so your background image will not be affected.

    Modify the code behind of your SIteTabStrip as below:

      protected void Page_Load(object sender, EventArgs e) 
        { 
            if (this.ShowOnlyFirstLevel) 
            { 
                foreach (SiteMapNode node1 in SiteMap.RootNode.ChildNodes) 
                { 
                    RadTab tab = new RadTab(); 
                    tab.Text = node1.Title; 
                    tab.NavigateUrl = node1.Url; 
                    this.RadTabstrip1.Tabs.Add(tab); 
                    AddSeparator(tab, this.RadTabstrip1.Tabs); 
                     
                } 
                if(this.RadTabstrip1.Tabs.Count > 0) 
                    this.RadTabstrip1.Tabs.RemoveAt(this.RadTabstrip1.Tabs.Count - 1); 
      
                 ..... 
                   ..... 
     
          private void FillTabStrip(SiteMapNode pNode, RadTabCollection pTabs, int levelDepth) 
        { 
            int levelPosition = -1; 
            foreach (CmsSiteMapNode node1 in pTabs) 
            { 
                RadTab tab2 = new RadTab(node1.Title); 
            } 
            foreach (CmsSiteMapNode node in pNode.ChildNodes) 
            { 
                levelPosition++; 
     
                RadTab tab = new RadTab(node.Title); 
                 
                tab.NavigateUrl = node.Url; 
                pTabs.Add(tab); 
                AddSeparator(tab, pTabs); 
                if (node == SiteMap.CurrentNode) 
                { 
                    tab.Selected = true
                    tab.Owner.SelectedIndex = levelPosition; 
                } 
     
                if (levelDepth > this.HierarchyDepth && this.HierarchyDepth != -1) 
                    tab.Visible = false
     
                if (levelDepth == this.HideLevel) 
                    tab.Style.Add(HtmlTextWriterStyle.Display, "none"); 
     
                this.FillTabStrip(node, tab.Tabs, levelDepth + 1); 
     
                if (tab.SelectedIndex >= 0) 
                    tab.Owner.SelectedIndex = levelPosition; 
            } 
            if (pTabs.Count > 0) 
                pTabs.RemoveAt(pTabs.Count - 1); 
        } 
     
        private void AddSeparator(RadTab tab, RadTabCollection tabs) 
        { 
            RadTab tabSep = new RadTab(); 
            tabSep.IsSeparator = true
            tabSep.Text = " "
            tabs.Add(tabSep); 
        } 
               ...... 
                ........ 


    Kind regards,
    Ivan Dimitrov
    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.
  5. Richard
    Richard avatar
    3 posts
    Registered:
    30 Jan 2008
    11 Jun 2009
    Link to this post
    Hi Ivan,

    That worked great.

    Many thanks
Register for webinar
5 posts, 0 answered