DotNetNuke Skinning – Getting Set Up

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.

Related Post

5 Responses to “DotNetNuke Skinning – Getting Set Up”

  • Hi David I wanted to thank you for your videos you have allowed the public to view I think it is very gracious of you to share your wisdom regarding information technology. My self became interested in computing 20 years ago give or take a year or two partly do to a forced career change and the rest well just plainly interested. I hope you don’t mind if I ask some questions every now and then. Well I won’t bore you with cit chat I will be looking forward to seeing more of your videos and I will be teling my friends and coleagues about them also.

    DKB

  • Just browsing through all of your articles. We gave up on doing the HTML upload conversion a long time ago. It’s easier for all our designers to just learn enough of the .Net tags and script in the ascx files and know not to mess with it than it is to make the HTML files and upload/parse them.

    James

  • jam:

    Hi David

    I like to install DNN in my local machine, do you have a tute hwo to do it?

    I tried it myself but Im stuck in the IIS.. I dont know how to install the database etc..

    do you provide free help?

    thanks

    jam

  • Pablo Arthur:

    David:

    Very interesting video. Specially the skinning setup.
    I am trying to locate the second part of that video and I can not find it.
    Can you point me to the right direction of the second part??

    Thanks in advance,

    pablo arthur rodger

  • Dave:

    Not everything is a video. Everything I have on skinning is in the list at the bottom of the post “Other post in DotNetNuke – Skinning”

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail

Bear