Hi,

I have a very simple vertical solpart menu with 7 items.

Each menu item needs to have a sperate background colour (ranging from pink to dark red) and a seperate mouse-over background colour.

Any help and pointers appreciated.

Thanks,

Marcus.

Hello,

I didn't think it was possible to specify individual colours for each menu item, but I've just had a quick look and have a possible solution.

This will only work for a site that you are currently coding, you will need to adapt the technique for each menu item and site that you create.

Using the Web Developers Toolbar for firefox - go to Information / Display ID & Class details

here you will be able to view all of the ids assigned to each individual Solpart menu item.

From there you can create css specifically for each item, for instance:

#tddnn_dnnMENU_ctldnnMENU99
{
background-color: pink;
}

For further info on using the web developers toolbar check out:
Troubleshooting DotNetNuke Skins

Hi Lee,

Thanks for that, I also found that little tip somewhere and it works pretty well.

However, I can't get the mouseover event to work as I don't know what to call the mouseover class name in the style sheet.

Any ideas?

Thanks,

Marcus.

almost posted that I couldn't find a solution, but then it occurred to me, here you go:


#tddnn_dnnMENU_ctldnnMENU99
{
background-color: pink;
}

#tddnn_dnnMENU_ctldnnMENU99:hover
{
background-color: yellow;
}


This is changing the colour whenever you hover over the table cell, rather than hovering over a link. You may need to check it in all browsers to see if it works correctly.

Have you tried this Lee? I can't get that to work?

Cheers,

Marcus

hi lee


he wants.... sperate background colour (ranging from pink to dark red)
this possible by your code, i don't think so,....

Hello,

yes it is, here's an example image that I applied to this live site - each menu item has a different background image:
http://www.dnncreative.com/Portals/0/pics/forum/forum_menu_mulitcolours.gif

you can see the code for it on the left hand side.

Like I said, you have to use the Web Developers Toolbar to find and target the id of each table cell