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.
Other post in DotNetNuke - Skinning
- DotNetNuke Skinning - Getting Set Up - June 10th, 2008
- DotNetNuke Skins - Handling CSS Files - June 12th, 2008
- DotNetNuke Skins - Hello, World - June 17th, 2008
- DotNetNuke Skins - Skin Objects - June 19th, 2008
- DotNetNuke Skinning - Containers - June 24th, 2008
- DotNetNuke Skinning - Dealing with Images - July 3rd, 2008
- DotNetNuke Skinning - SolPartMenu - July 8th, 2008
- Blue Stack Form Enhancer Review - September 30th, 2009
- DotNetNuke - Avoiding Container Collision - June 11th, 2012
- Infinite DotNetNuke Skin Sets For One Low Price - August 14th, 2012
- DotNetNuke Skins - ASCX vs HTML mode - November 6th, 2012
- DotNetNuke Skinning - Collapsible Containers - January 8th, 2013
- DotNetNuke Skinning - Standard CSS Classes - February 5th, 2013
- DotNetNuke - Skinning - March 12th, 2013