Menu Last Item graphic

11 posts, 0 answers
  1. Michael VS
    Michael VS avatar
    14 posts
    Member since:
    Jul 2007

    Posted 12 Feb 2009 Link to this post

    I'm trying to place a background image just under the last item of my sub-menu and its not really happening for me.  I've been trying for two days to get this working and have been pulling my hair out and can't quite work out where I'm going wrong.

    I used the CssBlue skin as a template to create my own skin.

    The code for the menu item is:
    <rad:RadMenu ID="RadMenu1" runat="server" Skin="Dest">  
                <Items> 
                    <rad:RadMenuItem runat="server" NavigateUrl="/link/menu.aspx" Text="this is menu 1">  
                        <Items> 
                            <rad:RadMenuItem runat="server" Text="sub menu 1" NavigateUrl="/link/menu.aspx">  
                            </rad:RadMenuItem> 
                            <rad:RadMenuItem runat="server" Text="sub menu 2" NavigateUrl="/link/menu.aspx">  
                            </rad:RadMenuItem> 
                            <rad:RadMenuItem runat="server" Text="sub menu 3" NavigateUrl="/link/menu.aspx">  
                            </rad:RadMenuItem> 
                        </Items> 
                    </rad:RadMenuItem> 
                    <rad:RadMenuItem runat="server" NavigateUrl="/link/menu.aspx" Text="this is menu 2"></rad:RadMenuItem> 
                    <rad:RadMenuItem runat="server" NavigateUrl="/link/menu.aspx" Text="this is menu 3"></rad:RadMenuItem> 
                    <rad:RadMenuItem runat="server" NavigateUrl="/link/menu.aspx" Text="this is menu 4"></rad:RadMenuItem> 
                    <rad:RadMenuItem runat="server" NavigateUrl="/link/menu.aspx" Text="this is menu 5"></rad:RadMenuItem> 
                    <rad:RadMenuItem runat="server" NavigateUrl="/link/menu.aspx" Text="this is menu 6"></rad:RadMenuItem> 
                    <rad:RadMenuItem runat="server" NavigateUrl="/link/menu.aspx" Text="this is menu 7"></rad:RadMenuItem> 
                    <rad:RadMenuItem runat="server" NavigateUrl="/link/menu.aspx" Text="this is menu 8"></rad:RadMenuItem> 
                </Items> 
            </rad:RadMenu> 
    This is the code for the last item style:
    .RadMenu_Dest .item .last  
    {  
        backgroundtransparent url('img/menucorner.gif'no-repeat;   
        background-position0px 10px;  
    Is this the right style class I should be using?  It doesn't seem to be appearing at all and changing the background position doesn't seem to help either.  Any help appreciated.
  2. Yana
    Admin
    Yana avatar
    4848 posts

    Posted 16 Feb 2009 Link to this post

    Hello Michael,

    Please try it like this:

    .RadMenu_Dest .rootGroup .last     
    {     
        backgroundtransparent url('img/menucorner.gif'no-repeat !important;      
        background-position0px 10px;     
    }    
     

    Regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Michael VS
    Michael VS avatar
    14 posts
    Member since:
    Jul 2007

    Posted 16 Feb 2009 Link to this post

    Hi Yana,

    Thanks for your response.  I tried the style changes but it placed the image in the last menu item on the main top horizontal menu.  I was trying to get the rounded corner image in the last menu item (sub menu 3)  of the sub-menu which appears when you mouse over any of the main menu items.

    The rounded corner image can be found at http://studyinaustralia.gov.au/Sia/templates/images/navbar/menucorner.gif

    The rest of my styles.css file is below:
     
    /* RadMenu Dest skin */ 
     
    .RadMenu_Dest  
    {  
        background#cc0000;  
    }  
     
    .RadMenu_Dest_Context  
    {  
        background:none;  
    }  
     
    .RadMenu_Dest .link  
    {  
        text-decoration:none;  
        color#ffffdf;  
        line-height15px;  
        height39px;  
        border-leftsolid 1px #db4d4d;  
    }  
     
    .RadMenu_Dest .item  
    {  
        width125px;     
        whitewhite-spacenormal;  
        font-weightbolder;  
    }  
     
    .RadMenu_Dest .link .text  
    {  
        padding-right20px;  
    }  
     
    .RadMenu_Dest .link:hover,  
    .RadMenu_Dest .focused,  
    .RadMenu_Dest .expanded 
    {  
        background#cc0000;  
        border-bottom3px solid #cc0000;  
        border-top1px solid #cc0000;  
        color#ff975c;  
        cursorpointer;  
    }  
     
    .RadMenu_Dest .link:hover .text,  
    .RadMenu_Dest .focused .text,  
    .RadMenu_Dest .expanded .text  
    {  
        border-top1px solid #cc0000;  
    }  
     
    .RadMenu_Dest .rootGroup .disabled:hover  
    {  
        border-bottom2px solid #cc0000;  
        border-top2px solid #cc0000;  
        background#cc0000;  
    }  
     
    .RadMenu_Dest .rootGroup .disabled:hover .text  
    {  
        border-top1px solid #cc0000;  
    }  
     
    .RadMenu_Dest .text  
    {  
        padding0px 15px;  
        font-size11px;  
    }  
     
    .RadMenu_Dest .group  
    {  
        backgroundwhite;  
        border0px;  
    }  
     
    .RadMenu_Dest .group .link  
    {  
        backgroundred;  
        text-alignleft;  
        padding-right0px;   
    }  
     
    .RadMenu_Dest .group .text  
    {  
        padding-left:6px;  
        padding-right40px;  
        font-weight:normal/* added */ 
    }  
     
     
    .RadMenu_Dest .group .item  
    {  
        height20px/* controls the sub item height */ 
    }  
     
    .RadMenu_Dest .group .link:hover,  
    .RadMenu_Dest .group .focused,  
    .RadMenu_Dest .group .expanded 
    {  
        background#cc0000;  
        color: White; /* sets the sub item font color to white when hovered */ 
    }  
     
    .RadMenu_Dest .group .link:hover .text,  
    .RadMenu_Dest .group .focused .text,  
    .RadMenu_Dest .group .expanded .text  
    {  
        border-top: 0;  
    }  
     
    .RadMenu_Dest .leftArrow,  
    .RadMenu_Dest .rightArrow,  
    .RadMenu_Dest .topArrow,  
    .RadMenu_Dest .bottomArrow,  
    .RadMenu_Dest .leftArrowDisabled,  
    .RadMenu_Dest .rightArrowDisabled,  
    .RadMenu_Dest .topArrowDisabled,  
    .RadMenu_Dest .bottomArrowDisabled  
    {  
        border-left1px solid #bfcde3;  
        border-right1px solid #bfcde3;  
        background#cc0000 url('img/left.gif'center center no-repeat;  
        width:15px;  
    }  
     
    .RadMenu_Dest .topArrow,  
    .RadMenu_Dest .topArrowDisabled  
    {  
        background-image:url('img/top.gif');  
        width: 100%;  
    }  
     
    .RadMenu_Dest .bottomArrow,  
    .RadMenu_Dest .bottomArrowDisabled  
    {  
        background-image:url('img/bottom.gif');  
        width: 100%;  
    }  
     
    .RadMenu_Dest .rightArrow,  
    .RadMenu_Dest .leftArrow  
    {  
        height:100%;  
    }  
     
    .RadMenu_Dest .rightArrow,  
    .RadMenu_Dest .rightArrowDisabled  
    {  
        background-image:url('img/right.gif');  
    }  
     
     
    .RadMenu_Dest .vertical .separator .text  
    {  
        backgroundblack;  
        font-size:1px;  
        padding-top2px;  
        border-leftsolid 1px #bfcde3;  
        border-rightsolid 1px #bfcde3;  
    }  
     
     
    .RadMenu_Dest .expandLeft,  
    .RadMenu_Dest .expandRight  
    {  
        background:transparent url(img/groupImage.gif) rightright center no-repeat;  
        margin0px;  
    }  
     
     
    .RadMenu_Dest_rtl .group .link:hover .expandLeft,  
    .RadMenu_Dest_rtl .group .link:hover .expandRight  
    {  
        background:transparent url(img/left.gif) left center no-repeat;  
        margin0px 1px;  
        padding-left8px;  
    }  
     
    .RadMenu_Dest_rtl .expandLeft,  
    .RadMenu_Dest_rtl .expandRight  
    {  
        background:transparent url(img/groupImageRTL.gif) left center no-repeat;  
    }  
     
    .RadMenu_Dest .link:hover .expandLeft,  
    .RadMenu_Dest .link:hover .expandRight,  
    .RadMenu_Dest .focused .expandLeft,  
    .RadMenu_Dest .focused .expandRight,  
    .RadMenu_Dest .expanded .expandLeft,  
    .RadMenu_Dest .expanded .expandRight  
    {  
        background:transparent url(img/invertedGroupImage.gif) rightright center no-repeat;  
    }  
     
    .RadMenu_Dest .rootGroup .last  
    {  
        backgroundtransparent url('img/menucorner.gif'no-repeat;   
        background-position0px 10px;  
  4. Yana
    Admin
    Yana avatar
    4848 posts

    Posted 17 Feb 2009 Link to this post

    Hi Michael,

    I am sorry for misunderstanding you.

    For the third-level last items you should use the following style:

    .RadMenu_Dest .level2 .last .link     
    {     
        backgroundtransparent url('img/menucorner.gif'no-repeat;      
        background-position0px 10px;     
    }   

    Regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Ryan Mariotti
    Ryan Mariotti avatar
    11 posts
    Member since:
    Mar 2010

    Posted 27 Mar 2010 Link to this post

    Yana,

    I am working with DNN 5.2 (RadMenu AJAX) and also would like to have show the fly-down submenu bottom as rounded.  I have a bottom rounded image but cannot get the rounded background-image to extend beyond the containing LI (don't think it's possible in CSS for background-image to extend beyond its container).  see attached image: the last image has a transparent bg color for clarity and you can see the rounded red background image stuck at the bottom, but won't extend past to form a rounded bottom.

    .RadMenu_ .rmLevel1 .rmLast 
    {      
        background:#a1ce40 url('<%=SKINPATH%>/images/menucorner.gif'no-repeat ; 
        background-position0px 15px
    }   

    So using the AJAX RadMenu, how might I present a customized rounded bottom to my submenus?  Many thanks!
    Ryan
  6. Yana
    Admin
    Yana avatar
    4848 posts

    Posted 30 Mar 2010 Link to this post

    Hi Ryan Mariotti,

    Our latest version of the controls provides EnableRoundedCorners property for rounded corners, please check the examples here.

    Best wishes,
    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.
  7. Ryan Mariotti
    Ryan Mariotti avatar
    11 posts
    Member since:
    Mar 2010

    Posted 30 Mar 2010 Link to this post

    Yana,

    Thanks for the reply.  Follow-up question: I read about the EnableRoundedCornders (and EnableShadows) property, but it didn't appear to have any effect when I applied these properties to my DotNetNuke skin:

    <dnn:RADMENU runat="server" id="dnnRADMENUVista" Skin="Vista" EnableEmbeddedSkins="true" EnableRoundedCorners="true" EnableShadows="true" /> 

    Can you confirm that these properties are available in the DotNetNuke version of the RadControl.  I am using DNN 5.2 Community Distribution (my Telerik.Web.UI.dll version in the DNN /bin folder is 2009.3.1104.35)

    Thank you,
    Ryan
  8. Yana
    Admin
    Yana avatar
    4848 posts

    Posted 31 Mar 2010 Link to this post

    Hi Ryan Mariotti,

    Actually they are available from Q1 2010 ( 2010.1.309 ) version.

    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.
  9. Ryan Mariotti
    Ryan Mariotti avatar
    11 posts
    Member since:
    Mar 2010

    Posted 31 Mar 2010 Link to this post

    Yana,

    I'm having difficulty upgrading the Telerik skinobjects (RadMenu) for my DotNetNuke 5.2 Community installation.  I have followed the installation instructions word-for-word.  When attempting to install Telerik.DNN.SkinObjects_2010_1_309_DNN.zip, the installer tells me that I already have the module installed, so I choose to "Repair".  Everything goes as expected, but still no RoundedCorners or Shadows.

    I then manually replaced the 2009 version with the newest 2010.1.309.20 version (which I downloaded separately: "DLL, scripts and skins only"), which resulted in an error which was solved by updating web.config with the correct DLL version:

          <dependentAssembly> 
            <assemblyIdentity name="Telerik.Web.UI" publicKeyToken="121fae78165ba3d4" /> 
            <bindingRedirect oldVersion="2008.1.1.20-2010.4.2000.20" newVersion="2010.1.309.20" /> 
          </dependentAssembly> 

    Still no RoundedCorners or Shadows.  Please advise on how to update the RadMenu component within DotNetNuke 5.2 to the lastest version.

    I need to ensure that I can get the DNN RadMenu performing the same as the ASP.NET AJAX native control before I commit my $800 to purchase, so your ongoing help is valued (to me and others with the same issue)!  Thank you!

    Ryan
  10. Dimitar Milushev
    Admin
    Dimitar Milushev avatar
    555 posts

    Posted 06 Apr 2010 Link to this post

    Hello Ryan,

    You can edit the \DesktopModules\telerik.skinobjects\RadMenu.ascx file and set the two properties (EnableRoundedCorners="true" EnableShadows="true") directly to the RadMenu instance.

    We'll make sure to expose those two properties through the SkinObject with the next update.

    Regards,
    Dimitar Milushev
    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.
  11. Ryan Mariotti
    Ryan Mariotti avatar
    11 posts
    Member since:
    Mar 2010

    Posted 06 Apr 2010 Link to this post

    Aha!  Setting the properties directly in the RadMenu.ascx file (DotNetNuke) worked.  Thanks for your help,

    Ryan
Back to Top