Styling Menu Without Skin

7 posts, 1 answers
  1. Lynn
    Lynn avatar
    186 posts
    Member since:
    Sep 2006

    Posted 22 Apr 2010 Link to this post

    I am trying to match menu colors/styles to an existing web site, so none of your great supplied skins match the color schemes of the existing site.  In trying to control the menus without a skin, I am encountering a border with white space all around each menu and item (see attached screen capture).

    What properties or css properties do I need to utilize (in what manner) in order to eliminate this spacing issue?

    The code for the menu as pictured is:

            <telerik:RadMenu ID="RadMenu2" runat="server">  
                <Items>  
                    <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="True"   
                        Font-Names="Arial" Font-Size="Small" ForeColor="White"   
                        NavigateUrl="Default.aspx" Text="Home">  
                    </telerik:RadMenuItem>  
                    <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="True"   
                        Font-Names="Arial" Font-Size="Small" ForeColor="White" Text="Overview"   
                        BorderColor="#212121">  
                        <Items>  
                            <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="False"    
                                NavigateUrl="HowWeWork.aspx" Text="How We Work" ForeColor="#FF8000">  
                            </telerik:RadMenuItem>  
                            <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="False"   
                                Font-Names="Arial" Font-Size="Small" ForeColor="#FF8000"   
                                NavigateUrl="ProdsAndSvcs.aspx" Text="Our Products And Services">  
                            </telerik:RadMenuItem>  
                            <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="False"   
                                Font-Names="Arial" Font-Size="Small" ForeColor="#FF8000"   
                                NavigateUrl="TransTypes.aspx" Text="Transaction Types">  
                            </telerik:RadMenuItem>  
                            <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="False"   
                                Font-Names="Arial" Font-Size="Small" ForeColor="#FF8000"   
                                NavigateUrl="PropertyTypes.aspx" Text="Property Types">  
                            </telerik:RadMenuItem>  
                        </Items>  
                    </telerik:RadMenuItem>  
                    <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="True"   
                        Font-Names="Arial" Font-Size="Small" ForeColor="White" Text="My Account" BorderStyle="None"  >  
                        <Items>  
                            <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="false"   
                                Font-Names="Arial" Font-Size="Small" ForeColor="#FF8000" Text="My Dashboard" BorderStyle="None">  
                            </telerik:RadMenuItem>  
                            <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="false"   
                                Font-Names="Arial" Font-Size="Small" ForeColor="#FF8000" Text="My Reward Points" BorderStyle="None" >  
                            </telerik:RadMenuItem>  
                        </Items>  
                    </telerik:RadMenuItem>  
                </Items>  
            </telerik:RadMenu> 
    Please bear in mind that the colors, fonts, etc. are not those of the targeted web site, but just simple settings we are using to learn how to control the look and feel of the menus without skins.

    Thanks in advance!
    Lynn
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 23 Apr 2010 Link to this post

    Hi Lynn,

    You should set EnabledEmbeddedSkins property to "false" and Skin property to empty string:

    <telerik:RadMenu ID="RadMenu2" runat="server" Skin="" EnableEmbeddedSkins="false">

    the following styles also set padding for root items ("rmRootGroup") and child items ("rmGroup"), also the text-underline property is removed:

    div.RadMenu .rmLink
    {
        text-decoration: none;
    }
     
    div.RadMenu .rmRootGroup .rmText {
        padding:5px 12px 6px 0;
    }
     
    div.RadMenu .rmGroup .rmText {
        padding:2px 12px 3px 0;
    }


    Greetings,
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lynn
    Lynn avatar
    186 posts
    Member since:
    Sep 2006

    Posted 23 Apr 2010 Link to this post

    Yana,

    Thank you for the response, but I still am having the exact same problem.  The full source code of the .aspx page is:
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title>Test Menu</title> 
        <link href="MenuStyles.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            <Scripts> 
                <%--Needed for JavaScript IntelliSense in VS2010--%> 
                <%--For VS2008 replace RadScriptManager with ScriptManager--%> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> 
            </Scripts> 
        </telerik:RadScriptManager> 
        <script type="text/javascript">  
            //Put your Java Script code here.  
        </script> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
        </telerik:RadAjaxManager> 
       
        <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Simple">  
        </telerik:RadSkinManager> 
        <div> 
            <br /> 
            <br /> 
            <telerik:RadMenu ID="RadMenu2" runat="server">  
                <Items> 
                    <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="True"   
                        Font-Names="Arial" Font-Size="Small" ForeColor="White"   
                        NavigateUrl="Default.aspx" Text="Home">  
                    </telerik:RadMenuItem> 
                    <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="True"   
                        Font-Names="Arial" Font-Size="Small" ForeColor="White" Text="Overview"   
                        BorderColor="#212121">  
                        <Items> 
                            <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="False"    
                                NavigateUrl="HowWeWork.aspx" Text="How We Work" ForeColor="#FF8000">  
                            </telerik:RadMenuItem> 
                            <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="False"   
                                Font-Names="Arial" Font-Size="Small" ForeColor="#FF8000"   
                                NavigateUrl="ProdsAndSvcs.aspx" Text="Our Products And Services">  
                            </telerik:RadMenuItem> 
                            <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="False"   
                                Font-Names="Arial" Font-Size="Small" ForeColor="#FF8000"   
                                NavigateUrl="TransTypes.aspx" Text="Transaction Types">  
                            </telerik:RadMenuItem> 
                            <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="False"   
                                Font-Names="Arial" Font-Size="Small" ForeColor="#FF8000"   
                                NavigateUrl="PropertyTypes.aspx" Text="Property Types">  
                            </telerik:RadMenuItem> 
                        </Items> 
                    </telerik:RadMenuItem> 
                    <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="True"   
                        Font-Names="Arial" Font-Size="Small" ForeColor="White" Text="My Account" BorderStyle="None"  > 
                        <Items> 
                            <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="false"   
                                Font-Names="Arial" Font-Size="Small" ForeColor="#FF8000" Text="My Dashboard" BorderStyle="None">  
                            </telerik:RadMenuItem> 
                            <telerik:RadMenuItem runat="server" BackColor="#212121" Font-Bold="false"   
                                Font-Names="Arial" Font-Size="Small" ForeColor="#FF8000" Text="My Reward Points" BorderStyle="None" > 
                            </telerik:RadMenuItem> 
                        </Items> 
                    </telerik:RadMenuItem> 
                </Items> 
            </telerik:RadMenu> 
            <br /> 
            <br /> 
        </div> 
        </form> 
    </body> 
    </html> 
     
    The code for the style sheet entries is:
    body {  
    }  
    div.RadMenu .rmLink  
    {  
        text-decoration: none;  
    }  
    div.RadMenu .rmRootGroup .rmText  
    {  
        padding:5px 12px 6px 0;  
    }  
    div.RadMenu .rmGroup .rmText  
    {  
        padding:2px 12px 3px 0;  
    The results of this code are shown in the new attached graphic.

    Thanks!


  5. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 23 Apr 2010 Link to this post

    Hi Lynn,

    You missed to set  Skin and EnableEmbeddedSkins properties of the menu as I suggested.

    Best regards,
    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.
  6. Lynn
    Lynn avatar
    186 posts
    Member since:
    Sep 2006

    Posted 23 Apr 2010 Link to this post

    Yana,

    What an idiot I am!  Done, and works great!  Thanks!

    Hope you have a great week-end!

    Lynn
  7. Madhavi
    Madhavi avatar
    3 posts
    Member since:
    Oct 2015

    Posted 03 Nov 2015 Link to this post

    Is there any inbuilt skin for telerik  radmenu for responsiveness. Means that menu strip works responsively for different devices. I tried Bootstrap Skin , but it is not work responsively. Need your help.
  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    830 posts

    Posted 06 Nov 2015 Link to this post

    Hello,

    The RadMenu's responsive capabilities come from the RenderMode set to the control and are not dependent on the skin. You can find more information on the Menu's responsive design and the different render modes in the Responsive Adaptive and Elastic Capabilities documentation article.

    Regards,
    Ivan Danchev
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017