New Free DotNetNuke skin, Multifunction the world’s best

Monday, May 16, 2011

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 Codeplex, or check out the Demo web site to see it in action.

Now for some specifics. Did he 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. For those of you who know me, you likely know I have a domain problem. Mainly, I have too many of them. Along with that problem goes another problem, 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 that it was time to bring things under one umbrella, a common layout (selection of layouts really) across all my web properties. There are plenty of free DotNetNuke skins out there, but nothing that I thought worked for all of my websites.

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 really improve the “page speed” and “y-slow” performance of the website with a few minor tweaks. I also liked that I came up with a design that I thought would be flexible enough for all of my websites. You can see her site at http://www.nataliehammond.com/

I took the code I created from her website and created an open source Skin out of it. MultiFunction. MultiFunction is released under the same type of license that DotNetNuke is (although with a different owner, me), the MIT-BSD license. This basically means you can do what you want with the skin, you just have to leave the copyright intact in the source code.

Modifying the look of the skin using CSS is really easy to do. I have already applied the skin to two of my websites, ChrisHammond.com and Project350z.com. Here are the steps I used to setup the Project350z website using Multifunction with custom background images, and a custom header graphic.

Not necessarily the order you need to follow, but here’s an example:

Download the MultiFunction SOURCE package from Codeplex. Install the MultiFunction Source package on the Host/Extensions page of your DotNetNuke testing/staging/development website.
Using Photoshop open up the PSDs that were put into the /portals/_default/skins/multifunction/src_images/ folder. Modify the PSDs for the Header and Footer, along with the Header_Graphic, to customize the images as necessary. When done customizing SAVE the files as PNG or JPG depending on what you want to use. One tip, I also create a headerbg_rp and footerbg_rp file using the left most (1) pixel (full height) of the header and footer PSDs for the repeating backgrounds.
Upload these files somewhere, I chose to host mine on Amazon S3 to benefit from the CDN aspect of the hosting of those files. In fact, MultiFunction points to files on that CDN, at least for now. If bandwidth/costs become an issue I reserve the right to shut that down!
Customize your CSS, you can see my example CSS below.
Put your custom CSS into the Portal.css file of your website, available from the admin/Site Settings page.
Install MultiFunction’s INSTALL package on your DotNetNuke Production website from the Host/Extensions page.
Apply the MultiFunction Two Column skin and Multifunction Main container to the Site Settings for your website as the default skin and default container. Apply the MultiFunction Edit skin as the Admin/Edit skin also using the Main container.
Go to the Homepage of your website and apply the MultiFunction Home skin, rather than using the Two Column skin on the home page.

Custom CSS used on Project350z.com

        1: #Logo

       2: {

       3:     padding:25px 0 0;

       4: }.HeaderGraphic

       5: {

       6:     background-image:url(https://s3.amazonaws.com/dnncdn/p350z/header_graphic.png);

       7: }#GraphicHeader

       8: {

       9:     background-image:url(https://s3.amazonaws.com/dnncdn/p350z/headerbg_rp.png);

      10: }#GraphicHeader .page_header

      11: {

      12:     background:url(https://s3.amazonaws.com/dnncdn/p350z/headerbg.jpg) no-repeat scroll 50% 0 transparent;

      13: }.PageFooter

      14: {

      15:     background-image:url(https://s3.amazonaws.com/dnncdn/p350z/footerbg_rp.png);

      16: }.FooterWrapper

      17: {

      18:     background:url(https://s3.amazonaws.com/dnncdn/p350z/footerbg.jpg) no-repeat scroll 50% 0 transparent;

      19: }

Minified CSS used on Project350z.com

       1: #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;}

So, get to it, go download the World’s Best Free DotNetNuke Skin! And check out the demo

Now that I’ve blogged about the skin, I need to get it up on DotNetNukeBlogs.com, DNNDaily.com and DomoticsBlog.com

No Comments