DotNetNuke Skins - Hello, World

June 17, 2008 By: Dave

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.

Other post in DotNetNuke - Skinning