Questions about Skin classes in css file

2 posts, 0 answers
  1. J
    J avatar
    143 posts
    Member since:
    Jun 2006

    Posted 11 Mar 2010 Link to this post

    I am attempting to use a custom skin and having difficulty understanding some things.  For instance, I see the following code in the css file:

    .RadMenu_MySkin .rmRootGroup,  
    .RadMenu_MySkin .rmLink,  
    .RadMenu_MySkin .rmText,  
    .RadMenu_MySkin .rmLeftArrow,  
    .RadMenu_MySkin .rmRightArrow,  
    .RadMenu_MySkin .rmTopArrow,  
    .RadMenu_MySkin .rmBottomArrow  
    .RadMenu_MySkin .rmRootGroup  
        border0px solid #000000;  

    I can't help but wonder, why do .RadMenu_MySkin .rmRootGroup twice?

    Is there some kind of resource that tells you where exactly these classes are being associated with?  Or am I resigned to the view source of the initial page load?

    Is this how css works by listing rmLink 5 different times?
    .RadMenu_MySkin .rmLink  
        /*font: normal 12px/23px Arial, sans-serif;*/ 
        fontbold 12px/23px Arialsans-serif;  
    .RadMenu_MySkin .rmLink  
        color: #fff; /* static menu text color *
    .RadMenu_MySkin .rmLink,  
    .RadMenu_MySkin .rmText  
        background-position: 0 1050px;  
    This appears to be that weird 'left' aligned block that first shows up.
    .RadMenu_MySkin .rmLink:hover,  
    .RadMenu_MySkin .rmFocused,  
    .RadMenu_MySkin .rmSelected  
        background-position: 0 -72px;  
    Here it appears we fill in the rest of the div tag.
    .RadMenu_MySkin .rmLink:hover .rmText,  
    .RadMenu_MySkin .rmFocused .rmText,  
    .RadMenu_MySkin .rmSelected .rmText  
        background-position: 100% -96px;  

  2. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 17 Mar 2010 Link to this post


    .RadMenu_MySkin .rmRootGroup is a selector - it is used by the rendering engine to select the element for styling and apply the specified property to it. It doesn't really matter how many times you use it, the idea in your first example is that the background color and image is the same for all those elements while the border is only applied on the element with class .rmRootGroup.

    There is a section in the documentation which describes the CSS selectors for every control, for RadMenu it is here:

    .rmLink:hover is not the same as .rmLink - it only targets the element with class .rmLink when the mouse cursor is hovering it.

    More information on CSS and helpful hints you can find in this CSS tutorial.

    All the best,
    Kamen Bundev
    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.
  3. DevCraft R3 2016 release webinar banner
Back to Top