Is there any way that I can make my buttons look like this?

One of my clients just hates those regular rectangle buttons and asked me to make some change. I'm just wondering if I can make some buttons like this in DNN?

1. When the mouse hover on to a button, the order of these buttons doesn't change, but only the color of this button changes.

2. When a button is active, it appears as it's on top of other buttons.

3. Of course buttons should be stretchable.

I did some experimentation for that but it didn't work.

I sliced this bit  and stick this image in the "rootmenuitemrighthtml=" line in the SolPartMenu token and I did the same thing to the left side of the button ("rootmenuitemlefthtml="). But for some strange reason those images just couldn't align up correctly to the text (I checked all the paddings, spaces or text wraps).  It ends up something similar to this:

Could anyone please tell me the reason why it doesn't work? Or I did it totally wrong? Is there any easy way to do that?

Thanks!!

Hi Victor,

Consider changing to a different menuing system, such as Telerik's RadMenu (www.telerik.com).  I believe this menu comes with several tab samples, and the effect is certainly accomplishable via their skinning system.  I think you'll find it a more straightforward method of achieving your goal, as opposed to using DNN's native menu.

I am not affiliated with Telerik in any way, though I probably should be given how much I've recommended them.

Hope this helps!

Brandon

Victor

You will have to find a unique ID that surrounds the menu (or you can add a div yourself)

Like so:

<div id="Mymenu">[NAV]</div>

Then you add this to Skin.css"

#Mymenu img{

display:block;

}