HighlightPath() & custom styling

[Kurt Kluth]

Implemented the Radmenu and have the styling as I wanted it and now want to implement the HighlightPath feature.  It works but it leaves the selected menu item white.  What do I need to add to my css to change the selected menu option?  I would like to change the font color green.

/*Main menu top level */
DIV.RadMenu_ASI .rmRootGroup
{
    Background: linear-gradient(to bottom, #290448 0%,#140224 44%,#040008 100%) !important ;
    background: #1e0335; /* Old browsers */
    background: -moz-linear-gradient(top, #290448 0%, #140224 44%, #040008 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#290448), color-stop(44%,#140224), color-stop(100%,#040008)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #290448 0%,#140224 44%,#040008 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #290448 0%,#140224 44%,#040008 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #290448 0%,#140224 44%,#040008 100%); /* IE10+ */
    background: linear-gradient(to bottom, #290448 0%,#140224 44%,#040008 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#290448', endColorstr='#040008',GradientType=0 ); /* IE6-9 */
}

DIV.RadMenu_ASI .rmRootGroup .rmLink
{
    FONT-SIZE: 12px;
    font-family: Crete Round !important;
    COLOR: #FFFFFF !important;
    LINE-HEIGHT: 50px !important;
    BACKGROUND-IMAGE: none;
}

DIV.RadMenu_ASI .rmRootGroup .rmText
{
    BACKGROUND-IMAGE: none;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

DIV.RadMenu_ASI .rmRootGroup .rmLink:hover
{
    BACKGROUND-IMAGE: none;
    background-color: #6d9c1f !important;
}

/* color of the head menu item as viewing submenu */
DIV.RadMenu_ASI .rmRootGroup .rmExpanded
{
    BACKGROUND-IMAGE: none;
    background-color: #6d9c1f !important;
}

/* Sub grouping Styles */
DIV.RadMenu_ASI .rmGroup
{
    line-height: 20px !important;
    padding: 0px !important;
}

DIV.RadMenu_ASI .rmGroup .rmLink
{
    FONT-SIZE: 12px;
    font-family: Crete Round !important;
    COLOR: #FFFFFF !important;
    BACKGROUND-IMAGE: none;
    background-color: #6d9c1f !important;
}


DIV.RadMenu_ASI .rmGroup .rmLink:hover
{
    BACKGROUND-IMAGE: none;
    background-color: #87AE47 !important;
    width: 90%;
    text-decoration: none;
}

DIV.RadMenu_ASI .rmSeparator .rmText
{
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

[Magdalena]

Hi Kurt,

A good practice is to avoid using the !important and implementing it only if it is necessary (for example to overwrite inline styles). The method HighlightPath() applies the "rmFocused" CSS class to the rmLink. So to change the color to the green, please apply the following 

DIV.RadMenu_ASI .rmGroup .rmLink.rmFocused {
    color: green;
}

note: this solution will work after removing the !important ​of the color property from DIV.RadMenu_ASI .rmRootGroup .rmLink and  DIV.RadMenu_ASI .rmGroup .rmLink .

Regards,
Magdalena
Telerik

 

 

[Kurt Kluth]

Thank you was able to get it figured out based upon your answer.