Rank 1
I am using the Telerik RadMenu and wondering how I can change the color for the arrow image (which points to the right) for a menu item that may have submenu items?
3 Answers, 1 is accepted
To change the arrow image of the child items of the RadMenu control you will need to change the sprite image (where you can set your own colors) that is currently applied to the control.Please refer to this help article where it is fully described how this can be accomplished.
Greetings,
Kate
the Telerik team
Rank 1
that almost kinda worked. Here is the problem:
I am already doing an override on the menu bar color, giving it a gradiant look/feel. here is what I have:
.RadMenu_Default
.rmRootGroup
{
background: #0072C6 !important; /* Old browsers */
background: linear-gradient(to bottom, #0072C6 0%,#8eb92a 50%,#72aa00 51%,#003A66 100%) !important; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0072C6', endColorstr='#003A66',GradientType=0 ) !important; /* IE6-9 */
color: White !important;
}
.RadMenu_Default .rmGroup, .RadMenu_Default .rmMultiColumn, .RadMenu_Default .rmGroup .rmVertical
{
background: #0072C6 !important;
color: White !important;
}
.RadMenu_Default .rmHorizontal .rmRootLink span.rmText:hover
{
background: #0072C6 !important;
color: White !important;
}
.RadMenu_Default a.rmExpanded, .RadMenu_Default a.rmExpanded:hover
{
background: #0072C6 !important;
color: White !important;
}
.RadMenu_Default .rmItem .rmFirst .rmLink .rmText:hover, .RadMenu_Default .rmItem .rmLast .rmLink .rmText:hover
{
background: #0072C6 !important;
color: White !important;
background-image: none !important;
}
.rmText
{
color : White;
}
But I still cannot seem to get the arrow to change the color. I found the rmSprite file, changed the arrow color to white and saved it into the website images folder, then did this in the stylesheet:
RadMenu_Default
.rmRootGroup,
.RadMenu_Default a.rmLink,
.RadMenu_Default .rmGroup .rmText,
.RadMenu_Default .rmVertical .rmText,
.RadMenu_Default .rmLeftArrow,
.RadMenu_Default .rmRightArrow,
.RadMenu_Default .rmTopArrow,
.RadMenu_Default .rmBottomArrow
{
background-image: url('../Images/rmSprite.png');
background-color: transparent;
}
but no changes were shown at all
Can you please provide the modified sprite image that you are trying to apply to the Radmenu control, so I can test it locally and assist you out in getting the desired look?
Kind regards,
Kate
the Telerik team