Mar
11
Written by:
Ralph Williams
Thursday, March 11, 2010 11:34 PM
So, I entered into the 2010 DotNetNuke Design Challenge Skinning Contest with the Reasonable Design Skin. I didn’t win. But, to be honest, that isn’t such a bad thing. I was pretty happy with my entry and even I didn’t think that mine was the best, not even in the category of Personal that it got entered into. This means that there are quite a few of other DotNetNuke skin experts out there. The quality of DNN skins are definitely going up and I see no reason as to why DotNetNuke should be considered sub-par in terms of flexibility in design.
Earlier, I gave an Introduction to Skinning in DotNetNuke with CSS which discussed the basics of laying your site out with Divs and CSS, completely eliminating the need for tables in your layout. So, I figured that I would go more in depth and walk through the skinning process of my (non-award winning) skin.
Slicing The Design
The first thing that I needed for this contest was a design. Most of the DotNetNuke sites that I skin are template designs that I have bought, so creating the design was the first obstacle. Once I finally settled on something I liked, it was time to start slicing the design. I typically use Adobe Photoshop for all of my design work, including skinning, but I realize that it is a bit expensive. Another one that I like, especially the CS4 version, is Adobe Fireworks. Definitely not the cheapest, but personally, I like it.
You can download the .psd file here.
The first thing that I do when skinning, is to analyze the design and decide what needs to be images, and what can be done with CSS. Here is what I ended up slicing.
- The top background of the page. Since I was using an image and not a gradient, I took a large slice and named it top-bg.jpg I set up my background image to be 2000px wide. This takes care of the large monitors. I might be a bit large, but I liked it. I included the white line and grey gradient below it as well and set will set it to repeat horizontally.
(note: you will have to hide the groups, Logo, Main Menu, Header, and Content to get just the background). - The middle gradient. It is a repeat of the white line and and grey gradient. Since this is a gradient only, I just sliced a 1px wide slice and named it gradient-bg.jpg
- The footer gradient. This is just a gradient as well, so I only sliced a 1px wide slice and named it footer-bg.jpg
- The Logo. I had to hide all of the background to make this as a transparent image and named it logo.png (transparent pngs don’t play well w/ IE6, maybe this is why it didn’t win…)
- The Menu. I sliced a 38px block of the transparent menu (w/ background hidden still), instead of a 1px block, because for some reason it faded out w/ IE. So I just increased its size and it worked fine. I named this slice menu-bg.png You can achieve a transparent background with CSS3; however, IE 8 and below does not support it.
- Header shadow. You can also get a box-shadow with CSS3, but good ‘ole IE holds us up again, so I had to make it a png. I hid the header images along with the page backgounds and named it header-bg.png.
This is all of the slicing that is needed for the design, except for the content. I also sliced out the header image, image in the sidebar and the three icons in the lower section.
See the HTML in Part 2.
See the CSS in Part 3