Introducing HammerFlex, a new open source skin for DNN using Bootstrap 3

Sunday, January 12, 2014 By Chris Hammond (Updated 2/25/2014)

I decided recently it was time to upgrade the look of my various websites, and while I originally considered modifying my MultiFunction skin for DNN, ultimately I decided to start from the ground up and create a new Skin for DNN using Bootstrap (http://getbootstrap.com), I’ve decided to call it HammerFlex.

Here are some of the details on the skin.

  • Demo: See it in action at http://www.chrishammond.com
  • Open Source: MIT License
  • Minimum DNN version: 07.01.00 (I have it running on 7.1.2 and 7.2.0 sites)
  • Bootstrap: Uses Bootstrap V3.0.2
  • Layouts: 2, Home and Edit (edit has a ContentPane at full width) both layouts have a variety of useful pane configurations. Also includes a PopupSkin.ascx that will be loaded by DNN modal controls, not intended to be used as a skin.
  • Containers: 2, Main and Blank, both simple, one has a Title, one doesn’t, can you figure out which one does?
  • Responsive: Utilizes Bootstrap’s responsive design capabilities.
  • Carousel Pane: The first Pane on the two layouts is a Carousel pane, you can create a carousel using the Bootstrap carousel functionality, see it in action on ChrisHammond.com. I’ll blog about how to use that in the future.
  • Menu Warning: If you have Parent/Children menu items, in order to better handle the responsive menu, the parent pages should not have content on them, they should be disabled and be used only for displaying child items. The reason for this is that in order to allow for better touch support on mobile devices clicking on the Parent item will open the submenu, instead of navigating to the Parent page.
  • Slideshow Support: BlueImp Bootstrap image gallery included in package http://blueimp.github.io/Gallery/
  • Visual Studio 2013: Built using C#, using a Skin specific version of my build scripts based on my Module Development Templates, build in RELEASE mode and the Skin will be packaged, including the Containers.
  • Unsupported: Have at it, play with it, use it, just don’t expect to get free support from me on this, I’m too busy these days. You can however pay for support from my consulting business, http://www.christoc.com/

Instructions for installation

  1. Download the INSTALL package (zip file)
  2. Upload ZIP file to your DNN site via the Host>Extensions page
  3. Apply the skin to your site

Instructions for modifying the Skin/Source

  1. Download the SOURCE package (zip file)
  2. Upload ZIP file to your local DNN development site via the Host>Extensions page
  3. Apply the skin to your site
  4. Open SLN/CSProj file in Visual Studio 2013. Note: project is setup to use a local dnndev.me environment, if you have a different URL for your local dnn environment modify the project before opening in visual studio.
  5. Make changes to the files
  6. Building the Project will deploy any changes in the /containers folder to the proper container path, /portals/_default/containers/hammerflex/
  7. Building the Project in Release mode will “package” a new ZIP file into the INSTALL folder.

Download Now

Submit issues

Discuss on DNNCHAT.com

Recent Comments

Comment Avatar
Thank you very much for making this available and for the work you put into it. I have looked at a few bootstrap skins now and yours is one of the best behaved I have yet seen.
Posted By: Ian Marlow on Jan 2014
Comment Avatar
It is not "responsive" on a windows mobile phone? It just shrinks down to microscopic size???
Posted By: James West on Jan 2014
Comment Avatar
I'm kind of the opinion that no one owns Windows Phones, and I don't, so i won't be researching any fixes for them. Feel free to submit a PULL request though, the skin is open source, when you come up with a fix.
Posted By: Chris Hammond on Jan 2014
Comment Avatar
@James West - The Windows Mobile Phone problem is documented on the Bootstrap website along with a simple JavaScript workaround. http://getbootstrap.com/getting-started/#support-ie10-width
Posted By: Kevin L on Mar 2014
Comment Avatar
just downloaded and installed your skin in DNN looks clean and simple, but why does the bootstrap menu thing in upper right display on larger screens
Posted By: daran doherty on Jun 2014
Comment Avatar
Daran, I am not sure what you are referring to, can you post a screenshot?
Posted By: Chris Hammond on Jun 2014
Comment Avatar
Very pleased with the skin. I only have one issue. When I go to Activity Feed and click to edit my profile I get some JS errors in the console. http://i.imgur.com/T6X6oQK.png Most form fields seem to work on the page but the image uploader is broken. I've checked the script loading order etc byt everything seems to be in place, jquery and then bootstrap etc. Any ideas?
Posted By: Magnus Olsson on Jun 2014
Comment Avatar
I've put up HammerFlex on our web site (with a few additions to home.aspx) and I like it a lot. One problem I'm wondering if you have seen is that the menu depth appears to be limited to one level of sub-menus and we really need two. I looked at the bootstrapNav/BootstrapNav.txt file and didn't see a limitation there, it looks nicely recursive. I also tried various NodeSelector settings without being able to get a greater depth. The caret appears for the next level of menus, but clicking does nothing. I looked at the HTML in F12 and the sub-sub-menus seem to be there and the only strange thing I noticed was that the "ul" for the menu seems to not have the style="display:block;" that is on the "ul" for the sub-menu. Just wondering if you had seen this behavior of the click for a sub-sub menu not bringing up the DDL. If you look at our site, I know I have to move the page on "Our Party/Documents". The places that are not working are in a restricted area of our site, but I can reproduce the problem easily on my development system. Thanks for supplying this really neat skin!
Posted By: Bill Hyde on Oct 2014
Comment Avatar
I found a partial fix for the problem. I changed the line in BootStrapNav.js from $('.nav > li.dropdown > a').click(function (e) { to $('.nav > li.dropdown a').click(function (e) { and that unhides the sub-sub menu, but you have to click again on the root menu item to get the displayed menu to re-appear as it seems to disappear when you do the click. I suspect there's some more javascript needed to keep the click from disappearing the menu structure, but I'm not really a javascript person.
Posted By: Bill Hyde on Oct 2014
Comment Avatar

Hi. Wonderful skin. I have one question. I included the jquery-ui from your skins' css folder to style my auticomplete items. That however screwed up a lot of the pages and the modal popup. Is there a way around this without meddling with the standard css files included?

Posted By: Alexander Lange on Jul 2016
Comment Avatar

Quick question re latest version on GitHub. What's the difference between these two? HammerFlex_00.01.15_Source.zip Source code (zip)

Posted By: Anthony Grace on Sep 2018
Comment Avatar
The only difference is that one is the packaged/install-able ZIP file, and one is the github zip file of source.
Posted By: Chris Hammond on Sep 2018

Add Comment

Please add your comment by filling out the field(s) below. Your comment may need to be approved before it becomes visible.
Enter your first name for display with the comment
Enter your last name for display with the comment.
Enter your comment here.
If you can't type DNNRocks in, you can't post, plain and simple.
Submit Comment Cancel

Chris Hammond

Chris Hammond is a father, husband, leader, software developer, photographer and car guy. Chris focuses on the latest in technology including artificial intelligence (AI) and has spent decades becoming an expert in ASP.NET and DotNetNuke (DNN) development. You will find a variety of posts relating to those topics here on the website. For more information check out the about Chris Hammond page.

Find me on Twitter, GitHub and LinkedIn.