Introduction

In DNN, skinning is a term that refers to the process of customizing the look and feel of the DNN portal. One of the powerful features of DNN is that the functionality of the portal is separated from the presentation of the portal. This means we can change the appearance of the portal without affecting how the portal works.

To create a skin in DNN we will work with three kinds of files: HTML, ASCX, and CSS. The HTML or ASCX file describes the layout of the page and the CSS file provides the styling. If you have worked with HTML and CSS before than you will be able to immediately get started. However, if you are familiar with ASCX (and as a DNN developer that is likely) you can achieve the same results faster than HTML. In the recipes, we will show primarily ASCX skinning with some brief examples of HTML skinning.

Skin Objects

Before we start looking at the recipes, we need a quick word about Skin Objects. Skin Objects are used in both HTML and ASCX skin files as placeholders for different kinds of dynamic functionality. In HTML skins, you place text tokens such as [CURRENTDATE] in your code and when the code is parsed by the skin engine it will insert the matching skin object. If you are working in ASCX, you register skin objects as controls that you place directly in your code.

DNN offers many different skin objects such as CurrentDate, Logo, Login link, and others and we’ll see many of these in action in the recipes of this article.

Downloading and installing a skin

Often the easiest way to start skinning is to download an existing skin package and see the different files used for skinning. In this recipe we will download an excellent skin created by Jon Henning from a site called CodePlex that demonstrates the most common skin objects and layouts.

Another reason for starting with an existing skin is that it allows incremental development. We can start with a fully functional skin, deploy it to our DNN portal and then edit the source files right on the server. In this way the changes we make are immediately displayed and problems are easily spotted and fixed. However, as applying a skin can affect the entire site, it is best to create and test skins on a development DNN site before using them on a production site.

Finally, it should also be noted that as a skin is really just another type of extension in DNN, you are already familiar with some of these steps.

How to do it…

1. Open your favorite web browser and go to the site http://codeendeavortemplate.codeplex.com/.

   

2. Click on Downloads in the toolbar.

   

3. Scroll down a little and click on the CodeEndeavors Template Skin link.
4. When prompted with the License Agreement, click I Agree.
5. The File download dialog will ask if you want to Open or Save. Click on Save and select a temporary folder to hold the ZIP file.
6. That’s all we need from the CodePlex site, so close the browser.
7. To install the skin on the DNN site, begin by logging in as the SuperUser.
8. Look at the Control Panel and make sure you’re in Edit mode.
9. Look under the Host menu and select Extensions.
10. Scroll to the bottom and click on the link Install Extension Wizard.
11. The wizard will prompt for the ZIP file (called the extension package).
12. Click on the Browse button and select the file you just downloaded (for example CodeEndeavors.TemplateSkin.install.v01.01.07.00.zip). Click on Open then click on Next.

    

13. The wizard will display the Extension information. Click on Next.
14. The wizard will display the Release Notes. Click on Next.
15. On the license page, check Accept License? and click on Next.
16. Now the install script will run, creating the skin. At the end you should see the message “Installation successful”.
17. Click on Return.
18. To make the skin active, select Skins under the Admin menu.

    

    (Move the mouse over the image to enlarge.)

19. From the Skins drop-down lists, select CodeEndeavors.TemplateSkin.
20. For this article, we will use the Index skin for our examples. Click on the Apply link under the index skin to make it active.
21. To see the skin files, you can look in the root folder of the DNN instance under Portals_defaultSkinsCodeEndeavors.TemplateSkin.
22. Here is a summary of the key files you are likely to see in a skin like this:
    

    File name	Description
    animated.ascx	An ASCX skin file.
    container.ascx	An ASCX container file.
    index.html	An HTML skin file.
    skin.css	The stylesheet for the skin.
    container.css	The stylesheet for the container.
    TemplateSkin.dnn	The manifest file for the skin package.
    thumbnail_animated.jpg	A preview image of the ASCX skin.
    thumbnail_container.jpg	A preview image of the ASCX container.
    thumbnail_index.jpg	A preview image of the HTML skin.
    license.txt	The text of the license agreement.
    releasenotes.txt	The text of the release notes.
    version.txt	The version number.
    Images folder	A folder holding the graphic images supporting a skin or container.