Menu Last Item graphic

[Michael VS]

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
{
    background: transparent url('img/menucorner.gif') no-repeat;
    background-position: 0px 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.

[Yana]

Hello Michael,

Please try it like this:

.RadMenu_Dest .rootGroup .last
{
    background: transparent url('img/menucorner.gif') no-repeat !important;
    background-position: 0px 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.

[Michael VS]

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-height: 15px;
    height: 39px;
    border-left: solid 1px #db4d4d;
}

.RadMenu_Dest .item
{
    width: 125px;
    whitewhite-space: normal;
    font-weight: bolder;
}

.RadMenu_Dest .link .text
{
    padding-right: 20px;
}

.RadMenu_Dest .link:hover,
.RadMenu_Dest .focused,
.RadMenu_Dest .expanded
{
    background: #cc0000;
    border-bottom: 3px solid #cc0000;
    border-top: 1px solid #cc0000;
    color: #ff975c;
    cursor: pointer;
}

.RadMenu_Dest .link:hover .text,
.RadMenu_Dest .focused .text,
.RadMenu_Dest .expanded .text
{
    border-top: 1px solid #cc0000;
}

.RadMenu_Dest .rootGroup .disabled:hover
{
    border-bottom: 2px solid #cc0000;
    border-top: 2px solid #cc0000;
    background: #cc0000;
}

.RadMenu_Dest .rootGroup .disabled:hover .text
{
    border-top: 1px solid #cc0000;
}

.RadMenu_Dest .text
{
    padding: 0px 15px;
    font-size: 11px;
}

.RadMenu_Dest .group
{
    background: white;
    border: 0px;
}

.RadMenu_Dest .group .link
{
    background: red;
    text-align: left;
    padding-right: 0px;
}

.RadMenu_Dest .group .text
{
    padding-left:6px;
    padding-right: 40px;
    font-weight:normal; /* added */
}


.RadMenu_Dest .group .item
{
    height: 20px; /* 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-left: 1px solid #bfcde3;
    border-right: 1px 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
{
    background: black;
    font-size:1px;
    padding-top: 2px;
    border-left: solid 1px #bfcde3;
    border-right: solid 1px #bfcde3;
}


.RadMenu_Dest .expandLeft,
.RadMenu_Dest .expandRight
{
    background:transparent url(img/groupImage.gif) rightright center no-repeat;
    margin: 0px;
}


.RadMenu_Dest_rtl .group .link:hover .expandLeft,
.RadMenu_Dest_rtl .group .link:hover .expandRight
{
    background:transparent url(img/left.gif) left center no-repeat;
    margin: 0px 1px;
    padding-left: 8px;
}

.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
{
    background: transparent url('img/menucorner.gif') no-repeat;
    background-position: 0px 10px;
}

[Yana]

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
{
    background: transparent url('img/menucorner.gif') no-repeat;
    background-position: 0px 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.

[Ryan Mariotti]

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-position: 0px 15px;
}

So using the AJAX RadMenu, how might I present a customized rounded bottom to my submenus?  Many thanks!
Ryan

[Yana]

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.

[Ryan Mariotti]

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

[Yana]

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.

[Ryan Mariotti]

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

[Dimitar Milushev]

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.

[Ryan Mariotti]

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

Ryan