I’m attempting to get some nice round corners on my DNNMenuNavigation root menu items. You can see the type of button I’m looking for here:
http://oasis.rad-websites.com/
I’ve attempted to read the css of this skin with no luck, and it’s using Solpart, if that makes a difference.. I can see what they are doing, kind of, but I really more want to UNDERSTAND what is going on.
Here is my control(after parsing)
<div class="dnnrMenuWrapper">
<dnn:NAV runat="server" id="dnnNAV" ProviderName="DNNMenuNavigationProvider"
IndicateChildren="false" ControlOrientation="Horizontal"
CSSNodeRoot="main_dnnmenu_rootitem"
CSSNodeHoverRoot="main_dnnmenu_rootitem_hover"
CSSNodeSelectedRoot="main_dnnmenu_rootitem_selected"
CSSBreadCrumbRoot="main_dnnmenu_rootitem_selected"
CSSContainerSub="main_dnnmenu_submenu"
CSSNodeHoverSub="main_dnnmenu_itemhover"
CSSNodeSelectedSub="main_dnnmenu_itemselected"
CSSContainerRoot="main_dnnmenu_container" CSSControl="main_dnnmenu_bar"
CSSBreak="main_dnnmenu_break"
NodeLeftHTMLRoot="<div class='dnnrNodeLeftHTMLRoot'></div>"
NodeRightHTMLRoot="<div class='dnnrNodeRightHTMLRoot'></div>"
CSSLeftSeparator="main_dnnmenu_LeftSeparator"
CSSRightSeparator="main_dnnmenu_RightSeparator" />
</div>
So I added a <div> wrapper to the nodeleftroot and right, with a unique CSS class where I would assume I could throw the images in. Anyhow, I’ve made many attempts, floating all over the place, each time I try it works to some extent, but something just isn’t right.
So the ultimate question is, using the sample control above, what changes would you make to the control, and what CSS would use compliment it with, allow rounded corners on each root menu item(IE a roundleft.jpg, middle.jpg, and roundright.jpg), along with a gap between them that allows the background color to show through the gaps :->
Anyhow, I want to continue to use DNNMenuNavigationProvider as that’s what the latest and greatest is correct?
Any tips would be greatly appreciated….this has been driving me nutz for over a year now off and on.
Thanks!
Josh