DotNetNuke Tips for Skinning, CSS, and Design

Written by: Ralph Williams
Thursday, February 25, 2010 11:19 PM 

When I first started using DotNetNuke, it was somewhere in version 3.x. Learning this new system was a bit of a challenge at the time. Probably my biggest issue was the core, SolPart menu. I had so much trouble with it. Not much later our company switched to the RadMenu by Telerik, and I never looked back for about 4 years. That is, until I was working on my skin for the DotNetNuke Design Challenge. I wanted to use the core menu and did some digging to find a post on the DotNetNuke forum (see Jan Olsmar’s post) discussing how it can be rendered as an unordered list. You can also check out the blog post by Mike Van der Meulen “New CSS Menu Features In DotNetNuke 5”. This blog gives a nice description on the available attributes and class names which I will be referring to in my style sheet.

Half of the Battle

Okay, getting the menu to show up as an unordered list is great! But, that just means you get an ugly bulleted list of your menu. Enter Css. We can make our bulleted list look just like a normal menu. As a matter of fact, this is the accepted, or should I say, expected way to display a website’s menu.

On to the how to:

Setting up the DNN Menu as an unordered list:

1. In your skin file (I tend to work in the .ascx file directly, not sure if will work the same as HTML) you need to add the register tags for the menu and the CustomAttribute.
   

   <%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/nav.ascx" %>
   <%@ Register TagPrefix="dnn" Namespace="DotNetNuke.UI.Skins" Assembly="DotNetNuke" %>

2. Next, add the menu. Make sure to specify the “csscontrol”, as this will make sure that we style only our main menu and not all menus, including the Module dropdown menus.
   

   <dnn:NAV runat="server" id="dnnNav" csscontrol="mainMenu" IndicateChildren="false" ProviderName="DNNMenuNavigationProvider">
   </dnn:NAV>

3. Now we need to render it as an unordered list. Add the CustomAttributes and it will look like this:
   

   <dnn:NAV runat="server" id="dnnNav" csscontrol="mainMenu" IndicateChildren="false" ProviderName="DNNMenuNavigationProvider">
       <CustomAttributes>
           <dnn:CustomAttribute Name="RenderMode" Value="UnorderedList" />
       </CustomAttributes>
   </dnn:NAV>

This will get us an unordered list like this:

• Home
• About
• Services
  • Services 1
  • Services 2
• FAQ’s
• Contact

As we mentioned earlier, this is only half of the battle.

Styling the DotNetNuke menu unordered list:

1. Set the display to block.
   

   .mainMenu .root {
       display:block; /* converts to block element */
   }

2. The next thing will be to stack them side by side. Add a float left.
   

   .mainMenu .root {
       display:block; /* converts to block element */
       float:left; /* float left */
   }

3. The third thing is to remove the bullets from the list.
   

   .mainMenu .root {
       display:block; /* converts to block element */
       float:left; /* float left */
       list-style:none; /* removes bullets */
   }

1. Set the all links on the menu to be box elements by setting the display to block. We can also set the text color and remove the underline.
   

   .mainMenu .mi a{ 
       display:block; /* converts to block element */
       color:#FFF; /* text color */
       text-decoration:none!important; /* removes underline in links */
   }

2. Next, we will set the main menu settings.
   

   .mainMenu .root a{
       font-size:18px; /* text size for menu */
       padding:16px 30px; /* gives padding around link */
   }

3. Set the text hover color.
   

   .mainMenu .root a:hover{
       color:#D2B1A4; /* hover text color */
   }

1. Make the submenu not stack side by side by removing the float. Set the background color of the dropdown.
   *Note: this is not the same as clearing a float.
   

   .mainMenu .m{
       float:none; /* removes float */
       background:#000!important; /* dropdown background color */
   }

2. Set the sub menu settings.
   

   .mainMenu .m a{
       font-size:13px; /* font size for submenu text */
       padding:7px 10px; /* gives padding around link */
   }

3. Set the hover background color.
   

   .mainMenu .m a:hover{
       background:#333; /* hover background color */
   }

4. One last thing is to make sure the that icons on the submenu, such as the Admin and Host submenus, don’t bump up against the text.
   

   .mainMenu .m img{
       padding-right:5px; /* adds padding to right of menu icon on dropdown */
   }

Here is the full code for the css that you will place in your skin.css.

Trackback Print

Tags:

Categories: Skinning

Location: Blogs RalphWilliams.com

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code Enter the code shown above in the box below
Add Comment   Cancel