This is a migrated thread and some comments may be shown as answers.

Styling Menu Without Skin

6 Answers 125 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Lynn
Top achievements
Rank 2
Lynn asked on 22 Apr 2010, 01:34 PM
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

6 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 23 Apr 2010, 12:45 PM
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.
0
Lynn
Top achievements
Rank 2
answered on 23 Apr 2010, 03:06 PM
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!


0
Accepted
Yana
Telerik team
answered on 23 Apr 2010, 03:12 PM
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.
0
Lynn
Top achievements
Rank 2
answered on 23 Apr 2010, 04:51 PM
Yana,

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

Hope you have a great week-end!

Lynn
0
Madhavi
Top achievements
Rank 1
answered on 03 Nov 2015, 12:31 PM
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.
0
Ivan Danchev
Telerik team
answered on 06 Nov 2015, 08:07 AM
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
Tags
Menu
Asked by
Lynn
Top achievements
Rank 2
Answers by
Yana
Telerik team
Lynn
Top achievements
Rank 2
Madhavi
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or