More in this section

Forums / General Discussions / Custom Style for Each Navigation Node

Custom Style for Each Navigation Node

6 posts, 0 answered
  1. Amir
    Amir avatar
    33 posts
    Registered:
    24 Dec 2010
    17 May 2011
    Link to this post
    How would someone go about recreating the attached image with using the Navigation Controls in SF?  As you can see, there is a custom style for EACH node, as well as a style for the selected node (slightly taller than the rest).   Is it even possible?  Thank you.
  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    18 May 2011
    Link to this post
    Hi Amir,


    You can easily achieve this with CSS. Here is a code for coloring the menu as in your design:

    .RadTabStrip, .RadTabStrip .rtsUL {
        font-family: Arial;
        text-transform:lowercase;
        font-size: 15px;
        height: 40px;
        background-color: white;
    }
     
    .RadTabStrip .rtsUL .rtsLI {
        position:relative;
        float:left;
    }
     
    .RadTabStrip .rtsUL .rtsLI .rtsLink {
        color: white;
        margin-top: 11px;
        background-color: black;
        line-height: 29px;
    }
     
    .RadTabStrip .rtsLI+.rtsLI a{background-color: #3552a6;}
    .RadTabStrip .rtsLI+.rtsLI+.rtsLI a{background-color: #66be3e;}
    .RadTabStrip .rtsLI+.rtsLI+.rtsLI+.rtsLI a{background-color: #ba4fa0;}
    .RadTabStrip .rtsLI+.rtsLI+.rtsLI+.rtsLI+.rtsLI a{background-color: #f01914;}
     
    .RadTabStrip .rtsUL .rtsLI .rtsLink.rtsSelected {
        padding-top: 11px;
        margin-top: 0px;
    }

    Here is the final result:



    Also you can use jQuery to add a class to every item with .eq() function:

    $(document).ready(function() {
         $('.RadTabStrip ul'). eq(0).addClass('first-item'); // or "home"
    })


    Best wishes,
    Jordan
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Amir
    Amir avatar
    33 posts
    Registered:
    24 Dec 2010
    18 May 2011
    Link to this post
    Thank you Jordan,

    The CSS route is the best for us, however, I am still having some issues. 

    I created a user control with the following markup:
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" EnableEmbeddedSkins="false"
        EnableEmbeddedBaseStylesheet="false" EnableSubLevelStyles="false" DataSourceID="SiteMap" MaxDataBindDepth="1">
    </telerik:RadTabStrip>
    <asp:SiteMapDataSource runat="server" ID="SiteMap" StartFromCurrentNode="false" ShowStartingNode="false"
        StartingNodeOffset="0" />
    and placed in my masterpage as such:
    <%@ Register Src="~/UserControls/Navigation/Menu.ascx" TagName="Menu" TagPrefix="uc2" %>
    .....................
    <uc2:Menu ID="Menu1" runat="server" />

    This worked, except that it:
    1. Ignored the "Show In Navigation" property on the pages.  All pages at the root level shown, regardless of that property.
    2. We also have a requirement to keep the tab "selected" even if the page is a sub-page of the root node.  The current setup does not do this.

    So, I tried grabbing a navigation widget and setting the custom template to my menu.ascx file (and removed the "DataSourceID" parameter from the RadTabStrip). This caused:

    1. The menu to respect the show in navigation property (which is good), BUT
    2. The selected state no longer appeared, even at the root level.
    3. I presume that we'd still have the sub-pages issue in this scenario as well.


    Thank you again.

    **EDIT** Please ignore attached image. That requirement was taken care of.
  4. Richard
    Richard avatar
    63 posts
    Registered:
    20 Jan 2010
    19 May 2011
    Link to this post
    That's a handy bit of css Jordan, I didn't realise that you could keep adding to the rtsLI.
  5. Amir
    Amir avatar
    33 posts
    Registered:
    24 Dec 2010
    25 May 2011
    Link to this post
    Anything?
  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    28 May 2011
    Link to this post
    Hello Amir,

    If you are using the Navigation Control in the vertical navigation mode which shows only top level pages you can create a control template for it and bind to the TabDataBound event. This event is executed for each menu item that is going to be displayed and you can assign it special CSS class:
    <%@ Control Language="C#" AutoEventWireup="true"%>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls.SiteMapNavigations" TagPrefix="navcontrols" %>
     
    <script type="text/C#" runat="server">
        protected void Page_Load()
        {
            this.siteMapControl_horizontalsimple.TabDataBound += new Telerik.Web.UI.RadTabStripEventHandler(siteMapControl_horizontalsimple_TabDataBound);
        }
     
        void siteMapControl_horizontalsimple_TabDataBound(object sender, Telerik.Web.UI.RadTabStripEventArgs e)
        {
            //assing custom class to each tab.
            e.Tab.CssClass = "myCss";
        }
    </script>
     
    <navcontrols:SiteMapNavigationTabStrip ID="siteMapControl_horizontalsimple" runat="server" Skin="Sitefinity">
    </navcontrols:SiteMapNavigationTabStrip>

    You should set the control template from the Design Settings for this mode.

    All the best,
    Radoslav Georgiev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
6 posts, 0 answered