Custom Style for Each Navigation Node - General Discussions - General Discussions - Progress Community
 General Discussions

Custom Style for Each Navigation Node

  • Custom Style for Each Navigation Node
  • 271565_navigation.png
    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.
  • 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 abackground-color: #3552a6;
    .RadTabStrip .rtsLI+.rtsLI+.rtsLI abackground-color: #66be3e;
    .RadTabStrip .rtsLI+.rtsLI+.rtsLI+.rtsLI abackground-color: #ba4fa0;
    .RadTabStrip .rtsLI+.rtsLI+.rtsLI+.rtsLI+.rtsLI abackground-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
  • 271968_subpages.png
    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.
  • That's a handy bit of css Jordan, I didn't realise that you could keep adding to the rtsLI.
  • Anything?
  • 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