The Layouts of the HammerFlex open source skin for DotNetNuke

Tuesday, February 25, 2014 By Chris Hammond

One of the things I’ve failed to do with my latest free open source skin, HammerFlex, for DNN is provide a good overview of how to utilize the skin. To really understand a skin, one must know the layout, and the thought process behind the layout (panes).

The HammerFlex skin uses Bootstrap (http://getbootstrap.com) to provide a responsive structure. This blog post provides an overview of the desktop browser version of the skin, the way bootstrap works, and the skin is designed, if you “shrink” the screen size, you will see the Panes fall into a single column layout. You can see this by going to a site using HammerFlex and shrinking the width of your browser.

Bootstrap uses a Grid system, essentially consisting of 12 columns, and you can then break up your “rows” into any combination of these columns, to control the width of the columns on your page, or in DNN terms, to control the Panes available for placing modules. HammerFlex provides you a variety of rows providing different width columns. You do not have to put a module in every pane in a skin, many of the pages I use only have a module in one or two panes.

Rather than describing each row individual you will find diagrams of the two Layouts for the HammerFlex skin, the Home and Edit layouts, below. The primary difference for the Edit skin is that the ContentPane (the default pane that modules go into) is full width (col-md-12).

Home.ascx (Home Skin Layout) Click for a larger view

HomeSkin-Layout

Edit.ascx (Edit Skin Layout) Click for a larger view

Edit-Skin-Layout

Be sure to download the HammerFlex skin today! If you have any changes you’d like to see in the skin, you can submit a Pull request over on GitHub.

Recent Comments

Comment Avatar
FWIW, some of your rotating images at chrishammond.com are misbehaving ...
Posted By: Joe Craig on Feb 2014
Comment Avatar
Joe, I am not sure what you are referring to. What browser are you using? What exactly are you seeing?
Posted By: Chris Hammond on Feb 2014
Comment Avatar
I am running dnn 07.02.02 (303). When I first installed the skin from the admin>site settings>appearance drill down, then applied it, I got an error: An error has occurred. DotNetNuke.Services.Exceptions.ModuleLoadException: Couldn't load menu style 'BootStrapNav': System.ArgumentException: Illegal characters in path. at System.IO.Path(Geekspeak, Geekspeak, etc...). Since the skin works on my local machine, I thought I may have had a bad upload. I used the Host>Extensions to 'repair' the install and discovered a Host Hammerflex and a Site Hammerflex. Where the Site H still throws an exception on loading BootstrapNav, the Host doesn't. However, the menu doesn't drill down below one level and doesn't show pages from the child list. For example: Music>Abstract will show, but Music>Abstract>Jazz will not show Jazz. I have a goofy little site to practice this stuff at THATDARNWEB.COM. You can see what I mean there. I can post the full stack message if you like.
Posted By: Darnell Greer on Mar 2014
Comment Avatar
I am running dnn 07.02.02 (303). When I first installed the skin from the admin>site settings>appearance drill down, then applied it, I got an error: An error has occurred. DotNetNuke.Services.Exceptions.ModuleLoadException: Couldn't load menu style 'BootStrapNav': System.ArgumentException: Illegal characters in path. at System.IO.Path(Geekspeak, Geekspeak, etc...). Since the skin works on my local machine, I thought I may have had a bad upload. I used the Host>Extensions to 'repair' the install and discovered a Host Hammerflex and a Site Hammerflex. Where the Site H still throws an exception on loading BootstrapNav, the Host doesn't. However, the menu doesn't drill down below one level and doesn't show pages from the child list. For example: Music>Abstract will show, but Music>Abstract>Jazz will not show Jazz. I have a goofy little site to practice this stuff at THATDARNWEB.COM. You can see what I mean there. I can post the full stack message if you like.
Posted By: Darnell Greer on Mar 2014
Comment Avatar
My skins are designed to only be installed in Host/Extensions, that explains the issue. I didn't realize that was the problem with the first report.
Posted By: Chris Hammond on May 2014
Comment Avatar
Chris, I experienced the exact same thing as Darnell G. I used Admin / Extensions to install the skin (instead of Host / Extensions) in the hopes that it would properly and only install in to Portals/0/Skins. But the install split and put most of the items in Portals/_default/Skins/HammerFlex and then just put the following 3 files in Portals/0/Skins - Edit.ascx, Home.ascx, and PopupSkin.ascx. To fix it I had to reinstall using Host / Extensions and then assign the Host Skin. Anyhow, sounds like a problem in the manifest? How can I find out if/when you release an updated version?
Posted By: Jeremy Farrance on May 2014
Comment Avatar
i installed the latest version from your skin. but the third menu level doesn't work. how can i get it work?
Posted By: Michael Pojer on Mar 2015
Comment Avatar
If you're looking for third level menu support, please check out https://github.com/ChrisHammond/HammerFlex/issues/20
Posted By: Chris Hammond on Mar 2015
Comment Avatar
Hi Chris, It is possible to make resizeable skin pane width, and allow admin users to reorder panes? Thanks, Joubert
Posted By: Joubert Sarte on Jan 2016

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.