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

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 (https://getbootstrap.com), I've decided to call it HammerFlex.

Here are some of the details on the skin.

• Demo: See it in action at https://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 https://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, https://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