Style first level

6 posts, 0 answers
  1. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 27 Aug 2008 Link to this post

    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.
  2. Yana
    Admin
    Yana avatar
    4982 posts

    Posted 28 Aug 2008 Link to this post

    Hello Peter,

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

    .rmGroup .rmLink {  
      background-color#fff;  
      heightauto;   
     } 

    Hope this helps.

    All the best,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 28 Aug 2008 Link to this post

    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.
  4. Yana
    Admin
    Yana avatar
    4982 posts

    Posted 28 Aug 2008 Link to this post

    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;     
      heightauto;      
     }   

    All the best,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Peter Zolja
    Peter Zolja avatar
    119 posts
    Member since:
    Dec 2007

    Posted 28 Aug 2008 Link to this post

    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 :)
  6. Yana
    Admin
    Yana avatar
    4982 posts

    Posted 29 Aug 2008 Link to this post

    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-top6px;  
     } 

    Greetings,
    Yana
    the Telerik team

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