Home » DotNetNuke - Skinning » DotNetNuke Skins – Hello, World

DotNetNuke Skins – Hello, World

Now that we understand how the ASCX files and CSS files relate to each other, it’s time to create our first skin file. Today we are going to deal primarily with the issues of layout.


If you are using one of the Skins that come with DotNetNuke you will see five content areas, called “Panes,” that modules can be added to. Creating these content areas is the main responsiblity of a DotNetNuke skin. These content areas are specified in the skin by using a regular HTML element–DIV and TD are the most common–and specifying the following attributes:

  • runat=”server”
  • visible=”false”
    Ideally a content area should disappear from rendering if it has no modules in it. One of the recurring issues with the stock themes is that if you don’t modify them to include visible=”false” you’ll end up with an empty left area if you don’t put anything in the left pane. Easily remedied, but annoying when you have to do this with each upgrade to DNN.
  • id = this is the name of the pane. Try to stick with the same names that DotNetNuke uses on the stock themes. If you don’t, all of the modules that are in panes with different names will end up on the ContentPane pane.
  • Make sure you have one pane with the id of “ContentPane”

To get a skin with the same layout that DotNetNuke ships with, you will use the following HTML:

<table cellspacing="3"
   cellpadding="3" width="100%"
   border="0">
    <tr>
        <td colspan="3" id="TopPane"
           runat="server" valign="top"
           align="center" visible="false">
        </td>
    </tr>
    <tr valign="top">
        <td id="LeftPane" runat="server"
           valign="top" align="center" visible="false">
        </td>
        <td id="ContentPane" runat="server"
           valign="top" align="center" visible="false">
        </td>
        <td id="RightPane" runat="server"
           valign="top" align="center" visible="false">
        </td>
    </tr>
    <tr>
        <td colspan="3" id="BottomPane" runat="server"
           valign="top" align="center" visible="false">
        </td>
    </tr>
</table>

You might want to throw the following two lines at the top of the file so you can login once this skin has been applied.

<%@ Register TagPrefix="dnn" TagName="LOGIN"
    Src="~/Admin/Skins/Login.ascx" %>
<dnn:LOGIN runat="server" id="dnnLOGIN" />

You can optionally add a ControlPanel id if you want to constrain where the control panel displays for the administrators.

One of the great things about DotNetNuke is that you are not constrained to this layout. You could have 20 different content areas if that made sense. You could place the TopPane and BottomPane inside the LeftPane and RightPane instead of having the LeftPane and RightPane inside the TopPane and BottomPane as they are now. As a designer you have complete freedom in deciding what your skin will look like.

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • DotNetNuke Modules – Creating Base ModulesDotNetNuke Modules – Creating Base Modules Now that we have DotNetNuke installed into Visual Studio we can go ahead and create our first modules. Actually, creating the modules is pretty simple. But it is even easier to do it […]
  • DotNetNuke Skinning – Dealing with ImagesDotNetNuke Skinning – Dealing with Images There is one final basic topic we need to address prior to moving on to the details of working with Skin Objects, and that is the topic of including images in our skins and […]
  • DotNetNuke Skins – ASCX vs HTML modeDotNetNuke Skins – ASCX vs HTML mode I got a question yesterday from a designer who is unfamiliar with ASP.NET asking what the difference is between ASCX mode and HTML mode when developing skins and containers for […]
  • DotNetNuke Skinning – Standard CSS ClassesDotNetNuke Skinning – Standard CSS Classes By now, you've gotten the idea that creating a set of skins and containers for DotNetNuke is a little bit more work than just creating some HTML, images, and a CSS file. Hopefully, you […]
  • DotNetNuke Skins – Handling CSS FilesDotNetNuke Skins – Handling CSS Files One of the most common mistakes I see when I buy skins for DotNetNuke is that the skin creator places a link tag for the CSS file inside the ASCX file for that skin. I've also seen skin […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.