How to modify layout of the Menu

5 posts, 0 answers
  1. Urt
    Urt avatar
    11 posts
    Member since:
    Jun 2009

    Posted 14 Aug 2009 Link to this post

    I used ASPNETAJAX Q1 2009 and copy the black skin with css to my project (See picture below)

    http://img196.imageshack.us/img196/2914/externalcss03.png

    When I will the web page the result look like this (See picture below)

    http://img441.imageshack.us/img441/3349/externalcss01.png

    For picture above, I can change any presentation in Menu.Black.CSS.  However, the property that I want to change is the .RadMenu .rmItem{} which located in WebResource.axd?d*snDMiF8h..............................................  (Please refer to picture below).  I can only see this properties in firebug.

    http://img81.imageshack.us/img81/3082/externalcss02.png

    As you can see from the picture, I can change the property I want in firebug and make the item float from the right.  I tried to copy all code from Menu.CSS to Menu.Black.CSS.  But It didn't work.  In other word, the change I want to make is in the Menu.CSS which shows on firebug as WebResource.axd?d*snDMiF8h..............................................    How do I get rid on WebResource and like Menu.CSS to my project so that I can modify any property in there?

    Thanks in Advance
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 20 Aug 2009 Link to this post

    Hi Urt,

    You will have to turn off the usage of the embedded base CSS file by setting EnableEmbeddedBaseStylesheet="false". After that you will have to manually register the base CSS file (Menu.css) in the head tag of your page. In that way all changes made to Menu.css will be applied.

    Greetings,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. Urt
    Urt avatar
    11 posts
    Member since:
    Jun 2009

    Posted 24 Aug 2009 Link to this post

    Thanks Paul,

    That solves it.  I do have another question how do you align the Radmenu in the center.  It shows center on the project (See picture below): 

    http://img31.imageshack.us/img31/7228/70997210.png

    But when render it shows to the left or right based on the property of what I set in the following (picture can be seen on my first post (second link (align left) or third link (align right)):

    .RadMenu .rmItem
    {
        float:right;                    (if change to left, then it will align to the left; otherwise now align to the right)
        position:relative;
        list-style-image: none;
        list-style-position:outside;
        list-style:none;    
    }

    Is there any property to set in the Menu.CSS (copy from Telerik skin folder) that will make it align at the center like the picture above?

  4. Yana
    Admin
    Yana avatar
    5039 posts

    Posted 25 Aug 2009 Link to this post

    Hi Urt,

    Please change the following css styles:

    .RadMenu { 
        text-aligncenter
        background#000
     
    .RadMenu ul.rmActive, .RadMenu ul.rmRootGroup { 
        displayinline-block;  


    Kind regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Urt
    Urt avatar
    11 posts
    Member since:
    Jun 2009

    Posted 26 Aug 2009 Link to this post

    Thanks for all Telerik's support: very great

    I have solved all the problem and have exactly look I needed.


Back to Top