DotNetNuke Tips for Skinning, CSS, and Design

With the latest major update to DotNetNuke, there have been some questions as to what has changed in skinning for DotNetNuke 6.0. One big change has been the introduction to the new Manage button automatically into the containers. Some love it, some hate it, and others seem to still be undecided.

I got the inspiration for this blog about 8 months ago from a Smashing Magazine article entitled, “Designing for Content Management Systems”. So, why write another blog but, specifically for DotNetNuke? Well, they did a great job on their post but, they were generic to just CMS’s in general, and we all know that DNN has some challenges of it’s own.

The main challenge that I have found to be when designing for DNN, is planning for unknown content. You just never know what’s going to happen once you hand the keys over to the client. So, a lot of my designing is actually trying to plan ahead for the many different amounts/content of what could be added to the site. This includes not just content panes, but also menu items. For some reason, once a client gets access to adding their own content, one of the first things they do is create new main menu items. Now, some of my designs have been very specific and the site structure has been discussed w/ the client and they actually understand that they need...

I have found another great use for the DotNetNuke Announcements module and jQuery. Using it create a dynamic accordion. In case you missed it, this is the second time that I have gotten the DNN Announcements module and jQuery together. See my previous post on how to Turn DNN Announcements Module into a jQuery Slider.

This time, I needed to create a solution where I could have a jQuery accordion yet it could be easily updated by the client. So, I thought about the different core modules that were available and picked the Announcements module due to the ability to easily template it out. Now, if only the DNN Blog module were fully template driven (*hint *hint). This module has spots to place a header, repeatable item, alternating repeatable item, separator, and footer. We will be using only the header, item, and footer.

DotNetNuke has come a long way recently with making things much more w3 compliant. This has allowed for more than just cleaner code; it has also allowed for much more control of your website through jQuery and CSS. Also, according to the forums, it looks like things are getting even better for compliance and control.

One of my favorite updates of DNN modules to this new compliance, is the DNN Announcements module. With the latest release, we now have the ability to set up the announcements as a list and apply some cool jQuery to it. When I started looking into what I wanted my slider to be, I decided that I wanted to have my main image fade in and out and the title and description to slide in from the bottom. I came across the s3Slider jQuery plugin which seemed to provide exactly what I was looking for.

I have outlined the steps below on how to add it to your site. I did not go into much detail on how things are set up...

This is part of a three part series on skinning my Reasonable Design Skin from the 2010 DotNetNuke Design Challenge Skinning Contest.

Part 1 was Slicing the design for the DNN Skin.

Part 2 was writing the HTML for the skin.

Here, in part 3, I will go over the CSS for the skin. If skinning with CSS is new to you, be sure to check out my post An Introduction to Skinning in CSS for DotNetNuke.

The CSS

Now that we have all of the HTML in place, we need to style it. The first thing that I do, is to apply my “pre-fab” tools. I will not go into much detail with these as there are plenty of available resources out there.

Continued from Part 1 – Slicing the Design.

Setting up the HTML for my skin.

Because of some of the design elements that the annoying designer (me) had in the design, there is a small bit of complexity to it.

There are a few things at work here.

• the content area needs to be centered on the page, which means it needs to be wrapped in a div that is centered.
• To center a div, you must set a specified width and set the left and right margins to auto. (ex. margin:0 auto; shorthand for margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto;)
• the gradient spans the full width of the page in the lower content area that holds the bottom three content panes.
• The footer does the same thing.
• I want the footer to always be at the bottom of the browser.
• I want to use as little code and nesting of divs as possible.
• It needs to act the same across all browsers.

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.

When I first started using DotNetNuke, it was somewhere in version 3.x. Learning this new system was a bit of a challenge at the time. Probably my biggest issue was the core, SolPart menu. I had so much trouble with it. Not much later our company switched to the RadMenu by Telerik, and I never looked back for about 4 years. That is, until I was working on my skin for the DotNetNuke Design Challenge. I wanted to use the core menu and did some digging to find a post on the DotNetNuke forum (see Jan Olsmar’s post) discussing how it can be rendered as an unordered list. You can also check out the blog post by Mike Van der Meulen “New CSS Menu Features In DotNetNuke 5”. This blog gives a nice description on the available attributes and class names which I will be referring to in my style sheet.

Half of the Battle

Okay, getting the menu to show up as an unordered list is great! But, that just means you get an ugly bulleted list of your menu. Enter Css. We can make our bulleted list look just like a normal menu. As a matter of fact, this is the accepted, or should I say, expected way to display a website’s menu.

Recently we started a new DNN User Group in Tampa, the DotNetNuke Tampa, and at our first meeting we discussed what topics we should talk about. One that sort of surprised me was the topic of skinning in DNN. I guess that I have started to take for granted what I have learned in the past few years. But as I looked back, I realized that it has been a rough long road to where I am today.

When I first started at my job, I had not heard of DotNetNuke. So, I had to learn all of the basics of skinning and how to add that to what I knew about making a website, which wasn’t much. Right about the time that I started to get the hang of it, I realized that I could produce better sites by skinning without the use of tables. So, just switch from using rows and columns to boxes. Simple, right? No way! I struggled and struggled and struggled and finally gave up. Shortly after giving up, we hired an Internet Marketing manager and the first thing he told me was, “Those tables have gotta go!” Needless to say, that friendship was off to a rocky start!

So, why did I have to change? Well, I shortly became educated that search engines put higher weight on information that is at the top of the page. I started looking at my code and saw that my actual content was not at the top of the page, but was quite a ways down. Not only that, now that I have embraced the tabless skinning, I feel that I have much more flexibility and it’s much easier to tweak. I realized that it was time to bite the bullet and make the change. There were a few things that really seemed to hold me up as I went down this new road of tabless skinning.

I have been seeing quite a few references to Google talking about website speed lately. It seems as though Google is going to consider your websites speed in an effort to "make the web faster." (read article here) I like it.

I think there should be more of an emphasis on making the web more usable and speed is a major factor. This can seem like a challenge when it comes to DotNetNuke because so much of it is out of our hands (mostly because I am a designer and skinner, not a programmer).

"It needs to be dynamic." That is what my boss is always saying to me when it comes the newest bit of usability that I want to add to my latest DotNetNuke site. He keeps telling me that whatever I do, it needs to be automatic for our client using the website. So, the latest bit of usability that I wanted to add was, having a list of quick links in the footer of each page. Basically, I wanted to take the clients services and make them a list in the footer and hey, DNN should allow me to do this easily, right?

I posted this question to Twitter and received no response, other than someone else was looking for and answer as well. So, I had to do some digging on my own. Ugh. I am using the Telerik RadMenu and went through the Skinning Whitepaper. I finally came across the ShowOnlyCurrent attribute which didn't sound like what I wanted. This is great for sub menus and I use this all the time. But, this great tool also allows you to use specific page's child items. Perfect! So, here is how you do it:

Something that constantly comes up for me while working on a DotNetNuke Site as a designer, is making the site look good, being friendly toward the Search Engines and yet still keeping all of the dynamic capabilities of DNN, which is why we use it, instead of straight HTML, right? I have come across a few little tricks in which I will share in my next few posts.

One of my favorites is also very simple. It replaces the default title of a container. Doing this will remove a decent amount of the code bloat around the title, leaving it open to place directly into a header element of your choice. This also leaves it open to more easly target your title with CSS, without having other classes and elements getting in the way.

One of the challenges that is often faced when optimizing a DotNetNuke 4.x site, is all of the extra code bloat making it harder for the search engines to find your content that is important. Using the new Relocation Widget that comes with DotNetNuke 5.0 + allows us to overcome some of these challenges. The Relocation Widget will allow you to place your important content at the beginning of your code while moving the less important content (to the search engines) at the end.