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-image: url(rmSprite.png'); |
background-color: transparent; |
} |
.RadMenu_MySkin .rmRootGroup |
{ |
border: 0px 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;*/ |
font: bold 12px/23px Arial, sans-serif; |
text-decoration: none; |
color: #fff; |
} |
.RadMenu_MySkin .rmLink |
{ |
/* |
color: #fff; /* static menu text color * |
*/ |
} |
.RadMenu_MySkin .rmLink, |
.RadMenu_MySkin .rmText |
{ |
background-position: 0 1050px; |
background-repeat: no-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