Woah, Nellie.NET!

From my simple mind to… mine…

DotNetNuke Skinning

with one comment

I’m in the process of creating a DotNetNuke skin. I’m not a designer, so I’m lucky that it’s a skin based off of an existing site. The challenge has been to maintain the structure of the site, while stripping out all elements, images, and content that are unique to any given page. I’m also trying to maintain the strong CSS based styling of the site.

A DNN skin is nothing more than an HTML template indicating where various DNN modules can be placed, within the guidelines of the overall skin design. The look and feel of most pages in any particular DNN portal are based off of the default skin (page template) for the portal.

I am not a fan of table based designs. They lead to bloated and hard to manage html, not to mention poor accessibility by mobile devices and readers. Quite a few older web sites were built – and still function – using table based designs. I AM a big fan of the separation of concerns that CSS brings – that is, separation between content structure and the look and feel of a site.

Unfortunately, many older DNN sites ARE table based – with many books and tutorials encouraging the use of tables.

However, I had read somewhere that 4.x supports the concepts, but I wasn’t sure about 3.x. I was a little worried that the older DNN version that I’m using (DNN 3.3.7) would not support CSS/XHTML based layouts. I gave it a shot and, luckily, it worked by simply building the entire site using transitional CSS and XHTML:

  • Your CSS can go into the default skins.css file.
  • Content panes are defined in <div> tags and not in <td> tags, like so:

    <div class=”mainCol” id=”ContentPane” runat=”server”/>

    Note the ASP.NET runat attribute. This will generate a content pane in DNN with the name of “ContentPane”, while styling the entire area using the “mainCol” CSS class.


  • Place any special DNN tags in their expected locations, tagged appropriately by CSS (assuming that you’re building the skin as an html file and not an ascx control):

    <div class=”logo”>[LOGO]</div>


Written by Nelson

September 13, 2007 at 4:23 am

One Response

Subscribe to comments with RSS.

  1. I am a brand coach and my husband is helping me to develop my site with dot.net nuke but well since I am a branding expert I really need to use my corporate typography, and to be quite honest I would not like to give up all the great advantages of dot net nuke just because I can use my brand’s typography, does anyone knows how to install different types or a way to use them, maybe a module or I don’t know, I mean there should be a way it is all html after all am I right? I just can’t use the basic ones. PLEASE HELP!!!


    September 26, 2007 at 10:32 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: