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

  • DotNetNuke Modules – Creating Base ModulesDotNetNuke Modules – Creating Base Modules Now that we have DotNetNuke installed into Visual Studio we can go ahead and create our first modules. Actually, creating the modules is pretty simple. But it is even easier to do it wrong, which...
  • DotNetNuke Skins – ASCX vs HTML modeDotNetNuke Skins – ASCX vs HTML mode I got a question yesterday from a designer who is unfamiliar with ASP.NET asking what the difference is between ASCX mode and HTML mode when developing skins and containers for DotNetNuke. I th...
  • DotNetNuke – SkinningDotNetNuke – Skinning Today I'm going to start a separate series on Skinning DotNetNuke. Don't worry, I'm still planning to continue the series on creating modules. Later on, I may start a series on something else. But ...
  • DotNetNuke Skinning – ContainersDotNetNuke Skinning – Containers Today we move our focus to DotNetNuke containers. Not because we are done with skins, but because we can't go any further in our discussion of skinning until we cover containers. As with skins...
  • Infinite DotNetNuke Skin Sets For One Low PriceInfinite DotNetNuke Skin Sets For One Low Price Several months ago, I mentioned that I found a product that will allow you to create as many themes as you want for WordPress, Joomla, Drupal, ASP.NET, or regular HTML. I also mentioned that it d...
  • http://www.travelatlantic.com(underconst.) Dbarselow

    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

  • http://www.webascender.com/ DotNetNuke Consultant

    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

  • http://byteandpixel.com 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”