DNN Theming Tips and Tricks

Skinning Responsively with Bootstrap - Part 3 (Skinning the DDR Menu)

By Ralph Williams, Jr. on 6/10/2013

So far we have set up our DNN skin to use Bootstrap, as well as create the basic scaffolding of our skin.

With the advent of the DDRMenu to DotNetNuke, we have had much more control over what is rendered by the menu. This has allowed for a much more semantic menu and custom styling for simple menus to mega menus. There are various ways to create the template that the DDR uses but we will be using the token based templating as it is very simple.

Menu Template (Bootstrap Nav)

I copied the Simple folder from the Gravity skin that comes with DNN 7, which includes a manifest file “menudef.xml” and the “SimpleToken.txt” file. I updated the SimpleToken.txt file as follows:
Note: this isn’t a tutorial on DDRMenu, just how to implement Bootstrap.

<ul class="nav nav-pills">
          [*>NODE]
          </ul>
          [>NODE]
          <li class="[?NODE]dropdown [/?][?SELECTED]active[/?]">
          [?ENABLED]
          <a href="[=URL]">[=TEXT] [?NODE]<b class="caret"></b>[/?]</a>
          [?ELSE]
          <a href="#">[=TEXT] [?NODE]<b class="caret"></b>[/?]</a>
          [/?]
          [?NODE]
          <ul class="dropdown-menu">
          [*>NODE]
          </ul>
          [/?]
          </li>
          [/>]
  1. Add the classes nav and nav-pills to the outer ul. Personally, I prefer the simplicity of the Basic pills nav that bootstrap offers. This seems to be the easiest to override with my own custom design as I tend to use more flat UI’s in my design.
  2. Add the class “dropdown” to the list item if it has children using the [?NODE] test.
  3. Add the class “active” to the list item if it is selected using the [?SELECTED] test.
  4. Add a caret to the item if it has a child item.

Next, we can add the HTML and skin object within the skin as follows:

Logo and Menu skin objects (Bootstrap Navbar)

<div class="navbar">
          <div class="navbar-inner">
          <span class="brand">
          <dnn:LOGO runat="server" id="dnnLOGO" />
          </span><!--/Logo-->
          <dnn:MENU MenuStyle="Simple" runat="server"></dnn:MENU>
          </div><!-- END navbar-inner -->
          </div><!-- END navbar -->

Inside of the #nav div from our responsive skin, we add the previous HTML.

  1. Add navbar and navbar-inner divs
  2. Create a span with the class “brand” and the dnn:LOGO skin object inside. The bootstrap documentation shows using a link, however, our skin object takes care of that for us, so we can just use a span.
  3. Add our dnn:MENU skin object referencing the “Simple” MenuStyle.

Next, we need to convert our menu to be responsive.

Responsive Menu (Bootstrap Navbar)

<div class="navbar">
          <div class="navbar-inner">
          <span class="brand">
          <dnn:LOGO runat="server" id="dnnLOGO" />
          </span><!--/Logo-->
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">Navigation</a>
          <div class="nav-collapse collapse pull-right">
          <dnn:MENU MenuStyle="Simple" runat="server"></dnn:MENU>
          </div><!-- END nav-collapse -->
          </div><!-- END navbar-inner -->
          </div><!-- END navbar -->
  1. Add link with class “btn” and btn-navbar”. Also, requires markup for collapse. You can use either JavaScript or data attributes. (See documentation here:http://twitter.github.io/bootstrap/javascript.html#collapse)
  2. Wrap dnn:MENU skin object with a div with the following classes
    1. “nav-collapse” and “collapse” – this allows the menu to collapse at smaller screen sizes
    2. “pull-right” to float the menu to the right side, if you so desire.

Note: using this method will disable a menu item that has children. So that it is a click to open action. This is to make things work better for touch devices. To read more on why Bootstrap chose this direction read the article “Designing dropdowns in Bootstrap”. I will create another blog post soon to show the way I have chosen to work around this action as it’s difficult to convince a client to loose a landing page based on what Mark Otto thinks…