Unable to get a custom menu to work on my ASP page

4 posts, 0 answers
  1. Ben
    Ben avatar
    2 posts
    Member since:
    Feb 2016

    Posted 03 Feb Link to this post

    right i've read so many threads on how to implement a custom skin for a telerik menu onto my webpage this is what I currently have coded.

     In my web config I have:

    <appSettings>
    <add key="Telerik.Skin" value="Glow2"/>
    <add key="Telerik.EnableEmbeddedSkins" value="false"/>
    <add key="Telerik.EnableEmbeddedBaseStylesheet" value="false"/>
    <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled" />
    <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled" /></appSettings>

     

    in my site master I have

    <link href="Skins/Glow2/Menu.Glow2.css" rel="stylesheet" type="text/css" />

     

    and for my menu code I use:

    <li>
    <asp:LoginView ID="SysAdminLV" runat="server">
    <RoleGroups>
    <asp:RoleGroup Roles="Masters">
    <ContentTemplate>
    <telerik:RadMenu ID="SysAMenu" runat="server" Skin="Glow2">
    <Items>
    <telerik:RadMenuItem runat="server" Text="Sys Admin" NavigateUrl="~/Default.aspx">
    <Items>
    <telerik:RadMenuItem runat="server" Text="Create User" NavigateUrl="~/Staff/Masters/New_User.aspx"></telerik:RadMenuItem>
    <telerik:RadMenuItem runat="server" Text="Manage Users" NavigateUrl="~/Staff/Masters/Manage_Users.aspx"></telerik:RadMenuItem>
    </Items>
    </telerik:RadMenuItem>
    </Items>
    </telerik:RadMenu>
    </ContentTemplate>
    </asp:RoleGroup>
    </RoleGroups>
    </asp:LoginView>
    </li>

     

     

    Now my custom skin is called Glow2 because I made very little changes to the "Glow" skin, im not getting an error or anything the page loads fine its just the links that I have do not pull through the syling from the Glow2 Skin. attached is what the page looks like when loaded.my "home" and "Sysadmin" links are telerik the rest are coded through CSS at the moment.

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 08 Feb Link to this post

    Hello Ben,

    It is possible that disabling the base style sheets lead to the appearance shown in the screenshot:
    <add key="Telerik.EnableEmbeddedBaseStylesheet" value="false"/>
    Another possibility is if stronger selectors are needed, in order to apply the styles from the custom rules you added. Could you please post some of the rules so we can test locally whether they would apply to the Menu?

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ben
    Ben avatar
    2 posts
    Member since:
    Feb 2016

    Posted 08 Feb in reply to Ivan Danchev Link to this post

    .RadMenu_Glow2 .rmDisabled .rmIcon,.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled .rmText:before,.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled:hover .rmText:before{filter:alpha(opacity=40);opacity:.4}.RadMenu_Glow2{color:#465665;font:normal 13px/22px Arial,Helvetica,sans-serif;color:#ffffff;line-height:30px}.RadMenu_Glow2 .rmVertical.rmToggleHandles .rmRootLink .rmText{padding-right:35px}.RadMenu_Glow2 a.rmImageOnly .rmLeftImage{margin:7px 10px 8px 9px}.RadMenu_Glow2 a.rmImageOnly:hover .rmLeftImage{margin-bottom:12px}.RadMenu_Glow2 .rmLink{color:#ffffff;text-decoration:none}.RadMenu_Glow2 .rmSeparator .rmText{border-color:#606f7e #67798a #4e5e6e #44586a}.RadMenu_Glow2 .rmHorizontal>.rmSeparator,.RadMenu_Glow2 .rmHorizontal>.rmRootScrollGroup>.rmSeparator{margin:0 0 -1px}.RadMenu_Glow2 .rmHorizontal>.rmSeparator .rmText,.RadMenu_Glow2 .rmHorizontal>.rmRootScrollGroup>.rmSeparator .rmText{height:38px;margin:0;border-width:0 1px}.RadMenu_Glow2 .rmVertical>.rmSeparator .rmText,.RadMenu_Glow2 .rmVertical>.rmRootScrollGroup>.rmSeparator .rmText{margin:1px 8px;border-width:1px 0}.RadMenu_Glow2 .rmGroup.rmVertical>.rmSeparator .rmText,.RadMenu_Glow2 .rmScrollWrap>.rmVertical>.rmSeparator .rmText{margin-left:8px}.RadMenu_Glow2 .rmIcon{display:block}.RadMenu_Glow2 .rmToggle{height:26px}.RadMenu_Glow2 .rmRootLink .rmToggle{height:30px}.RadMenu_Glow2 .rmLeftArrow,.RadMenu_Glow2 .rmRightArrow,.RadMenu_Glow2 .rmTopArrow,.RadMenu_Glow2 .rmBottomArrow{border-color:#000000;color:#ffffff;background-color:#5e6c79;border-width:0;border-style:solid;background-image:url('Common/radActionsSprite.png')}.RadMenu_Glow2 .rmLeftArrow:hover,.RadMenu_Glow2 .rmRightArrow:hover,.RadMenu_Glow2 .rmTopArrow:hover,.RadMenu_Glow2 .rmBottomArrow:hover{border-color:#000000;color:#ffffff;background-color:#687684}.RadMenu_Glow2 .rmLeftArrow,.RadMenu_Glow2 .rmRightArrow{height:38px}.RadMenu_Glow2 .rmLeftArrow{border-right-width:1px;background-position:-20px -1106px}.RadMenu_Glow2 .rmLeftArrow:hover{background-position:-70px -1106px}.RadMenu_Glow2 .rmRightArrow{border-left-width:1px;background-position:-20px -1156px}.RadMenu_Glow2 .rmRightArrow:hover{background-position:-70px -1156px}.RadMenu_Glow2 .rmTopArrow,.RadMenu_Glow2 .rmBottomArrow{background-image:url('Menu/rmArrows.png');background-repeat:no-repeat}.RadMenu_Glow2 .rmTopArrow{border-bottom-width:1px;background-position:center -20px}.RadMenu_Glow2 .rmTopArrow:hover{background-position:center -220px}.RadMenu_Glow2 .rmBottomArrow{border-top-width:1px;background-position:center -70px}.RadMenu_Glow2 .rmBottomArrow:hover{background-position:center -270px}.RadMenu_Glow2 .rmTopFix,.RadMenu_Glow2 .rmTopLeft,.RadMenu_Glow2 .rmTopRight,.RadMenu_Glow2 .rmBottomFix,.RadMenu_Glow2 .rmBottomLeft,.RadMenu_Glow2 .rmBottomRight{display:none}.RadMenu_Glow2_Context.rmRoundedCorners ul.rmGroup,.RadMenu_Glow2_Context.RadMenu_Glow2 .rmGroup{padding:0}.RadMenu_Glow2 .rmRootGroup{border:1px solid #44586a;background:#556776 url('Common/radGradientLightV50.png') 0 -20px repeat-x;background-image:linear-gradient(#6a7c8d,#556776);box-shadow:0 0 3px rgba(0,0,0,0.5)}.RadMenu_Glow2 .rmRootGroup.rmVertical{background:#5f7384}.RadMenu_Glow2 .rmHorizontal .rmItem{height:38px}.RadMenu_Glow2 .rmRootGroup.rmHorizontal{border-bottom:0}.RadMenu_Glow2 .rmVertical .rmRootLink .rmExpandRight,.RadMenu_Glow2 .rmVertical .rmRootLink .rmExpandLeft{background-image:url('Menu/rmArrows.png');background-repeat:no-repeat}.RadMenu_Glow2 .rmVertical .rmRootLink .rmExpandRight{margin-right:-10px;padding-right:24px;background-position:right -161px}.RadMenu_Glow2 .rmVertical .rmRootLink .rmExpandLeft{margin-left:-10px;padding-left:24px;background-position:left -511px}.RadMenu_Glow2 .rmVertical .rmRootLink:hover .rmExpandRight,.RadMenu_Glow2 .rmVertical .rmRootLink.rmFocused .rmExpandRight,.RadMenu_Glow2 .rmVertical .rmRootLink.rmSelected .rmExpandRight,.RadMenu_Glow2 .rmVertical .rmRootLink.rmExpanded .rmExpandRight{background-position:right -561px}.RadMenu_Glow2 .rmVertical .rmRootLink:hover .rmExpandLeft,.RadMenu_Glow2 .rmVertical .rmRootLink.rmFocused .rmExpandLeft,.RadMenu_Glow2 .rmVertical .rmRootLink.rmSelected .rmExpandLeft,.RadMenu_Glow2 .rmVertical .rmRootLink.rmExpanded .rmExpandLeft{background-position:left -511px}.RadMenu_Glow2 .rmToggleHandles .rmRootLink .rmExpandTop,.RadMenu_Glow2 .rmToggleHandles .rmRootLink .rmExpandDown,.RadMenu_Glow2 .rmToggleHandles .rmRootLink .rmExpandRight,.RadMenu_Glow2 .rmToggleHandles .rmRootLink .rmExpandLeft{background-image:none}.RadMenu_Glow2 .rmHorizontal .rmRootLink{margin:0;padding:4px 15px;padding:0}.RadMenu_Glow2 .rmHorizontal .rmRootLink .rmText{padding:0;padding:4px 15px;display:block}.RadMenu_Glow2 .rmHorizontal .rmRootLink .rmLeftImage{margin:10px -8px 0 5px}.RadMenu_Glow2 .rmHorizontal .rmRootLink:hover,.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmFocused,.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmSelected{padding-top:0;border-top:4px solid #ffd94e;color:#ffea7c;background:#485969 url('Common/radGradientLightV50.png') 0 -20px repeat-x;background:linear-gradient(#596a7a,#485969)}.RadMenu_Glow2 .rmHorizontal .rmRootLink:hover .rmText,.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmFocused .rmText,.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmSelected .rmText{padding-top:0}.RadMenu_Glow2 .rmHorizontal .rmRootLink:hover .rmLeftImage,.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmFocused .rmLeftImage,.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmSelected .rmLeftImage{margin-top:6px}.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmExpanded{padding-top:0;color:#ffea7c;border-top:4px solid #ffd94e;background:#465665;background:linear-gradient(#475766,#4e5e6e)}.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmExpanded .rmText{padding-top:0}.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmExpanded .rmLeftImage{margin-top:6px}.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmDisabled{border:0;color:#a1aebc;background:0;box-shadow:none}.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmDisabled .rmText{padding-top:4px}.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmDisabled .rmLeftImage{margin-top:10px}.RadMenu_Glow2 .rmVertical .rmRootLink{margin:0;padding:0;border:0;line-height:22px}.RadMenu_Glow2 .rmVertical .rmRootLink .rmText{margin-right:0;padding:4px 35px 4px 15px}.RadMenu_Glow2 .rmVertical .rmRootLink .rmLeftImage{margin:7px 5px 0}.RadMenu_Glow2 .rmVertical .rmRootLink:hover{color:#465665;background:#fbb039 url('Common/radGradientLightV50.png') 0 0 repeat-x;background-image:linear-gradient(#ffd839,#fbb039)}.RadMenu_Glow2 .rmVertical .rmRootLink:hover .rmText.rmExpandRight:before{background-position:-120px -1170px}.RadMenu_Glow2 .rmVertical .rmRootLink:hover .rmText.rmExpandLeft:before{background-position:-120px -1120px}.RadMenu_Glow2 .rmVertical .rmRootLink.rmFocused,.RadMenu_Glow2 .rmVertical .rmRootLink.rmSelected,.RadMenu_Glow2 .rmVertical .rmRootLink.rmExpanded{color:#465665;background:#fbb039 url('Common/radGradientLightV50.png') 0 0 repeat-x;background-image:linear-gradient(#ffd839,#fbb039)}.RadMenu_Glow2 .rmVertical .rmRootLink.rmFocused .rmText.rmExpandRight:before,.RadMenu_Glow2 .rmVertical .rmRootLink.rmSelected .rmText.rmExpandRight:before,.RadMenu_Glow2 .rmVertical .rmRootLink.rmExpanded .rmText.rmExpandRight:before{background-position:-120px -1170px}.RadMenu_Glow2 .rmVertical .rmRootLink.rmFocused .rmText.rmExpandLeft:before,.RadMenu_Glow2 .rmVertical .rmRootLink.rmSelected .rmText.rmExpandLeft:before,.RadMenu_Glow2 .rmVertical .rmRootLink.rmExpanded .rmText.rmExpandLeft:before{background-position:-120px -1120px}.RadMenu_Glow2 .rmVertical .rmRootLink.rmDisabled{border:0;color:#a1aebc;background:0}.RadMenu_Glow2 .rmToggle{margin:0}.RadMenu_Glow2 .rmGroup .rmLeftImage{margin:7px 0 0 6px}.RadMenu_Glow2 .rmGroup,.RadMenu_Glow2 .rmPopup{padding:1px;background:#4e5e6e;box-shadow:0 3px 3px rgba(0,0,0,0.3)}@media \0screen\,screen\9{.RadMenu_Glow2 .rmRoundedCorners .rmItem ul.rmGroup,.RadMenu_Glow2 .rmRoundedCorners ul.rmGroup,.RadMenu_Glow2 .rmRoundedCorners .rmContentTemplate{border:1px solid #455360}}.RadMenu_Glow2 .rmRoundedCorners ul.rmGroup{margin-top:0}.RadMenu_Glow2 .rmRoundedCorners .rmItem .rmGroup,.RadMenu_Glow2 .rmRoundedCorners .rmScrollWrapContainer{padding:0}.RadMenu_Glow2 .rmScrollWrapContainer .rmGroup{box-shadow:none}.RadMenu_Glow2 .rmScrollWrapContainer{background:#ffffff;box-shadow:0 3px 3px rgba(0,0,0,0.3)}.RadMenu_Glow2 .rmGroup .rmItem{height:auto;*line-height:30px}.RadMenu_Glow2 .rmGroup .rmLink{color:#ffffff}.RadMenu_Glow2 .rmGroup .rmLink .rmText{position:relative}.RadMenu_Glow2 .rmGroup .rmLink .rmText:before{content:"";margin-top:-8px;width:16px;height:16px;background-image:url('Common/radActionsSprite.png');background-repeat:no-repeat;display:none;position:absolute;top:50%}.RadMenu_Glow2 .rmGroup .rmLink .rmExpandTop,.RadMenu_Glow2 .rmGroup .rmLink .rmExpandDown,.RadMenu_Glow2 .rmGroup .rmLink .rmExpandRight,.RadMenu_Glow2 .rmGroup .rmLink .rmExpandLeft{*background-image:url('Menu/rmArrows.png');background-repeat:no-repeat}.RadMenu_Glow2 .rmGroup .rmLink .rmExpandTop{background-position:right -10px}.RadMenu_Glow2 .rmGroup .rmLink .rmExpandDown{background-position:right -60px}.RadMenu_Glow2 .rmGroup .rmLink .rmExpandLeft{background-position:right -110px}.RadMenu_Glow2 .rmGroup .rmLink .rmExpandRight{background-position:right -160px}.RadMenu_Glow2 .rmGroup .rmLink:hover .rmExpandTop,.RadMenu_Glow2 .rmGroup .rmLink.rmFocused .rmExpandTop,.RadMenu_Glow2 .rmGroup .rmLink.rmSelected .rmExpandTop,.RadMenu_Glow2 .rmGroup .rmLink.rmExpanded .rmExpandTop{background-position:right -410px}.RadMenu_Glow2 .rmGroup .rmLink:hover .rmExpandDown,.RadMenu_Glow2 .rmGroup .rmLink.rmFocused .rmExpandDown,.RadMenu_Glow2 .rmGroup .rmLink.rmSelected .rmExpandDown,.RadMenu_Glow2 .rmGroup .rmLink.rmExpanded .rmExpandDown{background-position:right -460px}.RadMenu_Glow2 .rmGroup .rmLink:hover .rmExpandLeft,.RadMenu_Glow2 .rmGroup .rmLink.rmFocused .rmExpandLeft,.RadMenu_Glow2 .rmGroup .rmLink.rmSelected .rmExpandLeft,.RadMenu_Glow2 .rmGroup .rmLink.rmExpanded .rmExpandLeft{background-position:right -510px}.RadMenu_Glow2 .rmGroup .rmLink:hover .rmExpandRight,.RadMenu_Glow2 .rmGroup .rmLink.rmFocused .rmExpandRight,.RadMenu_Glow2 .rmGroup .rmLink.rmSelected .rmExpandRight,.RadMenu_Glow2 .rmGroup .rmLink.rmExpanded .rmExpandRight{background-position:right -560px}.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled .rmExpandTop{background-position:right -10px}.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled .rmExpandDown{background-position:right -60px}.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled .rmExpandLeft{background-position:right -110px}.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled .rmExpandRight{background-position:right -160px}.RadMenu_Glow2 .rmGroup .rmLink .rmExpandTop:before,.RadMenu_Glow2 .rmGroup .rmLink .rmExpandDown:before,.RadMenu_Glow2 .rmGroup .rmLink .rmExpandRight:before,.RadMenu_Glow2 .rmGroup .rmLink .rmExpandLeft:before{display:block;right:6px}.RadMenu_Glow2 .rmGroup .rmLink .rmExpandTop:before{background-position:-17px -1017px}.RadMenu_Glow2 .rmGroup .rmLink .rmExpandDown:before{background-position:-17px -1067px}.RadMenu_Glow2 .rmGroup .rmLink .rmExpandRight:before{background-position:-17px -1167px}.RadMenu_Glow2 .rmGroup .rmLink .rmExpandLeft:before{background-position:-17px -1117px}.RadMenu_Glow2 .rmGroup .rmLink:hover,.RadMenu_Glow2 .rmGroup .rmLink.rmFocused,.RadMenu_Glow2 .rmGroup .rmLink.rmSelected,.RadMenu_Glow2 .rmGroup .rmLink.rmExpanded{color:#465665;background:#fbb039 url('Common/radGradientLightV50.png') 0 0 repeat-x;background-image:linear-gradient(#ffd839,#fbb039)}.RadMenu_Glow2 .rmGroup .rmLink:hover .rmExpandTop:before,.RadMenu_Glow2 .rmGroup .rmLink.rmFocused .rmExpandTop:before,.RadMenu_Glow2 .rmGroup .rmLink.rmSelected .rmExpandTop:before,.RadMenu_Glow2 .rmGroup .rmLink.rmExpanded .rmExpandTop:before{background-position:-117px -1017px}.RadMenu_Glow2 .rmGroup .rmLink:hover .rmExpandDown:before,.RadMenu_Glow2 .rmGroup .rmLink.rmFocused .rmExpandDown:before,.RadMenu_Glow2 .rmGroup .rmLink.rmSelected .rmExpandDown:before,.RadMenu_Glow2 .rmGroup .rmLink.rmExpanded .rmExpandDown:before{background-position:-117px -1067px}.RadMenu_Glow2 .rmGroup .rmLink:hover .rmExpandRight:before,.RadMenu_Glow2 .rmGroup .rmLink.rmFocused .rmExpandRight:before,.RadMenu_Glow2 .rmGroup .rmLink.rmSelected .rmExpandRight:before,.RadMenu_Glow2 .rmGroup .rmLink.rmExpanded .rmExpandRight:before{background-position:-117px -1167px}.RadMenu_Glow2 .rmGroup .rmLink:hover .rmExpandLeft:before,.RadMenu_Glow2 .rmGroup .rmLink.rmFocused .rmExpandLeft:before,.RadMenu_Glow2 .rmGroup .rmLink.rmSelected .rmExpandLeft:before,.RadMenu_Glow2 .rmGroup .rmLink.rmExpanded .rmExpandLeft:before{background-position:-117px -1117px}.RadMenu_Glow2 .rmGroup .rmLink.rmFocused{box-shadow:inset 0 0 3px 1px}.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled,.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled:hover{color:#91a2b0;background-image:none!important;background:0}.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled .rmExpandTop:before,.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled:hover .rmExpandTop:before{background-position:-17px -1017px}.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled .rmExpandDown:before,.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled:hover .rmExpandDown:before{background-position:-17px -1067px}.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled .rmExpandRight:before,.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled:hover .rmExpandRight:before{background-position:-17px -1167px}.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled .rmExpandLeft:before,.RadMenu_Glow2 .rmGroup .rmLink.rmDisabled:hover .rmExpandLeft:before{background-position:-17px -1117px}.RadMenu_Glow2 .rmSlide .rmHorizontal .rmItem{margin-bottom:0}.RadMenu_Glow2 .rmVertical .rmGroup,.RadMenu_Glow2 .rmSlide .rmGroup .rmGroup,.RadMenu_Glow2 .rmVertical .rmScrollWrapContainer{border-top:1px solid #4e5e6d}.RadMenu_Glow2 .rmVertical .rmScrollWrapContainer .rmVertical{border:0}.RadMenu_Glow2 .rmMultiColumn{background:#4e5e6e;box-shadow:0 3px 3px rgba(0,0,0,0.3)}.RadMenu_Glow2 .rmMultiColumn .rmGroup{box-shadow:none}.RadMenu_Glow2 .rmGroup .rmLeftArrow,.RadMenu_Glow2 .rmGroup .rmRightArrow{height:36px}.RadMenu_Glow2 .rmGroup .rmLeftArrow{background-position:-20px -1107px}.RadMenu_Glow2 .rmGroup .rmLeftArrow:hover{background-position:-70px -1107px}.RadMenu_Glow2 .rmGroup .rmRightArrow{background-position:-20px -1157px}.RadMenu_Glow2 .rmGroup .rmRightArrow:hover{background-position:-70px -1157px}.RadMenu_Glow2 .rmHorizontal .rmRootLink .rmToggle{margin-top:4px;margin-bottom:4px;height:30px}.RadMenu_Glow2 .rmHorizontal .rmRootLink:hover .rmToggle,.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmFocused .rmToggle,.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmSelected .rmToggle,.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmExpanded .rmToggle{margin-top:0}.RadMenu_Glow2 .rmHorizontal .rmRootLink.rmDisabled .rmToggle{margin-top:4px}.RadMenu_Glow2 .rmRootLink .rmIcon{background-image:url('Menu/rmArrows.png')}.RadMenu_Glow2 .rmHorizontal .rmRootLink .rmIcon{background-position:50% -67px}@media screen\9{.RadMenu_Glow2 .rmHorizontal .rmRootLink .rmIcon{background-position:-2px -67px}}.RadMenu_Glow2 .rmVertical .rmRootLink .rmIcon{background-position:50% -167px}@media screen\9{.RadMenu_Glow2 .rmVertical .rmRootLink .rmIcon{background-position:-2px -167px}}.RadMenu_Glow2 .rmVertical .rmRootLink:hover .rmIcon,.RadMenu_Glow2 .rmVertical .rmRootLink.rmFocused .rmIcon{background-position:50% -567px}@media screen\9{.RadMenu_Glow2 .rmVertical .rmRootLink:hover .rmIcon,.RadMenu_Glow2 .rmVertical .rmRootLink.rmFocused .rmIcon{background-position:-2px -567px}}.RadMenu_Glow2 .rmVertical .rmRootLink.rmDisabled .rmIcon{background-position:50% -167px}@media screen\9{.RadMenu_Glow2 .rmVertical .rmRootLink.rmDisabled .rmIcon{background-position:-2px -167px}}.RadMenu_Glow2 .rmRootGroup .rmHorizontal .rmText{line-height:34px}.RadMenu_Glow2_rtl .rmVertical .rmRootLink .rmText{padding-right:15px;padding-left:35px}.RadMenu_Glow2_rtl .rmHorizontal .rmRootLink .rmLeftImage{margin-left:-8px;margin-right:5px}@media screen\9{.RadMenu_Glow2_rtl .rmVertical .rmRootLink .rmLeftImage{margin-left:-5px}}.RadMenu_Glow2_rtl .rmVertical .rmRootLink .rmIcon{background-position:50% -117px}@media screen\9{.RadMenu_Glow2_rtl .rmVertical .rmRootLink .rmIcon{background-position:-2px -117px}}.RadMenu_Glow2_rtl .rmVertical .rmRootLink:hover .rmIcon,.RadMenu_Glow2_rtl .rmVertical .rmRootLink.rmFocused .rmIcon{background-position:50% -517px}@media screen\9{.RadMenu_Glow2_rtl .rmVertical .rmRootLink:hover .rmIcon,.RadMenu_Glow2_rtl .rmVertical .rmRootLink.rmFocused .rmIcon{background-position:-2px -517px}}.RadMenu_Glow2_rtl .rmVertical .rmRootLink.rmDisabled .rmIcon{background-position:50% -117px}@media screen\9{.RadMenu_Glow2_rtl .rmVertical .rmRootLink.rmDisabled .rmIcon{background-position:-2px -117px}}.RadMenu_Glow2_rtl .rmRootGroup .rmSeparator .rmText{border-color:#7b8a9a #44586a #536676 #67798a}.RadMenu_Glow2_rtl .rmRootGroup .rmLast{border-left:0}.RadMenu_Glow2_rtl .rmGroup .rmLink .rmExpandTop{background-position:left -8px}.RadMenu_Glow2_rtl .rmGroup .rmLink .rmExpandDown{background-position:left -58px}.RadMenu_Glow2_rtl .rmGroup .rmLink .rmExpandLeft{background-position:left -108px}.RadMenu_Glow2_rtl .rmGroup .rmLink .rmExpandRight{background-position:left -158px}.RadMenu_Glow2_rtl .rmGroup .rmLink:hover .rmExpandTop,.RadMenu_Glow2_rtl .rmGroup .rmLink.rmFocused .rmExpandTop,.RadMenu_Glow2_rtl .rmGroup .rmLink.rmSelected .rmExpandTop,.RadMenu_Glow2_rtl .rmGroup .rmLink.rmExpanded .rmExpandTop{background-position:left -408px}.RadMenu_Glow2_rtl .rmGroup .rmLink:hover .rmExpandDown,.RadMenu_Glow2_rtl .rmGroup .rmLink.rmFocused .rmExpandDown,.RadMenu_Glow2_rtl .rmGroup .rmLink.rmSelected .rmExpandDown,.RadMenu_Glow2_rtl .rmGroup .rmLink.rmExpanded .rmExpandDown{background-position:left -458px}.RadMenu_Glow2_rtl .rmGroup .rmLink:hover .rmExpandLeft,.RadMenu_Glow2_rtl .rmGroup .rmLink.rmFocused .rmExpandLeft,.RadMenu_Glow2_rtl .rmGroup .rmLink.rmSelected .rmExpandLeft,.RadMenu_Glow2_rtl .rmGroup .rmLink.rmExpanded .rmExpandLeft{background-position:left -508px}.RadMenu_Glow2_rtl .rmGroup .rmLink:hover .rmExpandRight,.RadMenu_Glow2_rtl .rmGroup .rmLink.rmFocused .rmExpandRight,.RadMenu_Glow2_rtl .rmGroup .rmLink.rmSelected .rmExpandRight,.RadMenu_Glow2_rtl .rmGroup .rmLink.rmExpanded .rmExpandRight{background-position:left -558px}.RadMenu_Glow2_rtl .rmGroup .rmLink .rmExpandTop:before,.RadMenu_Glow2_rtl .rmGroup .rmLink .rmExpandDown:before,.RadMenu_Glow2_rtl .rmGroup .rmLink .rmExpandRight:before,.RadMenu_Glow2_rtl .rmGroup .rmLink .rmExpandLeft:before{right:auto;left:5px}.RadMenu_Glow2_rtl .rmGroup .rmLeftImage{margin:7px 6px 0 0}.RadMenu_Glow2_rtl .rmRoundedCorners .rmSlide,.RadMenu_Glow2_rtl .rmShadows .rmSlide,.RadMenu_Glow2_rtl div.rmRoundedCorners,.RadMenu_Glow2_rtl div.rmShadows{padding:0}






    div.RadMenu_Glow2 {
    border-color: rgb(255, 255, 0);
    }
    div.RadMenu_Glow2 .rmItem .rmLink {
    background-color: rgb(35, 41, 48);
    }
    div.RadMenu_Glow2 .rmItem .rmLink:hover {
    color: rgb(255, 222, 67);
    background-color: rgb(35, 41, 48);
    }
    div.RadMenu_Glow2 .rmItem .rmLink .rmExpandDown {
    border-color: rgb(255, 255, 0);
    color: rgb(255, 255, 67);
    }
    div.RadMenu_Glow2 .rmItem .rmExpanded {
    border-color: rgb(255, 255, 0);
    }
    div.RadMenu_Glow2 .rmItem .rmGroup {
    border-color: rgb(255, 255, 0);
    background-color: rgb(35, 41, 48);
    }
    div.RadMenu_Glow2 .rmGroup .rmItem .rmLink {
    border-color: rgb(255, 255, 0);
    background-color: rgb(35, 41, 48);
    }
    div.RadMenu_Glow2 .rmGroup .rmItem .rmLink:hover {
    border-color: rgb(255, 255, 0);
    color: rgb(255, 255, 255);
    background-color: rgb(255, 222, 67);
  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 09 Feb Link to this post

    Hello Ben,

    Thank you for posting the CSS.

    Please try the last eight modified rules: 
    html div.RadMenu_Glow2 {
        border: 1px solid;
        border-color: rgb(255, 255, 0);
    }
     
    html div.RadMenu_Glow2 .rmItem .rmLink {
        background-color: rgb(35, 41, 48);
    }
     
    html div.RadMenu_Glow2 .rmItem .rmLink:hover {
        color: rgb(255, 222, 67);
        background-color: rgb(35, 41, 48);
        background-image: none;
    }
     
    html div.RadMenu_Glow2 .rmItem .rmLink .rmExpandDown {
        border: 1px solid;
        border-color: rgb(255, 255, 0);
        color: rgb(255, 255, 67);
    }
     
    html div.RadMenu_Glow2 .rmItem .rmExpanded {
        border: 1px solid;
        border-color: rgb(255, 255, 0);
    }
     
    html div.RadMenu_Glow2 .rmItem .rmGroup {
        border: 1px solid;
        border-color: rgb(255, 255, 0);
        background-color: rgb(35, 41, 48);
    }
     
    html div.RadMenu_Glow2 .rmGroup .rmItem .rmLink {
        border-color: rgb(255, 255, 0);
        background-color: rgb(35, 41, 48);
        background-image: none;
    }
     
    html div.RadMenu_Glow2 .rmGroup .rmItem .rmLink:hover {
        border-color: rgb(255, 255, 0);
        color: rgb(255, 255, 255);
        background-color: rgb(255, 222, 67);
        background-image: none;
    }

    In order to apply some of them a stronger selector is needed, which is why I added html to the selectors. In addition the background image must be removed from some elements in order for the background to be visible. For others elements a border has to be set in addition to the border-color property.

    I hope this was useful and will help you customize the control's appearance according to your preference.

    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
Back to Top