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

Forums / Developing with Sitefinity / tabstrip - image after last right level1 node

tabstrip - image after last right level1 node

4 posts, 0 answered
  1. Philip
    Philip avatar
    8 posts
    Registered:
    16 Jun 2008
    01 Dec 2008
    Link to this post
    Hello,

    I'm using a tabstrip control with the skin BlueBar.

    I'm trying to do the following:
    now:
    | Home | page 1 | page 2 |                                                                      |

    future:
    | Home | page 1 | page 2 |                                      COMPANY LOGO |

    How is this possible by using CSS ?


    Thank you in advance,


  2. Pepi
    Pepi avatar
    981 posts
    Registered:
    31 Jan 2017
    01 Dec 2008
    Link to this post
    Hi Philip,

    I would suggest you change the default implementation of Sitefinity SiteTabstrip control (\Sitefinity\UserControls\Navigation\SiteTabstrip.ascx) as it is described below:

    1. Add a css class which sets the background of the tab:

    .ascx
    <style type="text/css"
    .logo  
        background: transparent  url("http://localhost/hotfix/Sitefinity/Admin/Themes/Default/Images/SiteFinityLogo.gif")!important
    </style> 
     
    <div> 
    <radTS:RadTabStrip ID="RadTabstrip1" runat="server" EnableViewState="false"
    </radTS:RadTabStrip> 
    </div 

    2. In Page_Load method modify the dynamic creation of the tabstrip as follows:

    .ascx.cs
    protected void Page_Load(object sender, EventArgs e) 
        { 
            if (this.ShowOnlyFirstLevel) 
            { 
                SiteMapNodeCollection nodes = SiteMap.RootNode.ChildNodes; 
     
                for (int i=0; i <= nodes.Count; i++) 
                { 
                    Tab tab = new Tab(); 
     
                    if (i < nodes.Count) 
                    { 
                        SiteMapNode node1 = nodes[i]; 
                        tab.Text = node1.Title; 
                        tab.NavigateUrl = node1.Url; 
                    } 
                    else 
                    { 
                        tab.Width = System.Web.UI.WebControls.Unit.Pixel(290); 
                        tab.CssClass = "logo"
                        tab.NavigateUrl = "http://www.telerik.com/"
                    } 
     
                    this.RadTabstrip1.Tabs.Add(tab); 
                } 
     
                ... 
        } 

    Do let us know if this helps.

    All the best,
    Pepi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Philip
    Philip avatar
    8 posts
    Registered:
    16 Jun 2008
    16 Dec 2008
    Link to this post
    Hello,

    Thank you for the suggestion, but it doesn't do what i expected.

    it now shows the following:
    | Home | page 1 | page 2 |  COMPANY LOGO |                                                |

    but the company logo must be outlined on the right of the menu bar.
    like this:
    | Home | page 1 | page 2 |                                                 | COMPANY LOGO |

    I tried doing this with a break between page2 | "break" | company logo
    but i can't give the break width 100%

    Also it only works if I add the tab.text value:

                        tab.Width = System.Web.UI.WebControls.Unit.Pixel(290);
                        tab.CssClass = "logo";
                        tab.NavigateUrl = "http://www.telerik.com/";
                        tab.Text = "test";

    Can you please help me?

    kind regards,



  4. Pepi
    Pepi avatar
    981 posts
    Registered:
    31 Jan 2017
    19 Dec 2008
    Link to this post
    Hi Philip,

    You could achieve the required functionality by modifying the css class applying to the logo tab. For example you could use margin-left property:

    <style type="text/css">  
    .logo   
    {  
        margin-left: 100px; 
        height: 36px; 
        background: url("http://localhost/hotfix/Sitefinity/Admin/Themes/Default/Images/SiteFinityLogo.gif")!important;  
    }  
    </style> 

    Do let us know if this helps.

    Greetings,
    Pepi
    the Telerik team

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