DotNetNuke skinning 101
In my recent presentation on DNN Skinning, I show how to create a DNN skin from scratch in less than 10 minutes. It was one of the ugliest sites I've ever made, but it did function. Actually, I not only created the skin, but modified it within the 10 minutes.
To begin, a DNN skin is just the UI wrapper for DNN modules. the skin can either be created as the body section of a single HTML page or ASCX user control. The headers for the page will all be dynamically created from data generated by the DNN framework. By creating the page in HTML, a development team can easily hand the graphic layout duties to a designer (assuming you have that luxury).
To create a simple skin, start with a new html file. The layout will consist of a table with 2 columns and 4 rows. We will put the logo on the top row, the menu in the second row, a ContentPane (the only required DNN skin element) and a right pane in the third row. We will include the privacy, user name and login sections in the bottom row.
<table>
<tr><td colspan=2>[LOGO]</td></tr>
<tr><th colspan=2>[SOLPARTMENU]</th></tr>
<tr><td>[CONTENTPANE]</td>
<td id="rightpane" class="RightPane" runat="server" /></tr>
<tr><td>[PRIVACY]</td><td>[USER]</br />[LOGIN]</td></tr>
</table>
That's all you need to do for a simple skin. Note: you won't win any awards with this design. The key technique shown here is the use of DNN specific tags. All of the tags are described in the Appendix of the Skinning documentation that comes with DNN. To dress this up, most designers use CSS to tie to specific elements in the site. Create a file in the same directory and call it skin.css. (You can use other names, and tie the skin implementation to the skin using a skin.xml file, but that is reserved for lesson 2.) In your skin.css file, add the following declarations:
BODY { background:CYAN; color:Blue;}
th { background: yellow; color: cyan; }
Naturally, YMMV depending on your capabilities with css based design. Now, all that is required is to zip your .html and .css files together. Log into your DNN project as host (or admin if your host has enabled uploading skins). Go to your site admin and upload the .zip file as your new skin. The DNN skinning engine will transform the HTML into a web user control and convert the [XYZ] tags into user controls as below:
<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SOLPARTMENU" Src="~/Admin/Skins/SolPartMenu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<table>
<tr><td colspan=2><dnn:LOGO runat="server" id="dnnLOGO" /></td></tr>
<tr><th colspan=2><dnn:SOLPARTMENU runat="server" id="dnnSOLPARTMENU" /></th></tr>
<tr><td><div runat="server" id="ContentPane"></div></td>
<td id="rightpane" class="RightPane" runat="server"></td></tr>
<tr><td><dnn:PRIVACY runat="server" id="dnnPRIVACY" /></td>
<td><dnn:USER runat="server" id="dnnUSER" /><br /><dnn:LOGIN runat="server" id="dnnLOGIN" /></td></tr>
</table>
Once you set your site's skin to your newly imported skin, you can see just how ugly the site is. The next step is to start modifying the skin to make it actually look good. To start, open the skin's .ascx file located in the Skins\_default directory. For this demonstration, I want to change the skin to rotate the menu from horizontal to vertical. Additionally, I will place the supplemental content area (rightpane) under the menu and let the contentpane take up the remainder of the page. To do this, change rows 2-3 as follows:
<tr><th><dnn:SOLPARTMENU runat="server" id="dnnSOLPARTMENU" Display="vertical" /></th>
<td rowspan="2"><div runat="server" id="ContentPane"></div></td></tr>
<tr><td id="rightpane" class="RightPane" runat="server"></td></tr>
Now, save your changes. Once you refresh your browser, you should see the changes, even without a rebuild or re-importing the the skin into DNN. This makes tweaking and trying skin changes exremely easy.
Naturally, creating eye catching sites like those found on Snowcovered or the DNN Skinning Contest requires significantly more work than we have done here. However, the basic steps outlined above will get you started. Once you have tried manipulating this simple example, try exploring some of the themes that come with DNN and try modifying them. At that point, you should look at the Skins and Containers documentation in the DNN/Documentation/Public folder, particularly Appendix 2 which covers the configurable properties of the various dnn:XYZ user controls.