New Free DotNetNuke skin, Multifunction the world's best

Are you looking for the World’s Best Free DotNetNuke Skin? Well, have I got just the one for you. MultiFunction, you can find it now on GitHub, or check out the Demo website to see it in action.

Why MultiFunction?

Did I really just call it “World’s Best”? Sure, but where’s the proof? What, my word isn’t good enough?

Here’s the background as to why I created the world’s best free DotNetNuke skin. If you know me, you likely know I have a domain problem—mainly, I have too many of them. Along with that problem comes another issue: too many websites. All of those websites (except for two) are running on DotNetNuke, and they all had different skins, different layouts—different everything.

I decided it was time to bring things under one umbrella: a common layout (or selection of layouts) across all my web properties. There are plenty of free DotNetNuke skins out there, but none that I thought worked well for all of my websites.

The Origin of MultiFunction

I started working on my wife’s website a few weekends ago, coming up with a new design for it. I was pretty happy with the website, along with the fact that I was able to significantly improve the “page speed” and “YSlow” performance of the website with a few minor tweaks. I also liked that I created a design flexible enough for all my websites. You can see her site at nataliehammond.com.

I took the code from her website and turned it into an open-source skin: MultiFunction. MultiFunction is released under the same type of license as DotNetNuke (although with a different owner—me), the MIT-BSD license. This means you can do what you want with the skin, as long as you keep the copyright intact in the source code.

How to Customize MultiFunction

Modifying the look of the skin using CSS is very easy. I have already applied the skin to two of my websites, ChrisHammond.com and Project350z.com. Below are the steps I followed to set up the Project350z website using MultiFunction with custom background images and a custom header graphic.

Steps to Customize MultiFunction

Download the MultiFunction SOURCE package from GitHub. Install the MultiFunction Source package on the Host/Extensions page of your DotNetNuke testing/staging/development website.
Edit the images using Photoshop. Open the PSD files in /portals/_default/skins/multifunction/src_images/. Modify the PSDs for the header, footer, and header graphic as necessary. Save them as PNG or JPG files.
Generate repeating backgrounds by extracting the left-most 1px (full height) of the header and footer PSDs.
Upload the images to a hosting service. I used Amazon S3 for the CDN benefits. MultiFunction currently points to files on that CDN, but I reserve the right to shut it down if bandwidth/costs become an issue.
Customize your CSS. Below is an example:

#Logo {
    padding: 25px 0 0;
}
.HeaderGraphic {
    background-image: url(https://s3.amazonaws.com/dnncdn/p350z/header_graphic.png);
}
#GraphicHeader {
    background-image: url(https://s3.amazonaws.com/dnncdn/p350z/headerbg_rp.png);
}
#GraphicHeader .page_header {
    background: url(https://s3.amazonaws.com/dnncdn/p350z/headerbg.jpg) no-repeat scroll 50% 0 transparent;
}
.PageFooter {
    background-image: url(https://s3.amazonaws.com/dnncdn/p350z/footerbg_rp.png);
}
.FooterWrapper {
    background: url(https://s3.amazonaws.com/dnncdn/p350z/footerbg.jpg) no-repeat scroll 50% 0 transparent;
}

Add the CSS to the Portal.css file via Admin → Site Settings.
Install MultiFunction’s INSTALL package on your DotNetNuke Production website.
Set the default skin: Apply the “MultiFunction Two Column” skin and “MultiFunction Main” container to the site settings.
Set the admin skin: Apply “MultiFunction Edit” as the Admin/Edit skin using the “Main” container.
Set the homepage skin: Use “MultiFunction Home” instead of the Two Column skin on the homepage.