I suck at skinning the menu... any help?

4 posts, 0 answers
  1. Fooberichu
    Fooberichu avatar
    44 posts
    Member since:
    Oct 2007

    Posted 22 Jan 2009 Link to this post

    I have an example using the RadMenu on http://dev1.homeip.net/adventdvr that I "cheated" on by using my own XML file to databind to and it works fine (don't know *how* I accomplished it)... but I want to do the exact same thing now using DNN and autogenerated menus instead of XML binding.  In my cheater way I had an "ImageUrl" and "HoveredImageUrl" property so it would be smart enough to just change the image for me... but in the DNN site I want to set an image that can be a background normally and one that can be the hover background and then write the text (page name) centered vertically and horizontally like the static images show on my example.

    So I just really suck at the whole UL/LI menu structure and can never quite get it to look right.  If I could just be pointed in the right direction then I could probably figure it out from there.  Don't really need/want somebody to just outright give me the answer, just some pointers about how to correctly set up the menu to appear like my sample.

    Thanks in advance!
  2. Fooberichu
    Fooberichu avatar
    44 posts
    Member since:
    Oct 2007

    Posted 23 Jan 2009 Link to this post

    Ok... I've made some headway and it at least looks *mostly* ok, but I need a little assistance getting it closer.  Take a look at my DNN version: http://dev1.homeip.net/advent and see how the sub-menu items don't have the "padding" before and after but they do on my non-DNN version.  Below is the CSS I've used: -- ideas?

     
    .RadMenu_Advent 
        white-spacenowrap
     
    .RadMenu_Advent ul 
        list-stylenone
        padding: 0; 
        margin: 0; 
     
    .RadMenu_Advent li 
        floatleft
        margin: 0; 
     
    .RadMenu_Advent li a:active 
        color: White; 
     
    .RadMenu_Advent li a:visited 
        color: White; 
     
    .RadMenu_Advent li a:link 
        color: White; 
     
    .RadMenu_Advent li a 
        backgroundurl(images/btn_background.gif) #fff bottom left repeat-x; 
        height40px
        line-height40px
        floatleft
        width: 9em; 
        displayblock
        border1px solid #AFD2FF
        border-bottomnone
        border-topnone
        colorwhite
        text-decorationnone
        text-aligncenter
        padding: 0 5px
        font-size16pt
        text-transformuppercase
        font-family:Arial,sans-serif
     
    .RadMenu_Advent li ul li a 
        background#1E3445
        height: 1.5em; 
        line-height: 1.5em; 
        text-alignleft
        font-size8pt
        font-family:Arial,sans-serif
        text-transformnone
        margin: 0 5px 0 5px
     
    .RadMenu_Advent li a:hover 
        backgroundurl(images/btn_background_h.gif) #fff bottom left repeat-x; 
        text-decorationnone
     
    .RadMenu_Advent .rmFirst 
        color: White; 
        text-decorationnone

  3. Yana
    Admin
    Yana avatar
    5031 posts

    Posted 26 Jan 2009 Link to this post

    Hi there,

    Please add padding to the following css style in your skin.css file:

    .RadMenu_Advent li ul li a  
    {  
        background#1E3445;  
        height: 1.5em;  
        line-height: 1.5em;  
        text-alignleft;  
        font-size8pt;  
        font-family:Arial,sans-serif;  
        text-transformnone;  
        margin: 0 5px 0 5px;  
        padding: 0 10px !important;  
    }  
     

    Regards,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  4. Fooberichu
    Fooberichu avatar
    44 posts
    Member since:
    Oct 2007

    Posted 26 Jan 2009 Link to this post

    Yana,

    Thank you for the pointer.  I actually figured it out on Saturday after going through my rules one by one and comparing them against the RadMenu_Default skin (and through gratuitous use of the FireBug tool in FireFox to see the CSS inheritance tree).  I appreciate the follow-up though because that confirmed I fixed it the right way.

    One of these days I'll get better at skinning those UL-based menus. :)

    Thanks again, love the Telerik toolset!
Back to Top