Deploying and Exploring Skin Objects using DotNetNuke

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

DotNetNuke 5.4 Cookbook — Save 50%

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

$26.99    $13.50
by John K Murphy | September 2010 | Cookbooks Open Source

In the previous article, Creating a Simple Skin using DotNetNuke, we took a look at the recipes to create a simple skin

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

  • Deploying your skins and containers
  • Exploring skin objects
  • Creating a simple HTML container
  • Creating a basic ASCX container

Deploying your skins and containers

Like a module, skins must be packaged and deployed to your DNN server. Once deployed, they will appear on the Skins page under the Admin menu for preview and applying to the portal.

In previous article, we saw how to create new skins directly on a test DNN portal. This allows you to edit the files and immediately see the results just by refreshing your browser. But once a skin has been fully developed, this recipe will show you how to package your skin into a portable ZIP file using the package wizard.

Once created, you can install the skin package on the DNN site by logging in as SuperUser then uploading the ZIP file and installing the skin package as an extension. The skin is installed in the \Portals\_default\Skins folder.

As of DNN 5.x, only the SuperUser can deploy skins. This was done as a security precaution as skins can now contain user-written code.

Getting ready

For this recipe you will need skin files to deploy. We will use the skin files from the previous article, from the recipe: Creating a simple ASCX skin.

How to do it...

  1. Begin by logging in as the SuperUser.
  2. Look under the Host menu and select Extensions.
  3. The first step is to look under the installed extensions and find the SampleASCXSkin under the Skins section. If you see it, skip to step 8, otherwise you must create the extension first. Start by selecting Create Extension from the action menu (or click on the link at the bottom of the page).
  4. Choose Skin from Extension Type drop down and fill out the form as shown:

    (Move the mouse over the image to enlarge.)

  5. Click on Next.
  6. Provide the owner information and click on Next.
  7. The SampleASCXSkin skin will now appear in the list of extensions.
  8. Click on the Edit icon next to the name.
  9. Scroll to the bottom and click on the link Create Package.
  10. The Create Package screen will display. Click on Next.
  11. On the next screen you will see the files of the skin. Click on Next.
  12. Next, the manifest is displayed. Click on Next.
  13. The wizard will now generate a file name for the ZIP file using the owner name and the skin name. Click on Next.
  14. The wizard will now complete with a summary page. You will now find a ZIP file in the /Install/Skin folder. Click on Return to close the wizard.
  15. Once the file is packaged in a ZIP file you can upload and install it.

Exploring Skin Objects

In this recipe we will expand the sample ASCX skin and demonstrate additional Skin Objects you can use.

Getting ready

To follow along with this recipe you must have completed the following recipe:

    Creating a simple ASCX skin

Here is a diagram of the new 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 DetailedASCXSkin.
  3. Launch the Development Tool.
  4. Open the SampleASCXSkin.ascx file from the Creating a simple ASCX skin recipe.
  5. Add the following register directive after the existing directives:

    <%@ Register TagPrefix="dnn" TagName="BREADCRUMB"
    Src="~/Admin/Skins/BreadCrumb.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="TEXT"
    Src="~/Admin/Skins/Text.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="LINKS"
    Src="~/Admin/Skins/Links.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="COPYRIGHT"
    Src="~/Admin/Skins/Copyright.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="CURRENTDATE"
    Src="~/Admin/Skins/CurrentDate.ascx" %>

  6. Next, replace the existing Login_Style DIV with a new DIV encompassing both Login and User links:

    <%--By placing the SkinObjects inside a parent DIV they share the
    same style--%>

    <div class="bread_bg">
    <div id="bread_style">
    <dnn:TEXT runat="server" id="dnnTEXT"
    CssClass="breadcrumb_text" Text="You are here"
    ResourceKey="Breadcrumb" />
    &nbsp;<span>
    <dnn:BREADCRUMB runat="server" id="dnnBREADCRUMB"
    CssClass="Breadcrumb"
    RootLevel="0" Separator="&nbsp;>&nbsp;" />
    </span>
    </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>

  7. Lastly, leave the ContentPane DIV as it is and add these new DIVs right below it:

    <div class="bot_bg links">
    <dnn:LINKS runat="server" id="dnnLINKS" CssClass="links"
    Level="Root" Separator="&nbsp;&nbsp;&nbsp;|
    &nbsp;&nbsp;&nbsp;" />
    </div>

    <div class="bot_pad">
    <div id="copy_style" class="footer">
    <dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT"
    Align CssClass="footer" />
    </div>
    <div id="date_style" class="footer">
    <dnn:CURRENTDATE runat="server" id="dnnCURRENTDATE"
    Align CssClass="footer" />
    </div>
    </div>

    Separating the Copyright and Date into separate DIVs allow us to put one in the lower-left corner and one in the lower-right corner of the page.

  8. Select Save SampleASCXSkin.ascx As… from the File menu.
  9. Browse to the DetailedASCXSkin folder and save the file as DetailedASCXSkin.ascx.
  10. These new Skin Objects will need styles. Open the skin.css file from the Creating a simple ASCX skin recipe.
  11. Add the following styles to the bottom of the skin.css file:

    /*breadcrumbs*/
    .Breadcrumb, a.Breadcrumb:link, a.Breadcrumb:active,
    a.Breadcrumb:visited {color: #800000; font-size: 13px;}
    a.Breadcrumb:hover {color: #C00;}
    .bread_bg {background-color: #EAEAEA; fontfamily:
    Verdana, Arial, Helvetica, sans-serif; border-left: solid
    1px #EAEAEA; border-right: solid 1px #EAEAEA; margin: 0 5px 0 5px;
    height: 30px;}
    #bread_style {float: left; padding: 10px 0px
    0px 17px; color: #000000; font-size: 13px;}
    /* for the bottom of the page */
    .bot_bg {background-color: #EAEAEA;
    border-left: solid 1px #EAEAEA;border-right: solid 1px #EAEAEA;
    border-bottom: solid 1px #EAEAEA; padding: 10px; margin: 0 5px 0
    5px;}
    .bot_pad {font-family: Verdana, Arial,
    Helvetica, sans-serif; margin-bottom: 20px; padding: 0 30px 0
    20px;}
    #terms_style {float: left;}
    #copy_style {float: left;}
    #date_style {float: right; padding: 0px 0px 0px
    10px; }
    /*links*/
    .links {text-align: center;}
    .links, a.links:link, a.links:active, a.links:visited {fontweight:
    bold; color: #800000; font-size: 11px;}
    a.links:hover {color: #C00;}
    /* Sets the font size and text color of the footer at the bottom
    of the page */
    .footer, a.footer:link, a.footer:active, a.footer:visited {color:
    #800000; font-size: 12px;}
    a.footer:hover {color: #C00;}

  12. With these styles we are positioning the Breadcrumb links just below the menu on the left. The Login and User links remain on the right side, ContentPane and RightPane stay the same, and the new Links, Copyright, and CurrentDate controls are arranged along the bottom of the page.
  13. Select Save skin.css As… from the File menu.
  14. Browse to the DetailedASCXSkin folder and save the file as skin.css.
  15. To see how the new skin will look on the site, log in as the SuperUser.
  16. Look under the Admin menu and select Skins.
  17. The new DetailedASCXSkin will now appear:

    DotNetNuke 5.4 Cookbook

  18. Click on Preview to see how the skin looks:

    DotNetNuke 5.4 Cookbook

  19. See how the breadcrumbs (You are here:) appear on the left under the menu, user and login are on the right, and links along the bottom and the copyright message and current date appear in the bottom corners.

There's more...

If you're curious to see which Skin Objects are available on your DNN site, you can log in as the SuperUser and select Extensions under the Host menu. This will list all the skin objects and their version number.

Some skin objects may not be installed by default and will not appear in this list until installed.

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

Read more about this book

Creating a simple HTML container

While skins set the styling of the entire page, DNN also allows skinning at the module container level. You can think of a container as the area around the module content. It includes the title of the module as well as the hover menu and the action links that usually appear beneath the content.

In this recipe we will create a simple container using HTML. We will also introduce some of the Skin Objects available to containers.

Containers have their own tokens that are different than those used in skins. This recipe will use the following tokens:

Token

Description

[ACTIONS]

Creates the module hover menu.

[TITLE]

The title of the module.

[VISIBILITY]

Provides the ability to expand or collapse the container.

[PRINTMODULE]

Links for the Admin that map to different ModuleActionTypes (Print Module in this example).

Here is a diagram of the container we will create:

DotNetNuke 5.4 Cookbook

How to do it...

  1. Start by locating the default container folder within your test DNN portal (\Portals\_default\Containers).
  2. Next, create a new folder to hold the container files. Call this folder HTMLContainer.
  3. Launch the Development Tool.
  4. From the File menu, select New File….
  5. At 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 links to the CSS files we need.

    <!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>
    <title>Untitled Page</title>

    <link id="container_css" href="container.css" type="text/css"
    rel="stylesheet" />
    </head>
    <body>
    </body>
    </html>

  7. Next, we need to add the HTML table that will control the layout of the container:

    <body>

    <div class="container_bkg">
    <TABLE cellPadding="0" width="100%" border="0">
    <TR>
    <TD width="25"></TD>
    <TD align="center" >[ACTIONS]</TD>
    <TD width="100%" align="center" >[TITLE]</TD>
    <TD align="center" >[VISIBILITY]</TD>
    <TD width="25"></TD>
    </TR>
    <TR>
    <TD width="25">&nbsp;</TD>
    <TD id="ContentPane" colspan="3" align="center"
    runat="server" >
    </TD>
    <TD width="25">&nbsp;</TD>
    </TR>
    <TR>
    <TD width="25"></TD>
    <TD colspan="3" align="right">[PRINTMODULE]</TD>
    <TD width="25"></TD>
    </TR>
    </TABLE>
    </div>

    </body>

  8. The entire file should now 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>
    <title>Untitled Page</title>
    <link id="container_css" href="container.css"
    type="text/ css" rel="stylesheet" />
    </head>
    <body>

    <div class="container_bkg">
    <TABLE cellPadding="0" width="100%" border="0">
    <TR>
    <TD width="25"></TD>
    <TD align="center" >[ACTIONS]</TD>
    <TD width="100%" align="center" >[TITLE]</TD>
    <TD align="center" >[VISIBILITY]</TD>
    <TD width="25"></TD>
    </TR>
    <TR>
    <TD width="25">&nbsp;</TD>
    <TD id="ContentPane" colspan="3" align="center"
    runat="server" >
    </TD>
    <TD width="25">&nbsp;</TD>
    </TR>
    <TR>
    <TD width="25"></TD>
    <TD colspan="3" align="right">[PRINTMODULE]</TD>
    <TD width="25"></TD>
    </TR>
    </TABLE>
    </div>

    </body>
    </html>

  9. Select Save HTMLPage1.htm As… from the File menu.
  10. Browse to the HTMLContainer folder and save the file as HTMLContainer.htm.
  11. These new Skin Objects will need styles. From the File menu, select New File….
  12. In the New File dialog, select Style Sheet and click on Open.
  13. Replace the contents of the file with:

    /* General Styles */
    .TitleLabel{color:GrayText;font-size: 15px;}
    .container_bkg {background-color:#DAE7F2;border:solid
    1px #4F839F;}

  14. Select Save StyleSheet1.css As… from the File menu.
  15. Browse to the HTMLContainer and save the file as container.css.
  16. You can also make a preview image of the new container, something like:

    DotNetNuke 5.4 Cookbook

  17. Save the image file as HTMLContainer.jpg.
  18. To see how the new container will look on our site, start by logging in as the SuperUser.
  19. Look under the Admin menu and select Skins.
  20. Select the HTMLContainer from the Containers: drop-down list.
  21. Click on the Parse Skin Package link.
  22. The new HTMLContainer will now appear:

    DotNetNuke 5.4 Cookbook

  23. To see how the container looks, click on the Preview link.

    DotNetNuke 5.4 Cookbook

  24. It's a simple container but looking at a module like Sponsors, you can see the hover menu on the left and the module title centered over the container with a light blue background.

Creating a basic ASCX container

Just as skins can be created using HTML or ASCX, containers too can be developed either way. In this recipe we will see a simple ASCX container.

Here is a diagram of the container we will create:

DotNetNuke 5.4 Cookbook

How to do it...

  1. Start by locating the default container folder within your test DNN portal (\Portals\_default\Containers).
  2. Next, create a new folder to hold the container files. Call this folder ASCXContainer.
  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"
    CodeBehind="~/admin/Containers/container.vb"
    AutoEventWireup="false" Explicit="True"
    Inherits="DotNetNuke.UI.Containers.Container" %>

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

    <%@ Register TagPrefix="dnn" TagName="ACTIONS"
    Src="~/Admin/Containers/SolPartActions.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="TITLE"
    Src="~/Admin/Containers/Title.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="VISIBILITY"
    Src="~/Admin/Containers/Visibility.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="PRINTMODULE"
    Src="~/Admin/Containers/PrintModule.ascx" %>

  8. To create the structure of the container we will use an HTML table to lay out the Skin Objects:

    <div class="container_bkg">
    <TABLE cellPadding="0" width="100%" border="0">
    <TR>
    <TD width="25"></TD>
    <TD align="center" ><dnn:ACTIONS runat="server"
    id="dnnACTIONS" />
    </TD>
    <TD width="100%" align="center"><dnn:TITLE runat="server"
    id="dnnTITLE" />
    </TD>
    <TD align="center" ><dnn:VISIBILITY runat="server"
    id="dnnVISIBILITY" />
    </TD>
    <TD width="25"></TD>
    </TR>
    <TR>
    <TD width="25">&nbsp;</TD>
    <TD id="ContentPane" colspan="3" align="center"
    runat="server" >
    </TD>
    <TD width="25">&nbsp;</TD>
    </TR>
    <TR>
    <TD width="25"></TD>
    <TD colspan="3" align="right">
    <dnn:PRINTMODULE runat="server" id="dnnPRINTMODULE" />
    </TD>
    <TD width="25"></TD>
    </TR>
    </TABLE>
    </div>

  9. The entire file should now look like this:

    <%@ Control language="vb"
    CodeBehind="~/admin/Containers/container.vb"
    AutoEventWireup="false" Explicit="True"
    Inherits="DotNetNuke.UI.Containers.Container" %>

    <%@ Register TagPrefix="dnn" TagName="ACTIONS"
    Src="~/Admin/Containers/SolPartActions.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="TITLE"
    Src="~/Admin/Containers/Title.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="VISIBILITY"
    Src="~/Admin/Containers/Visibility.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="PRINTMODULE"
    Src="~/Admin/Containers/PrintModule.ascx" %>

    <div class="container_bkg">
    <TABLE cellPadding="0" width="100%" border="0">
    <TR>
    <TD width="25"></TD>
    <TD align="center" ><dnn:ACTIONS runat="server"
    id="dnnACTIONS" /></TD>
    <TD width="100%" align="center"><dnn:TITLE runat="server"
    id="dnnTITLE" />
    </TD>
    <TD align="center" ><dnn:VISIBILITY runat="server"
    id="dnnVISIBILITY" />
    </TD>
    <TD width="25"></TD>
    </TR>
    <TR>
    <TD width="25">&nbsp;</TD>
    <TD id="ContentPane" colspan="3" align="center"
    runat="server" >
    </TD>
    <TD width="25">&nbsp;</TD>
    </TR>
    <TR>
    <TD width="25"></TD>
    <TD colspan="3" align="right">
    <dnn:PRINTMODULE runat="server" id="dnnPRINTMODULE" />
    </TD>
    <TD width="25"></TD>
    </TR>
    </TABLE>
    </div>

  10. Select Save WebUserControl1.ascx As… from the File menu.
  11. Browse to the ASCXContainer folder and save the file as ASCXContainer.ascx.
  12. Next we create the CSS file by selecting New File… from the File menu.
  13. In the New File dialog, select Style Sheet and click on Open.
  14. Replace the contents of the file with:

    /* General Styles */
    .TitleLabel{color:GrayText;font-size: 15px;}
    .container_bkg {background-color:#DAE7F2;border:solid 1px
    #4F839F;}

  15. Select Save StyleSheet1.css As… from the File menu.
  16. Browse to the ASCXContainer folder and save the file as container.css.
  17. You can also make a preview image of the new container, something like:

    DotNetNuke 5.4 Cookbook

  18. Save the image file as ASCXContainer.jpg.
  19. To see how the new container will look on our site, start by logging in as the SuperUser.
  20. Look under the Admin menu and select Skins.
  21. Select the ASCXContainer from the Containers: drop-down list.
  22. The new ASCXContainer will now appear:

    DotNetNuke 5.4 Cookbook

  23. To see how the container looks, click on the Preview link.

    DotNetNuke 5.4 Cookbook

  24. It's a simple container but looking at a module like Sponsors, you can see the hover menu on the left and the module title centered over the container with a light blue background.

Summary

In this article, we implemented the following recipes;

  • Deploying your skins and containers
  • Exploring skin objects
  • Creating a simple HTML container
  • Creating a basic ASCX container

In the next article, Creating and Styling Container Images using DotNetNuke, we will create and style container images 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: $26.99
Book Price: $44.99
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


Your rating: None Average: 5 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
u
9
j
r
B
t
Enter the code without spaces and pay attention to upper/lower case.
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