HighlightPath() & custom styling

3 posts, 0 answers
  1. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 21 Mar 2014 Link to this post

    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;
    }
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 24 Mar 2014 Link to this post

    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
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 24 Mar 2014 in reply to Magdalena Link to this post

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

Back to Top