Style first level

[Peter Zolja]

Hi,

I'm working with the default skin and trying to make a custom skin. What I would to do is to change only the first level, the part that is visible at all times (like the top menu bar on this site). I need to change the background color and also increase the height. I tried this:

.rmRootGroup
{
  background-color:Red;
  height:30px;
}

Which changes the height and background for the first row, however, the items keep their height. How do I change the height of the items on the first level only?

Thanks.

[Yana]

Hello Peter,

You can apply different style to the child items of RadMenu like this:

.rmGroup .rmLink {
  background-color: #fff;
  height: auto;
 }

Hope this helps.

All the best,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter Zolja]

If I use your code it colors everything bellow the first level. Let's take this site's menu. With ".rmGroup .rmLink" I color everything under products, services, purchase, etc. What I would like to do is color only Products, Services, Purchase, Support, Community, Corporate, and Client.net, and nothing below.

Thanks.

P.S. Tried ".rmRootGroup .rmLink" also, and that seems to color everything.

[Yana]

Hello Peter,

I am sorry, I wasn't clear enough. You sholuld use both css styles like this:

.rmRootGroup .rmLink {
  background-color:Red;
  height:30px;
}

.rmGroup .rmLink {
  background-color: #fff;
  height: auto;
 }

All the best,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter Zolja]

Awesome, that worked. Thank you!
One more question: I also need to vertically align the text inside the first level. Right now the text is aligned top the top. If I do:

.rmRootGroup .rmLink { 
  background-color:Red; 
  height:30px; 
  vertical-align:bottom; 
} 

It ignores the vertical-align.

Thanks.

Yeah, I know, I really need to learn this CSS thing :)

[Yana]

Hello Peter,

I suggest you set the padding-top property of rmText class to adjust the text in the RadMenu items like this:

.rmRootGroup .rmLink .rmText {
   padding-top: 6px;
 }

Greetings,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.