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

By: Chris Hammond
Published Date 1/12/2014
Last Updated Tuesday, February 25, 2014 1:37 AM

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

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 Tuesday, January 21, 2014 10:05 AM
It is not "responsive" on a windows mobile phone? It just shrinks down to microscopic size???
Posted By: James West on Wednesday, January 29, 2014 2:31 PM
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 Thursday, January 30, 2014 1:18 PM
@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 Saturday, March 08, 2014 1:38 PM
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 Tuesday, June 24, 2014 8:42 AM
Daran, I am not sure what you are referring to, can you post a screenshot?
Posted By: Chris Hammond on Tuesday, June 24, 2014 10:01 PM
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 Wednesday, June 25, 2014 11:44 AM
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 Wednesday, October 22, 2014 1:23 PM
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 Wednesday, October 22, 2014 7:24 PM

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 Friday, July 01, 2016 11:51 AM

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 email address so that we may contact you if necessary. We will also use this for your Gravatar.
Enter the URL to your website. URLs may be removed from comments.
Enter your comment here.
If you can't type Human in, you can't post, plain and simple.
Submit Comment Cancel

Chris Hammond is

Chris Hammond is a father, husband, leader, developer and car guy. Chris has long specialized in ASP.NET and DotNetNuke development, so you will find a variety of topics here on the website. For more information check out the about me page.

If you are looking for DotNetNuke consulting please visit my business website at http://www.christoc.com/

Disclaimer

Any blog posts here are solely the opinion and views of Chris Hammond only. Comments on blog posts are the opinion of the commenter, and not Chris Hammond.

Powered By

This website is managed by Christoc.com Software Solutions

DotNetNuke Hosting

Hosting for this website is provided by AppliedI.Net. Be sure to visit them for all your DotNetNuke Hosting needs. 

Find Me