Converting from Classic to Prometheus

5 posts, 0 answers
  1. Rajagopalan
    Rajagopalan avatar
    4 posts
    Member since:
    Mar 2008

    Posted 12 Mar 2008 Link to this post

    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">
                                    &nbsp</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">&nbsp;</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.

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 13 Mar 2008 Link to this post

    Hello Rajagopalan,

    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
  3. Rajagopalan
    Rajagopalan avatar
    4 posts
    Member since:
    Mar 2008

    Posted 13 Mar 2008 Link to this post

    Thanks Albert .  It worked fine on IE7.

    When i checked it on IE8 Beta 1, its not working properly.  What am i doing wrong?

    Regards
    Raj

  4. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 13 Mar 2008 Link to this post

    Hi Rajagopalan,

    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
  5. Rajagopalan
    Rajagopalan avatar
    4 posts
    Member since:
    Mar 2008

    Posted 13 Mar 2008 Link to this post

    Thanks Peter.

    Regards
    Rajagopalan
Back to Top