Platforms

Designing for DotNetNuke 7

— DotNetNuke 7.0 has some nice updates I'd like to share with you.

Posted: October 30, 2012

With the DotNetNuke Corp. announcing the latest version, DotNetNuke 7.0, comes some nice updates that should make designers and skinners happy.

Control Panel and Updated UI

First of all, the new UI and Control Panel look like they have matured since version 5 and 6. The new Control Panel features a new drag and drop approach to adding a module to a page. The UI has also been simplified with less focus on design and more on focusing on the content. These changes mean that we have a much better frame to build on with fewer things to design around and can focus on just creating our own design.

Default.css

One of the biggest updates to DNN 7.0, aside from the new Control Panel, is not really an update, but more of a re-work, from the ground up. The default.css has been completely rewritten for this new version and I must say it has never looked better. The CSS has a much better structure which should help in trying to track down what DNN is doing to make the overrides in your own styles, if needed. Reviewing the default.css will also help those new to DotNetNuke to learn how things are typically handled to be able to stay consistent with the accepted standards.

A CSS reset and typography style sheet are now being imported to the default.css which helps to keep things organized. The reset.css is a very common reset by Eric Myer. I’m happy about this as I now no longer need to add my own reset CSS in my skin.css. Doing so overrides the default.css and thus typically messes up other things, for example ordered and unordered lists margins and paddings. The basic styles that I typically include in my skin.css for typography such as .Normal, .NormalBold, etc. can now be found in the Typography.css which makes it easy to find and overwrite in my skin.css (note: it’s a good idea to never actually change core styles as doing so can cause problems when you upgrade to a later version).

New Default Skin

DNN7 also now sports a new skin. It’s very well built, with a minimalistic HTML and well-structured CSS. This provides for a great example for learning how to create your own new skins or even a great base to tweak and customize, to match your desired style. This new skin also has a good structure to follow in your own skins with using separate typography and content focused style sheets being imported into the skin.css

Z-Indexing and Module Settings

If you have been skinning for DNN6, one thing you will be familiar with is the z-indexing issues that have been the source of many headaches. DotNetNuke has resolved this by basically flattening your site at the end of the HTML and then adding the necessary elements, such as popups and module settings, on top of your site without causing any ill effects to your design. Speaking of the module setting and headaches, the module manage buttons that seemed to always be in the way are gone and module action menus are back! This is a welcomed update; however, one thing to note is that they are no longer skin objects as they were back in the days of DNN 4.x and prior. I guess time will tell whether that will be an issue in custom layering situations.

Wrap Up

Overall, I feel that the changes in DNN 7.0 are a very nice step forward and out of the way to allow skinners/designers to be able to focus on what’s important, the content and the design that enhances it. My hat off to Ryan Martinez (@OrillieaDesign), DNN Corp.’s UX Designer, and DotNetNuke for the great new changes! It looks and feels like a mature product from a designer’s point of view and I’m looking forward to skinning and designing many DNN sites on this new version.