DotNetNuke Tips for Skinning, CSS, and Design

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.

I was setting up a new install of DotNetNuke today and started thinking about what modules do I add to my install before working on it.

Here are some that I add right away (These are all FREE - although, please consider donating to them):

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.