Rank 1
I am trying to convert the existing Classic menu to Prometheus menu and i am facing a problem.
---------------------------------------------------------------------------------On the ASPX Page, i have the below entries
==========================================
<%@ Register Assembly="RadMenu.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>
<link href="../Images/ContainerStyle/Style.css" rel="stylesheet" type="text/css" media="all" />
<table width="99%" border="0" align="center" cellpadding="5px" cellspacing="0" style="background-image:url(../Images/ContainerStyle/Images/bg-menu-main.gif); height:22px">
<tr>
<td >
<rad:RadMenu id="RadMenu1" runat="server" EnableTheming="True" SkinsPath="~/Images/" RadControlsDir="/Images/" Skin="ContainerStyle" Width="940px" EnableScreenBoundaryDetection="false" OnItemClick="RadMenu1_ItemClick" EnableAutoScroll="false" ClickToOpen="true">
<DefaultGroupSettings Flow ="Horizontal" />
<ExpandAnimation Type="None"/>
<CollapseAnimation Type="None" />
</rad:RadMenu >
</td>
</tr>
<tr ><td class="menu-sub">
 </td>
</tr>
</table>
---------------------------------------------------------------------------------On the StyleSheet "../Images/ContainerStyle/Style.css", i have the below entries
======================================================/* RadMenu ContainerStyle skin */
/* This can be used for setting the Height of the Menu and fore color of the Menu Text. */
.RadMenu_ContainerStyle .link
{
text-decoration:none;
color:White;
line-height: 100%;
width:100%;
display:block;
}
/* This can be used for Setting the Text Right Padding,Font Size and Background image the Menu */
.RadMenu_ContainerStyle .link .text
{
HEIGHT:22px;
font:bold 13px 'trebuchet ms', arial, verdana, sans-serif;
PADDING-RIGHT:9px;
DISPLAY: block;
PADDING-LEFT: 9px;
FLOAT:left;
PADDING-BOTTOM:0px;
MARGIN:0px;
PADDING-TOP:0px;
color:White;
}
/* This can be used for Setting onMouse over Style of the Menu. Here on mouse over border-top,
border-left,border-right,background image and fore color can be Set.
*/
.RadMenu_ContainerStyle .link:hover .text,
.RadMenu_ContainerStyle .focused .text,
.RadMenu_ContainerStyle .expanded .text
{
border-top: 1px #cccdc4;
background-image:none;
color:#000;
border-bottom-color:White;
background-color:White; /*This change is made due to Div is placed*/
text-align:center;
DISPLAY: block;
PADDING-RIGHT:9px;
PADDING-LEFT: 9px;
PADDING-BOTTOM:0px;
PADDING-TOP:0px;
MARGIN:0px;
FLOAT:left;
cursor:pointer; /* On Mouse Over cursor style should be pointer. */
}
/* SubMenu Sliding Base */
.menu-sub
{
BACKGROUND: #fff;
PADDING-BOTTOM: 5px;
FONT: 11px 'trebuchet ms', arial, verdana, sans-serif;
PADDING-TOP: 5px;BORDER-BOTTOM: #cccdc4 2px solid;
TEXT-ALIGN: center;
}
/* This can be used for Setting Style of the SubMenu. Here border-top,
border-left,border-right,background image,font,padding and fore color can be Set.
*/
.RadMenu_ContainerStyle .group .text
{
border-right: #CCCCCC 1px solid;
/*PADDING-RIGHT: 10px;
PADDING-LEFT: 10px; BACKGROUND: #fff;*/
PADDING-BOTTOM: 5px;
FONT: 11px 'trebuchet ms', arial, verdana, sans-serif;
PADDING-TOP: 4px;
PADDING-RIGHT: 9px;
PADDING-LEFT: 8.5px;
TEXT-ALIGN: center;
color:#0080ff;
height:15px;
/*To be change*/
}
/* This can be used for Setting onMouse over Style of the SubMenu. Here on mouse over border-top,
border-left,border-right,background color and fore color can be Set.
*/
.RadMenu_ContainerStyle .group .link:hover .text,
.RadMenu_ContainerStyle .group .focused .text,
.RadMenu_ContainerStyle .group .expanded .text
{
/*border-right: #CCCCCC 1px solid;*/
background-color:#0080ff;
/*background-color:#FF6600;*/
color:#fff;
PADDING-RIGHT: 9px;
PADDING-LEFT: 8.5px;
padding-top:4px;
padding-bottom:5px;
height:15px;
}
.RadMenu_ContainerStyle .group .link:hover,
.RadMenu_ContainerStyle .group .focused,
.RadMenu_ContainerStyle .group .expanded
{
border:none;
overflow:hidden;
}
.RadMenu_ContainerStyle .horizontal .item { border-right: 0px solid #353535; }
.RadMenu_ContainerStyle .horizontal .last { border-right: 0; }
/* RadMenuStyle Ends Here */
----------------------------------------------------------------------------------------------------------------------------------------------------------
Now i am changing the above code into "Prometheus"
On the ASPX Page, i have the below entries
==========================================
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<link href="../Skins/Default/Menu.Default.css" rel="stylesheet" type="text/css" media="all" />
<table width="99%" border="0" align="center" cellpadding="5px" cellspacing="0" style="background-image:url(../Images/ContainerStyle/Images/bg-menu-main.gif); height:22px">
<tr>
<td >
<telerik:RadMenu ID="RadMenu1" runat="server" EnableScreenBoundaryDetection="false"
OnItemClick="RadMenu1_ItemClick" EnableAutoScroll="false" ClickToOpen="true"
ExpandAnimation-Type="none" CollapseAnimation-Type="none" DefaultGroupSettings-Flow="horizontal"
EnableTheming="True" Width="940px" skin="Default" EnableEmbeddedSkins="false"
/>
</td>
</tr>
<tr><td class="sub-menu"> </td></tr>
</table>
----------------------------------------------------------------------------------------------------------------------------------------------------------
On the StyleSheet "../Skins/Default/Menu.Default.css", i changed the previous entries with "control-specific prefix ("rm") and the capitalization of the first letter of the "Classic" class names afterwards".
=================================================================================
/* RadMenu Default skin */
/* This can be used for setting the Height of the Menu and fore color of the Menu Text. */
.RadMenu_Default .rmLink
{
text-decoration:none;
color:White;
line-height: 100%;
width:100%;
display:block;
}
/* This can be used for Setting the Text Right Padding,Font Size and Background image the Menu */
.RadMenu_Default .rmLink .text
{
HEIGHT:22px;
font:bold 13px 'trebuchet ms', arial, verdana, sans-serif;
PADDING-RIGHT:9px;
DISPLAY: block;
PADDING-LEFT: 9px;
FLOAT:left;
PADDING-BOTTOM:0px;
MARGIN:0px;
PADDING-TOP:0px;
color:White;
}
/* This can be used for Setting onMouse over Style of the Menu. Here on mouse over border-top,
border-left,border-right,background image and fore color can be Set.
*/
.RadMenu_Default .rmLink:hover .text,
.RadMenu_Default .rmFocused .text,
.RadMenu_Default .rmExpanded .text
{
border-top: 1px #cccdc4;
background-image:none;
color:#000;
border-bottom-color:White;
background-color:White; /*This change is made due to Div is placed*/
text-align:center;
DISPLAY: block;
PADDING-RIGHT:9px;
PADDING-LEFT: 9px;
PADDING-BOTTOM:0px;
PADDING-TOP:0px;
MARGIN:0px;
FLOAT:left;
cursor:pointer; /* On Mouse Over cursor style should be pointer. */
}
/* SubMenu Sliding Base */
.menu-sub
{
BACKGROUND: #fff;
PADDING-BOTTOM: 5px;
FONT: 11px 'trebuchet ms', arial, verdana, sans-serif;
PADDING-TOP: 5px;BORDER-BOTTOM: #cccdc4 2px solid;
TEXT-ALIGN: center;
}
/* This can be used for Setting Style of the SubMenu. Here border-top,
border-left,border-right,background image,font,padding and fore color can be Set.
*/
.RadMenu_Default .rmGroup .text
{
border-right: #CCCCCC 1px solid;
/*PADDING-RIGHT: 10px;
PADDING-LEFT: 10px; BACKGROUND: #fff;*/
PADDING-BOTTOM: 5px;
FONT: 11px 'trebuchet ms', arial, verdana, sans-serif;
PADDING-TOP: 4px;
PADDING-RIGHT: 9px;
PADDING-LEFT: 8.5px;
TEXT-ALIGN: center;
color:#0080ff;
height:15px;
/*To be change*/
}
/* This can be used for Setting onMouse over Style of the SubMenu. Here on mouse over border-top,
border-left,border-right,background color and fore color can be Set.
*/
.RadMenu_Default .rmGroup .rmLink:hover .text,
.RadMenu_Default .rmGroup .rmFocused .text,
.RadMenu_Default .rmGroup .rmExpanded .text
{
/*border-right: #CCCCCC 1px solid;*/
background-color:#0080ff;
/*background-color:#FF6600;*/
color:#fff;
PADDING-RIGHT: 9px;
PADDING-LEFT: 8.5px;
padding-top:4px;
padding-bottom:5px;
height:15px;
}
.RadMenu_Default .rmGroup .rmLink:hover,
.RadMenu_Default .rmGroup .rmFocused,
.RadMenu_Default .rmGroup .rmExpanded
{
border:none;
overflow:hidden;
}
.RadMenu_Default .rmHorizontal .rmItem { border-right: 0px solid #353535; }
.RadMenu_Default .rmHorizontal .rmLast { border-right: 0; }
/* RadMenuStyle Ends Here */
----------------------------------------------------------------------------------------------------------------------------------------------------------
Now when i try to execute the code, it doesn't work properly. What am i doing wrong? Pls. help.
4 Answers, 1 is accepted
You should also replace ".text" with ".rmText". All CSS classes should have a "rm" prefix.
I hope this helps,
Albert
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
When i checked it on IE8 Beta 1, its not working properly. What am i doing wrong?
Regards
Raj
IE8 is not in the list of supported browsers yet. We have already began extensive testing in preparation for cross-browser compatability with IE 8. We will try to provide a hotfix soon after the official version of the browser is released, but we cannot commit to a specific time frame at the moment.
Best wishes,
Peter
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Regards
Rajagopalan