The Layouts of the HammerFlex open source skin for DotNetNuke

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

FWIW, some of your rotating images at chrishammond.com are misbehaving ...
Posted By: Joe Craig on Tuesday, February 25, 2014 7:35 PM
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 Tuesday, February 25, 2014 10:54 PM
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 Thursday, March 27, 2014 2:01 PM
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 Thursday, March 27, 2014 2:01 PM
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 Thursday, May 15, 2014 10:38 PM
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 Thursday, May 15, 2014 10:32 PM
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 Tuesday, March 24, 2015 11:51 AM
If you're looking for third level menu support, please check out https://github.com/ChrisHammond/HammerFlex/issues/20
Posted By: Chris Hammond on Tuesday, March 24, 2015 11:56 AM
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 Tuesday, January 12, 2016 8:08 PM

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