Creating a Simple Skin using DotNetNuke

Exclusive offer: get 80% off this eBook here
DotNetNuke 5.4 Cookbook

DotNetNuke 5.4 Cookbook — Save 80%

Over 100 recipes for installing, configuring, and customizing your own website with the DotNetNuke CMS

₨831.00    ₨166.20
by John K Murphy | September 2010 | Cookbooks Open Source

In this article by John K. Murphy, author of DotNetNuke 5.4 Cookbook, we will cover the following topics:

  • Downloading and installing a skin
  • Creating a simple HTML skin
  • Creating a simple ASCX skin

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/.

    DotNetNuke 5.4 Cookbook

  2. Click on Downloads in the toolbar.

    DotNetNuke 5.4 Cookbook

  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.

    DotNetNuke 5.4 Cookbook

  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\_default\Skins\CodeEndeavors.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.

DotNetNuke 5.4 Cookbook Over 100 recipes for installing, configuring, and customizing your own website with the DotNetNuke CMS
Published: September 2010
eBook Price: ₨831.00
Book Price: ₨1,386.00
See more
Select your format and quantity:

Read more about this book

Creating a simple HTML skin

For developers or designers familiar with HTML and CSS, DNN offers a way to create skins without having to know the details of ASCX. The DNN skinning engine can parse an HTML skin and create the ASCX file for the portal.

In this recipe we will create a simple HTML skin and CSS file on a test DNN portal. This will let us preview the skin as it is developed. We will also demonstrate how to use Skin Objects in HTML.

It is very important that skins contain a DIV element with an ID of "ContentPane". This is used by DNN to show the default site content and is required in all skins.

Getting ready

Here is a diagram of the page layout we will create using HTML:

DotNetNuke 5.4 Cookbook

HTML provides the layout for the skin but to provide the functionality we will use Skin Objects. Skin Objects are text tokens that will become ASCX controls when the skin is parsed by the skin engine. This process is invisible to the developer. We just need to place the desired text token in the HTML.

In this recipe we will use the following skin object tokens and DIVs:

Skin Object

Description

[MENU]

Displays the DNN menu.

[USER]

Displays who is currently logged in and offers a link to the User Profile page.

[LOGIN]

Offers a Login/Logout link.

ContentPane DIV

Required. This is where the contents of the portal are displayed.

RightPane DIV

Optional. A place to display content on the right side of the page.

How to do it...

  1. Start by locating the default skin folder within your test DNN portal (\Portals\_default\Skins).
  2. Next, create a new folder to hold the skin files. Call this folder SampleHTMLSkin.
  3. Launch the Development Tool.
  4. From the File menu, select New File….
  5. In the New File dialog, select HTML Page and click on Open.
  6. This will give you a basic HTML file. Next, we need to add a simple HTML table to lay out our page. To create the layout shown in the sample diagram, our HTML table code should look like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>

    <link id="skin_css" href="skin.css" type="text/css"
    rel="stylesheet" />
    <title>Untitled Page</title>
    </head>
    <body>
    <table width="100%">
    <tr>
    <td width="60%">
    [MENU]
    </td>
    <td width="40%">
    [USER]
    &nbsp;&nbsp;|&nbsp;&nbsp;
    [LOGIN]
    </td>
    </tr>
    <tr>
    <td>
    <div id="ContentPane" runat="server"></div>
    </td>
    <td>
    <div id="RightPane" runat="server"></div>
    </td>
    </tr>
    </table>
    </body>
    </html>

  7. Here we created an HTML table with two columns and two rows corresponding to the layout diagram. Then we placed the Skin Objects and DIVs in the table.
  8. Select Save HTMLPage1.htm As… from the File menu.
  9. Browse to the SampleHTMLSkin folder and save the file as SampleHTMLSkin.htm.
  10. Next, we need to create the CSS file for the skin. From the File menu, select New File….
  11. At the New File dialog, select Style Sheet and click on Open.
  12. Replace the contents of the file with:

    /* General Styles */
    body {background: #CCCCCC; height:
    100%; margin: 0px; padding: 0px;}
    a, a:link, a:visited, a:active {color: #800000; text-decoration:
    none; font-family: Verdana, Arial, Helvetica, sans-serif; fontweight:
    normal;}
    a:hover {color: #C00; text-decoration:
    none;}

    /* Styles for Controlling the Layout */
    .template_style {width: 960px; margin: auto;}
    .content {background: white; border-left:
    solid 1px #EAEAEA; border-right: solid 1px #EAEAEA; padding: 10px;
    margin: 0 5px 0 5px;}

  13. Select Save StyleSheet1.css As… from the File menu.
  14. Browse to the SampleHTMLSkin folder and save the file as skin.css.
  15. One more useful thing to do is create a preview image of the skin. This is a little hard to do as we haven't even created the skin yet, but you can use a simple draw program (such as MS Paint) to create an image of what you plan the skin to look like. Something like this:

    DotNetNuke 5.4 Cookbook

  16. Save the image file as SampleHTMLSkin.jpg.
  17. To see how the new skin will look on our site, start by logging in as the SuperUser.
  18. Look under the Admin menu and select Skins.
  19. Select SampleHTMLSkin from the drop-down list.
  20. As this is an HTML skin, we can't preview it until we parse it. Click on the link Parse Skin Package.
  21. The new SampleHTMLSkin will now appear:

    DotNetNuke 5.4 Cookbook

  22. To see how the skin looks, click on the Preview link.

    DotNetNuke 5.4 Cookbook

  23. It's not much but you can see that the HTML table layout has correctly placed the menu on the top left and the Login/Logout link is in the top right. The content appears in the ContentPane on the bottom left where we put it and the empty RightPane is on the bottom right.
  24. To see exactly what the skin installation did, look in the folder containing the skin. Right next to the SampleHTMLSkin.htm file you created, the parser created SampleHTMLSkin.ascx and a thumbnail_samplehtmlskin.jpg (if you included an image for the skin).

How it works...

When the skin is deployed, the skin engine will automatically parse the skin package and generate the required SampleHTMLSkin.ascx file. If you are still developing the skin and editing the SampleHTMLSkin.htm file on the server, you must click on the Parse Skin Package link before the changes will appear in the portal.

If you are familiar with HTML and want to start learning to create ASCX skins, you can look at the ASCX skin that the parser generates to see how the HTML is converted. You can even edit the ASCX file directly to see how your changes affect the skin.

There's more...

In this recipe we used an HTML table to position the Skin Objects. Although this might be a familiar technique for HTML developers, we can achieve much greater control over the positioning of objects by using the CSS file. In addition, it is also possible to use more complicated tokens and pass parameters to them.

Creating a simple ASCX skin

Although you can develop skins in HTML and parse them into ASCX, many developers prefer to work directly in ASCX. This has the advantage that changes in the file can be immediately displayed rather than needing parsing first. Which approach you choose often depends on your background. If you are more familiar with ASCX you may find it easier than using HTML. However, if you do switch to ASCX make sure the original HTML file is removed, otherwise your changes may be overwritten by anyone reparsing the original HTML file.

There are a few small differences when developing ASCX-based skins. When using Skin Objects' controls in ASCX, you first place a register directive for the control at the top of the file before referencing it in the body of the ASCX file. After the control has been registered, you can use it as many times as desired providing you give each one a unique ID.

Here is a diagram of the page layout we will create:

DotNetNuke 5.4 Cookbook

How to do it...

  1. Start by locating the default skin folder within your test DNN portal (\Portals\_default\Skins).
  2. Next, create a new folder to hold the skin files. Call this folder SampleASCXSkin.
  3. Launch the Development Tool.
  4. From the File menu, select New File….
  5. In the New File dialog, select Web User Control and click on Open.
  6. The first step is to place the following directive at the top of the file:

    <%@ Control language="vb" AutoEventWireup="false" Explicit="True"
    Inherits="DotNetNuke.UI.Skins.Skin" %>

    Older skins (before 5.x) did not inherit from DotNetNuke.UI.Skins.Skin, so if you need to convert an older skin to 5.x, you will need to add this.

  7. The next step is to add a register directive for each Skin Object we plan to use:

    <%@ Register TagPrefix="dnn" TagName="NAV"
    Src="~/Admin/Skins/Nav.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="USER"
    Src="~/Admin/Skins/User.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="LOGIN"
    Src="~/Admin/Skins/Login.ascx" %>

  8. To create the navigation menu we'll add a DIV and insert the NAV control:
    <div >
    <dnn:NAV runat="server" id="dnnNAV"
    ProviderName="DNNMenuNavigationProvider"
    IndicateChildren="false"
    ControlOrientation="Horizontal" />
    </div>
  9. Then add the code to create the User and Login/Logout links :

    <div id="login_style" class="user">
    <dnn:USER runat="server" id="dnnUSER" CssClass="user" />
    &nbsp;&nbsp;|&nbsp;&nbsp;
    <dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="user" />
    </div>

  10. Lastly, we create the content panes using an HTML table, but enclose it in a DIV:

    <div class="content">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="top" id="LeftPane" class="LeftPane"
    runat="server" visible="false">
    </td>
    <td valign="top" id="ContentPane" class="ContentPane"
    runat="server" visible="false">
    </td>
    <td valign="top" id="RightPane" class="RightPane"
    runat="server" visible="false">
    </td>
    </tr>
    </table>
    </div>

  11. The entire file should now look like this:

    <%@ Control language="vb" AutoEventWireup="false" Explicit="True"
    Inherits="DotNetNuke.UI.Skins.Skin" %>

    <%@ Register TagPrefix="dnn" TagName="NAV"
    Src="~/Admin/Skins/Nav.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="USER"
    Src="~/Admin/Skins/User.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="LOGIN"
    Src="~/Admin/Skins/Login.ascx" %>
    <div >
    <dnn:NAV runat="server" id="dnnNAV"
    ProviderName="DNNMenuNavigationProvider"
    IndicateChildren="false"
    ControlOrientation="Horizontal" />
    </div>

    <div id="login_style" class="user">
    <dnn:USER runat="server" id="dnnUSER" CssClass="user" />
    &nbsp;&nbsp;|&nbsp;&nbsp;
    <dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="user" />
    </div>

    <div class="content">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td valign="top" id="LeftPane" class="LeftPane"
    runat="server" visible="false">
    </td>
    <td valign="top" id="ContentPane" class="ContentPane"
    runat="server" visible="false">
    </td>
    <td valign="top" id="RightPane" class="RightPane"
    runat="server" visible="false">
    </td>
    </tr>
    </table>
    </div>

  12. Select Save WebUserControl1.ascx As… from the File menu.
  13. Browse to the SampleASCXSkin folder and save the file as SampleASCXSkin.ascx.
  14. To create the CSS file select New File… from the File menu.
  15. In the New File dialog, select Style Sheet and click on Open.
  16. Replace the contents of the file with:

    /* General Styles */
    body {background: #CCCCCC; height:
    100%; margin: 0px; padding: 0px;}
    a, a:link, a:visited, a:active {color: #800000; text-decoration:
    none; font-family: Verdana, Arial, Helvetica, sans-serif; fontweight:
    normal;}
    a:hover {color: #C00; text-decoration:
    none;}

    /* Styles for Controlling the Layout */
    .template_style {width: 960px; margin: auto;}
    .content {background: white; border-left:
    solid 1px #EAEAEA; border-right: solid 1px #EAEAEA; padding: 10px;
    margin: 0 5px 0 5px;}

    /* Control Styles */
    #login_style {float: right; padding: 10px 17px
    0px 10px;}

    /* Pane Styles */
    .ContentPane {padding: 0px;margin: 0px;}
    .MiddlePane {padding: 0px 0px 0px 10px; width:
    10em; margin: 0px;}
    .LeftPane {padding: 0px 10px 0px 0px; width:
    10em; margin: 0px;}
    .RightPane {padding: 0px 0px 0px 10px; width:
    10em;margin: 0px;}

    /* User Styles */
    .user, a.user:link, a.user:active, a.user:visited {color: #800000;
    font-size: 12px;}
    a.user:hover {color: #C00;}

  17. With these styles we are positioning the Login link on the right side, defining the Panes and setting the color and size of the User link.
  18. Select Save StyleSheet1.css As… from the File menu.
  19. Browse to the SampleASCXSkin folder and save the file as skin.css.
  20. One more useful thing to do is create a preview image of the skin. This is a little hard to do as we haven't even created the skin yet, but you can use a simple drawing program (such as MS Paint) to create an image of what you plan the skin to look like. Something like this:

    DotNetNuke 5.4 Cookbook

  21. Save the image file as SampleASCXSkin.jpg.
  22. To see how the new skin will look on our site, start by logging in as the SuperUser.
  23. Look under the Admin menu and select Skins.
  24. The new SampleASCXSkin will now appear:

    DotNetNuke 5.4 Cookbook

  25. To see how the skin looks, click on the Preview link.

  26. It's not much but it correctly includes the Skin Objects and a very simple layout.

Summary

In this article, we took a look at the following recipes:

  • Downloading and installing a skin
  • Creating a simple HTML skin
  • Creating a simple ASCX skin

In the next article, Deploying and Exploring Skin Objects using DotNetNuke, we will take a look at some of the recipes on Skin Objects in DotNetNuke.

DotNetNuke 5.4 Cookbook Over 100 recipes for installing, configuring, and customizing your own website with the DotNetNuke CMS
Published: September 2010
eBook Price: ₨831.00
Book Price: ₨1,386.00
See more
Select your format and quantity:

About the Author :


John K Murphy

John K Murphy is a software industry veteran with more than 25 years experience as a programmer and database administrator. A graduate of the University of West Virginia he began writing computer games in the 1980's before pursuing a career as a  computer consultant. Over the years, John has enjoyed developing software in most major programming languages while striving to keep current with new technologies.

In his spare time, John enjoys scuba diving, skydiving and piloting small planes. He lives with his wife and two children in Pittsburgh, Pennsylvania.

Books From Packt


Silverlight 4 User Interface Cookbook
Silverlight 4 User Interface Cookbook

Microsoft Dynamics GP 2010 Cookbook
Microsoft Dynamics GP 2010 Cookbook

Microsoft Windows Workflow Foundation 4.0 Cookbook
Microsoft Windows Workflow Foundation 4.0 Cookbook

Building Websites with DotNetNuke 5
Building Websites with DotNetNuke 5

DotNetNuke Skinning Tutorial
DotNetNuke Skinning Tutorial

MySQL Admin Cookbook
MySQL Admin Cookbook

NHibernate 3.0 Cookbook
NHibernate 3.0 Cookbook

Oracle Database 11g – Underground Advice for Database Administrators
YUI 2.8: Learning the Library


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software