.NET Answers

While it IS possible to create DotNetNuke skins and containers using a standard HTML editor and HTML files, I find that it is much easier to use Visual Studio and ASCX files instead. The reason for this is that I can modify and run my DotNetNuke installation and see exactly what the end result is going to look like. I also find that I am able to create a much leaner set of HTML using the ASCX method than I can using the HTML method.

For those of you who are designers, this does not mean that you will need to buy another tool. You can download Visual Web Developer Express from Microsoft for free.

Once you have Visual Studio or Web Developer Express installed, you’ll need to download and install the DotNetNuke starter kit from the DotNetNuke site (www.dotnetnuke.com) and then install DotNetNuke as we describe in our article, “Installing DNN into Visual Studio.”

So now that you have DotNetNuke installed and ready to go, the next thing we need to do is create the Skin Files. To do this, right-click the project in solution explorer and select “Add New Item.” This will bring up a dialog box that will display different templates that you can install. Make sure you’ve specified that you will be working in VB.NET and the template, named “DotNetNuke Skin,” should display at the bottom. When it completes, the template wizard will display instructions to rename the skin and container directories to the name you gave the skins. Go ahead and do that.

Since I don’t use the HTML method of creating skins, we are going to next delete the HTML files and the XML files that this wizard created from the skin and container directories. In their place you will create new ASCX files.

Right-click the skin directory that the wizard created and select “Add New Item.” Select “Web User Control” and name it “SkinTest.ascx” (or whatever you want). Make sure you uncheck, “Place code in separate file.”

Right-click on the container directory and select “Add New Item.” Select “Web User Control” and name it ContainerTest.ascx. Again, make sure you leave “Place code in separate file” unchecked.

Next, we need to fix up the header of these two ASCX files we just created. Change the Control Header that Visual Studio created for you in the container so that it says:

<%@ Control language="vb"
   CodeBehind="~/admin/Containers/container.vb"
   AutoEventWireup="false" Explicit="True"
   Inherits="DotNetNuke.UI.Containers.Container" %>

And change the Control header for the skin’s ASCX file to look like this:

<%@ Control language="vb"
    CodeBehind="~/admin/Skins/skin.vb"
    AutoEventWireup="false" Explicit="True"
    Inherits="DotNetNuke.UI.Skins.Skin" %>

You can create multiple skin and container files. They may be different colors, have different layouts, but they should all be similar.