This is a migrated thread and some comments may be shown as answers.

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

3 Answers 84 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Fooberichu
Top achievements
Rank 2
Fooberichu asked on 23 Jan 2009, 05:18 AM
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!

3 Answers, 1 is accepted

Sort by
0
Fooberichu
Top achievements
Rank 2
answered on 23 Jan 2009, 03:56 PM
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

0
Yana
Telerik team
answered on 26 Jan 2009, 12:10 PM
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.
0
Fooberichu
Top achievements
Rank 2
answered on 26 Jan 2009, 02:22 PM
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!
Tags
Menu
Asked by
Fooberichu
Top achievements
Rank 2
Answers by
Fooberichu
Top achievements
Rank 2
Yana
Telerik team
Share this question
or