Peter Zolja
Top achievements
Rank 1
Peter Zolja
asked on 28 Aug 2008, 12:12 AM
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.
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.
5 Answers, 1 is accepted
0
Hello Peter,
You can apply different style to the child items of RadMenu like this:
Hope this helps.
All the best,
Yana
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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.
0
Peter Zolja
Top achievements
Rank 1
answered on 28 Aug 2008, 02:46 PM
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.
Thanks.
P.S. Tried ".rmRootGroup .rmLink" also, and that seems to color everything.
0
Hello Peter,
I am sorry, I wasn't clear enough. You sholuld use both css styles like this:
All the best,
Yana
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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.
0
Peter Zolja
Top achievements
Rank 1
answered on 28 Aug 2008, 03:18 PM
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 :)
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 :)
0
Hello Peter,
I suggest you set the padding-top property of rmText class to adjust the text in the RadMenu items like this:
Greetings,
Yana
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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.