Support Multiple Style Changes?

[Seth]

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.

[MasterChiefMasterChef]

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" />
</siteMapNode>

 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

[Seth]

Thanks!

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">
    <Nodes>
        <telerik:RadSiteMapNode Text="Shipping" runat="server" Enabled="false" CssClass="Primary">
            <Nodes>
                <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>
            </Nodes>
        </telerik:RadSiteMapNode>
    </Nodes>
</telerik:RadSiteMap>

[Kate]

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;
           }

Greetings,
Kate
the Telerik team