Simple CSS Example

3 posts, 0 answers
  1. DTech
    DTech avatar
    17 posts
    Member since:
    Aug 2009

    Posted 16 Mar 2010 Link to this post

    I've searched the help documents and forum for a simple CSS example of controlling the appearance of the RadMenu's items and sub menu items.  Any simple examples of just the CSS controlling the main menu items and sub menu items forecolor and background out there? 

    All I need to do is make the menu background blue and forecolor white for the main menu items.  Then make the submenu items white background and black forecolor.
  2. Yana
    Admin
    Yana avatar
    4841 posts

    Posted 17 Mar 2010 Link to this post

    Hi Mario,

    I suggest in your case you use Simple skin and overwrite the colors like this:

    <telerik:RadMenu ID="menu1" runat="server" Skin="Simple">
        <Items>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    and the styles:

    <style type="text/css">
        /* for root items */
                 
        div.RadMenu_Simple ul.rmRootGroup
        {
            background-color: blue;
        }
         
         div.RadMenu_Simple .rmLink
         {
             color: #fff;
         }
          
         /* for hover, focused, expanded items */
         div.RadMenu_Simple .rmItem .rmLink:hover,
         div.RadMenu_Simple .rmItem .rmFocused,
         div.RadMenu_Simple .rmItem .rmSelected,
         div.RadMenu_Simple .rmItem .rmExpanded {
                background:#fff none repeat scroll 0 0;
                border:1px solid blue;
                color: blue;
        }
         
        /*for subitems */
         
        div.RadMenu_Simple .rmGroup
        {
            background: #fff;
        }
         
         div.RadMenu_Simple .rmGroup .rmLink
         {
             color: #000;
         }
          
         /* for hover, focused, expanded items */
         div.RadMenu_Simple .rmGroup .rmItem .rmLink:hover,
         div.RadMenu_Simple .rmGroup .rmItem .rmFocused,
         div.RadMenu_Simple .rmGroup .rmItem .rmSelected,
         div.RadMenu_Simple .rmGroup .rmItem .rmExpanded {
                background:#000 none repeat scroll 0 0;
                border:1px solid #fff;
                color: #fff;
        }
    </style>


    Sincerely yours,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. DTech
    DTech avatar
    17 posts
    Member since:
    Aug 2009

    Posted 17 Mar 2010 Link to this post

    Thank you.  That worked!
Back to Top