Choosing an Editor

If this is your first skin, you really should be thinking about what editor you will be using. If you don’t already have an editor or the development environment for other coding you may be working with, the immediate choice that may come to mind is Microsoft Notepad, but there’s no need to put yourself through that type of abuse.

As we’re working with Microsoft technologies while working with DotNetNuke, the natural choice will be Microsoft Visual Web Developer (VWD) which is free. There are other choices for editors here, but VWD will be the one used by most in this context, so we’ll move on with it in our examples. If you are using Microsoft’s VisualStudio .NET (Microsoft’s premier development environment), you will notice that the screens and menus are virtually the same.

Installing Visual Web Developer

Before we can do anything, we’ll need VWD installed. If you have already installed VWD, feel free to skip this section. These are the steps for getting VWD installed:

1. Be sure you have version 2.0 of the .net framework. This can be downloaded from http://www.asp.net or with Windows Updates.
2. Download the VWD install file from http://www.asp.net from the Downloads section. The file will be about three megabytes in size.
3. Once on your local drive, double-click on the fi le to run the installation. You will encounter several common wizard screens. One wizard screen to notein particular is for installing SQL Server 2005 Express Edition. If you do not already have a version of SQL Server 2005 installed, be sure to select to install this. DotNetNuke will have to have an edition of this to run off for it’s data store. This is a screen shot of the recommended installation options to choose.

4. Stepping through the wizard, you will start the installation. The installation process may take a while depending upon what options you chose. For example, if you chose to install the MSDN library (documentation & helpfiles), it will take much longer. It will only download the items it needs.
5. At the end of the installation, it will prompt you to register the software. If you do not register VWD within thirty days, it will stop working.

If you encounter problems in the installation of VWD, you can find additional assistance at the http://forums.asp.net/discussion website.

Installing the DotNetNuke Starter Kits

E ven though we now have VWD and SQL Server, we’ll need the DotNetNuke files to set up before we can start skinning portals. Do so by using the following steps:

1. Navigate to http://www.dotnetnuke.com.
2. If you haven’t already registered on this site, do so now.
3. If you are not already logged in, do so now.
4. Click on Downloads and download the latest version of the starter kit.
5. Right-click on the zip file you downloaded and extract the contents.
6. Double-click on the vscontent file that was extracted. This will start theVisual Studio Content Installer. Select all the components, and click Next.
7. Click Finish to install the starter kit. There are a few components that will be installed. See that in the next screenshot one of the components did not get installed. This is fine as long as the first one, DotNetNuke Web Application(the one we’ll be using) installed successfully.

The following is what you should see so far:

If you encounter problems in the installation of the DotNetNuke starter kits, you can find additional assistance at the http://www.dotnetnuke.com website by clicking on the Forums link and then drilling-down to the Install It! link.

Setting Up Your Development Environment

In almost any programming project, you will have two environments: the development environment and the post-deployed environment. While skinning, this is no different. Most likely, you will have a local computer where you work on your skin. When you are done with it and are ready to package and deploy it, itwill be installed on the target or live DotNetNuke website which will be your post-deployed environment.

To set up our development environment, fire up VWD. We’ll now create a new DotNetNuke install:

1. Click on File, and then click New Web Site.
2. A dialog box appears. Click on DotNetNuke Web Application Framework.
3. For Location, pick File System (should be the default item), then type the following location beside it: C:DotNetNukeSkinning.

This is the screenshot of what you should see so far:

1. Click OK. It will take a few moments to copy over all the needed web files.
2. You will then be presented with a welcome screen. As the welcome page directs, press Ctrl plus F5 to run your DotNetNuke application.
3. After a few moments, a DotNetNuke install should open in a web browser. If you are presented with the following message, right-click on the information bar at the top and enable the intranet settings in the Internet Explorer.
   This is what you should see at this point:

4. You are presented with a choice of installation methods. Select Auto andthen select Next.
5. You should then see a web page with a log of installation of the application.Click on the link at the bottom that says Click Here To Access Your Portal.

If you encounter problems in the installation of the DotNetNuke, you can find additional assistance at the http://www.dotnetnuke.com website by clicking on the Forums link and then drilling-down to the Install It! link.

6. Congratulations! You now have DotNetNuke up and running. Click Login in the upper-right corner of the screen with the username as host and a password as dnnhost.
7. You should be on the Home page with several modules on it. To make the home page easier to work with, delete all the modules on it, and add a blank Text/HTML module. (In case you have never deleted a module from a page before, you will find the delete menu item if you hover over the downward-pointing triangles to the left of each of the titles.)

Depending on the version of DNN you downloaded, you may experienced system message from DotNetNuke on the Home page titled Insecureaccount details. Although changing the default password as it instructs is always a good idea, it is not necessary on a development computer or a non-production implementation of DotNetNuke. However, if you don’t want it to nag you about it go ahead and change it.

This is our DotNetNuke portal that we will use to test the skins we will create. Move back over to VWD. Close the welcome page.

The skins for DotNetNuke will be found in ~Portals_defaultSkins. Go to that directory now as shown here:

Congratulations! You have now set up your development environment, and we are now ready for skinning.

Creating Your First Skin

We will now create a skin and record time. You may be impressed by how fast and easy it is for you to create a skin.

Remember when we downloaded the starter kits from DotNetNuke.com? One template is for creating a skin. As of the time of this writing, the current download’s template will produce a skin that looks just like the default skin. If this is what you’re looking for, you can achieve the same result by copying the DNN-Blue folder and renaming it to something else. Rather than doing this, however, we are starting from scratch.

1. Creat e a folder in your development environment. Name it as FirstSkin. InVWD, to create a new folder, right-click on the folder you want to create it in—in this case Skins—and select New Folder.

2. Next, create an htm file inside the FirstSkin folder called Skin.htm. Use the File menu to create a New File. This will bring up a dialog box where you will pick what type of file you wish to create. Pick HTML Page and name the file as Skin.htm.

3. Now, open our new Skin.htm file.

4. A typical htm document will have tags like , , and . A DotNetNuke skin has none of these. Delete any content so you have clean slate to start from.
5. Once we have a blank htm page to work from, type in the following and save:

   [LOGIN][MENU]<div id="ContentPane" runat="server"></div>

6. Go to the Skins menu item on your Admin menu.

7. You will now see two drop-down boxes, one for Skins and one for Containers. In the drop-down for Skins, pick the skin you have created. You should see something like this:

8. Click on the link in the lower-middle portion of the screen that says ParseSkin Package. You should see your skin now:

9. Now that our skin has been parsed, let’s apply it to our current DotNetNuke portal by clicking on the Apply link.

Keep in mind that we only have one pane, the ContentPane. If this was a live site with modules on other panes, the positions may have been changed.

10. Now, go to the home page by clicking on your menu bar at the top.

What Do We Have Here?

I know what you’re thinking: This has got to be the world’s simplest DotNetNuke skin. And you’re right. You may not be rushing to install this skin on your production portals, but you have created your very first operational skin!

Let’s go over what just happened, from creating our skin to seeing it in action. Skinsstart out as a simple HTML file. Just as with any website, an HTML file will have some degree of markup. Of course, we have not added much markup to our skin yet.

If you’re wondering from where DotNetNuke gets all the HTML structure such as the html, head, and body tags, take a look at Default.aspx in the root of your DNN install. This is the page used essentially everytime a page is served up. You can look in that file and find an ASP.NET element called SkinPlaceHolder. This is where our skin will be injected into each DotNetNuke page. Everything before and after this place holder is what will be served to any DNN page request no matter what skin is applied.

The code we entered for our skin is:

[LOGIN]
[MENU]
<div id="ContentPane" runat="server"></div>

Of the code we typed, [LOGIN] and [MENU] are special keywords to DotNetNuke,called tokens. The [Login] token will turn into the login link you’re used to seeing and the [Menu] token will serve as our DotNetNuke menu. Adding the [login] token will ensure that we’re not locked out of our portal after applying this skin. The <div> tag we added will be a simple ContentPane for now.

Notice the two attributes we added to this tag <div><em>—id and runat. These are attributes required by ASP.NET. The id is a unique identifier in the page and the value given to it (ContentPane) is recognized as name by DotNetNuke. The runat attribute tells the ASP.NET engine that it needs to be processed by it.

Why Parse?

Recall when we clicked on a link to parse our skin. What DotNetNuke does at this point is take our HTM file and replace those tokens with ASP.NET user controlsthat have been predefined in DotNetNuke. At the end of this parsing process, the result is an ASCX file that becomes the real skin file, which is loaded into the Default.aspx at the runtime event of a page request.

Anytime after parsing the skin for the first time, you may go in and look at the ASCX file with a text editor, and even modify and see immediate changes without doing a parse. As tempting as editing the ASCX file may be (especially if you’re an ASP.NET developer and understand editing ASCX files), you really should not be doing that. This ASCX file is regenerated and is replaced each time a HTM skin file is re-parsed.We will also want to create our skins in a way that would be compatible with the future versions of DotNetNuke. Starting off with an HTM skin file puts us on the path to achieve this goal.

Finishing Touches

The next thing you will want to do is add more tokens and a little HTML to make yourself a little more proud of your DNN skin. To do this, go back to your HTM file and add two or three items from the list of tokens shown as follows:

[LOGO]
[BANNER]
[SEARCH]
[LANGUAGE]
[CURRENTDATE]
[BREADCRUMB]
[USER]
[COPYRIGHT]
[TERMS]
[PRIVACY]
[DOTNETNUKE]

For a complete list of all DotNetNuke tokens, please refer to the DotNetNuke Skinning Guide document by Shaun Walker. You candownload it from http://www.dotnetnuke.com/LinkClick.aspx?fileticket=2ptHepzmuFA%3d&tabid=478&mid=857.

Now add in some HTML. You may want to add in a few <hr>(horizontal rule) or <br>(vertical break) tags to separate things out. When you make changes and want to see them, remember to go to the Admin menu and then to the Skins page and re-parse the skin, then go to the Home page to see the changes.

Summary

The title for this article was Creating Your First Skin and that’s exactly what we did.There are many reasons why you couldn’t or wouldn’t use this skin for a live site. Ofcourse, any website needs a good design, and some graphics, but if you’ve managed a DNN site, before you know you’ll need some more panes and some precise positioning.