Support Multiple Style Changes?

4 posts, 0 answers
  1. Seth
    Seth avatar
    66 posts
    Member since:
    Oct 2009

    Posted 13 Feb 2013 Link to this post

    I have a page where I have a number of sitemap controls.  Each one may have a different background color.  For some of the sitemaps, I can use the default font, color, background hover color, etc.  For the others, I need to change different attributes.  I tried using the CssClass to override the color as well as the ForeColor attribute on the control and the nodes but alas, it did not work.  I know I can override the group css class, but that's not an option as far as I can see, it would override all of my sitemap controls.

    Please advise if there is a solution to my issue.  I can supply a screenshot if that is helpful to understanding what I am trying to accomplish.
  2. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 14 Feb 2013 Link to this post

    Hi Seth,

    It should be simple enough to apply CSS classes to each siteMapNode. If you take a look at 
    this demo (which is in the process of being formatted properly), you will see that each node is given a category and then given a specific css class. The only unique thing being applied to each siteMapNode is a different font color. Let's say you had a siteMapNode with category "ASPNET":
    <siteMapNode title="ASP.NET AJAX Controls" category="ASPNET">
                    <siteMapNode title="Description" />
                    <siteMapNode title="Demos" />
                    <siteMapNode title="Videos" />

     In the code-behind you would use the 'category' variable to access specific siteMapNodes at a time. Try isolating the demo to see exactly how this is implemented.

    Good luck,
    Master Chief
  3. Seth
    Seth avatar
    66 posts
    Member since:
    Oct 2009

    Posted 15 Feb 2013 Link to this post


    Only problem I am still having is that the root node text doesn't change.  What could I be doing wrong?  I have the CssClass hardcoded to the page, I don't need it dynamic like they have it as I am not databinding...
    .RadSiteMap .Primary .rsmItem a.rsmLink {
        color: White !important;
    .RadSiteMap .Primary .rsmItem a.rsmLink:hover {
        color: Black !important;
    <telerik:RadSiteMap ID="rsmShipping" runat="server" CssClass="Primary">
            <telerik:RadSiteMapNode Text="Shipping" runat="server" Enabled="false" CssClass="Primary">
                    <telerik:RadSiteMapNode Text="My Shipments" runat="server"></telerik:RadSiteMapNode>
                    <telerik:RadSiteMapNode Text="Create A Shipment" runat="server"></telerik:RadSiteMapNode>
                    <telerik:RadSiteMapNode Text="My Manifests" runat="server"></telerik:RadSiteMapNode>
  4. Kate
    Kate avatar
    1898 posts

    Posted 19 Feb 2013 Link to this post

    Hello Seth,

    You can use the following css class selectors in case you need to change the different color of the different level of nodes in the RadSiteMap control:
    /*setting color for the zero level nodes in the sitemap */
           div.RadSiteMap_Default .rsmLevel .rsmItem.rsmDisabled.Primary a.rsmLink {
               color: red;
               div.RadSiteMap_Default .rsmLevel .rsmItem.rsmDisabled.Primary a.rsmLink:hover {
                   color: black;
           /*setting color for the first level nodes in the sitemap */
           div.RadSiteMap_Default .rsmLevel .rsmItem.rsmDisabled.Primary .rsmLevel1 .rsmItem a.rsmLink {
               color: green !important;
               div.RadSiteMap_Default .rsmLevel .rsmItem.rsmDisabled.Primary .rsmLevel1 .rsmItem a.rsmLink:hover {
                   color: yellow !important;

    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top