This is a migrated thread and some comments may be shown as answers.

Questions about Skin classes in css file

1 Answer 57 Views
Menu
This is a migrated thread and some comments may be shown as answers.
J
Top achievements
Rank 1
J asked on 11 Mar 2010, 03:26 PM

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  
{  
    background-imageurl(rmSprite.png');  
    background-colortransparent;  
}  
 
 
.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,  
.RadMenu_MySkin .rmLink  
{  
 
    /*font: normal 12px/23px Arial, sans-serif;*/ 
    fontbold 12px/23px Arialsans-serif;  
    text-decorationnone;  
    color#fff;  
}  
 
.RadMenu_MySkin .rmLink  
{  
    /*
    color: #fff; /* static menu text color *
    */ 
}  
 
.RadMenu_MySkin .rmLink,  
.RadMenu_MySkin .rmText  
{  
    background-position: 0 1050px;  
    background-repeatno-repeat;  
}  
 
/* 
This appears to be that weird 'left' aligned block that first shows up.
*/ 
.RadMenu_MySkin .rmLink:hover,  
.RadMenu_MySkin .rmFocused,  
.RadMenu_MySkin .rmSelected  
{  
    color:#ffffff;   
    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;  
    border-bottom-style:none;  
    border-bottom-color:Black;  
    border-bottom-width:0px;  
    margin-top:10px;  
    z-index:2;  

J

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 17 Mar 2010, 11:03 AM
Hi,

.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:
http://www.telerik.com/help/aspnet-ajax/menu_appearancecssselectors.html

.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.
Tags
Menu
Asked by
J
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or