DotNetNukeSkinning: Creating Containers

Exclusive offer: get 50% off this eBook here
DotNetNuke Skinning Tutorial

DotNetNuke Skinning Tutorial — Save 50%

A simple, clear, step-by-tutorial to creating DotNetNuke skins to put you in control of the look and feel of your DotNetNuke website

$20.99    $10.50
by Darren Neese | July 2009 | Content Management

In this article by Darren Neese, we'll be covering the other ten percent of what you need to know to get the job done, and we'll step through the process of creating the containers, one step at a time. Most importantly, we'll be getting rid of the default blue container.

DotNetNukeSkinning: Creating Containers

Creating our first container

  1. In VWD (Visual Web Developer), from the Solution Explorer window, find the following location and create a new folder called FirstSkin: ~/Portals/_default/Containers/

    DotNetNukeSkinning: Creating Containers

  2. Add a new item by right-clicking on this new folder. Add a new HTML file and call it Container.htm.

    DotNetNukeSkinning: Creating Containers

    DotNetNukeSkinning: Creating Containers

  3. Similarly, add a CSS and an XML file, Container.css and Container.xml respectively.
  4. Clear out all the code in the newly created files that VWD initializes it with.

    DotNetNukeSkinning: Creating Containers

DNN tokens for containers

These tokens, however, have applied mostly to creating skins, not containers. Containers have their own set of tokens to use here. The following is a listing of them. We'll be working with them throughout the rest of this article.

  • Actions: This is the menu that will appear when you hover over the triangle. It is traditionally placed to the left of the icon and title of the module.
  • Title: As you can imagine, this is the title of the module displayed in the container. This is usually placed at the top.
  • Icon: Most of the modules don't have an icon, but many of the administrative pages in DotNetNuke have icons assigned to them. You can always assign icons to your modules, but none of them are set by default.

    DotNetNukeSkinning: Creating Containers

  • Visibility: This skin object is traditionally displayed as a plus or a minus sign inside a small square. It acts as a toggle to show or hide/collapse or expand the content of the module.
  • Content Pane: Similar to when we created our skin, this is where the content goes. The difference here is that we have only one content pane. It is required in order to make the container work.

    DotNetNukeSkinning: Creating Containers

  • LINKACTIONS: This isn't used very often in containers. It is a listing of links that gives you access to the same things contained in the ACTIONS skin object.
  • PRINTMODULE: This is the small printer icon you see in the preceding screenshot. When you click on it, it allows you to print the contents of the module.
  • ACTIONBUTTON: This skin object allows you to display items as links or image links to commonly used items found in the actions menu.

    DotNetNukeSkinning: Creating Containers

The last item on that list, the ActionButton, is different from the others in that we can have several uses of it in different ways. When used as a token, you would place them in your container HTM file as [ACTIONBUTTON:1], [ACTIONBUTTON:2], [ACTIONBUTTON:3], and so on. As you can imagine, we would define what each of these action buttons refer to. We do this in the XML file with an attribute called CommandName. For example, the following is a code snippet of what you could have to add as an action button:


<Objects>
<Object>
<Token>[ACTIONBUTTON:1]</Token>
<Settings>
<Setting>
<Name>CommandName</Name>
<Value>AddContent.Action</Value>
</Setting>
<Setting>
<Name>DisplayIcon</Name>
<Value>True</Value>
</Setting>
<Setting>
<Name>DisplayLink</Name>
<Value>True</Value>
</Setting>
</Settings>
</Object>

Looking at the CommandName attribute, we can have several values which will determine which of the action buttons will be inserted into our container. The following is a listing:

  • AddContent.Action: This typically allows you to add content, or in this case of the Text/HTML module, edit the content of the module.
  • SyndicateModule.Action: This is an XML feed button, if it is supported by the module.
  • PrintModule.Action: This is the printer icon allowing the users to print the content of the module. Yes, this is the second way of adding it as we already have the PRINTMODULE token.
  • ModuleSettings.Action: This is a button/link which takes you to the settings of the module.
  • ModuleHelp.Action—This is a help question mark icon/link that we've seen in the preceding screenshots.

Adding to the container

Now that we know what can be added, let's add them to our new container. We'll start off with the HTM file and then move on to the CSS file.

In our HTM file, add the following code. This will utilize all of the container tokens with the exception of the action buttons, which we'll add soon.

<div style="background-color:White;">
ACTIONS[ACTIONS]
<hr />
TITLE[TITLE]
<hr />
ICON[ICON]
<hr />
VISIBILITY[VISIBILITY]
<hr />
CONTENTPANE[CONTENTPANE]
<hr />
LINKACTIONS[LINKACTIONS]
<hr />
PRINTMODULE[PRINTMODULE]
</div>

Go to the skin admin page (Admin | Skins on the menu). Now that we have a container in the folder called FirstSkin, we'll now get a little added benefit: When you select FirstSkin as the skin to deal with, the container will be selected as well, so you can work with them as a unit or as a Skin Package.

DotNetNukeSkinning: Creating Containers

DotNetNukeSkinning: Creating Containers

Go ahead, parse the skin package and apply our FirstSkin container. Go to the Home page.

DotNetNukeSkinning: Creating Containers

It may not be pretty, but pretty is not what we were looking for. This container, as it sits, gives us a better illustration of how each token is displayed with a convenient label beside each.

There are a few things to point out here, besides we'll be taking out our handy labels and putting in some structure. Our module has no icon, so we won't see one here. If you go to the administrative pages, you will see the icon. The LINKACTIONS is a skin object that you'll use if you don't want to use the action menu ([ACTIONS]).

Table Structure

The structure of our container will be quite similar to how we laid out our skin. Let's start off with a basic table layout. We'll have a table with three rows. The first row will be for the header area which will contain things like the action menu, the title, icon, and so forth. The second row will be for the content. The third row will be for the footer items, like the printer and edit icon/links. Both the header and footer rows will have nested tables inside to have independent positioning within the cells. The markup which defines these three rows has been highlighted:

<table border="0"
cellpadding="0"
cellspacing="0"
class="ContainerMainTable">
<tr>
<td style="padding:5px;">
<table border="0"
cellpadding="0"
cellspacing="0"
class="ContainerHeader">
<tr>
<td style="width:5px;">[ACTIONS]</td>
<td style="width:5px;">[ICON]</td>
<td align="left">[TITLE]</td>
<td style="width:5px;padding-right:5px;"
valign="top">[VISIBILITY]</td>
<td style="width:5px;">[ACTIONBUTTON:4]</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="ContainerContent">
[CONTENTPANE]
</td>
</tr>
<tr>
<td style="padding:5px;">
<table border="0"
cellpadding="0"
cellspacing="0"
class="ContainerFooter">
<tr>
<td>[ACTIONBUTTON:1]</td>
<td>[ACTIONBUTTON:2]</td>
<td></td>
<td>[ACTIONBUTTON:3]</td>
<td style="width:10px;">[PRINTMODULE]</td>
</tr>
</table>
</td>
</tr>
</table>

Making necessary XML additions

The action buttons we used will not work unless we add items to our XML file. For each of our action buttons, we'll add a token element, then a few setting elements for each. There are three specific settings we'll set up for each: CommandName, DisplayIcon, and DisplayLink. See the following code:

<Objects>
<Object>
<Token>[ACTIONBUTTON:1]</Token>
<Settings>
<Setting>
<Name>CommandName</Name>
<Value>AddContent.Action</Value>
</Setting>
<Setting>
<Name>DisplayIcon</Name>
<Value>True</Value>
</Setting>
<Setting>
<Name>DisplayLink</Name>
<Value>True</Value>
</Setting>
</Settings>
</Object>
<Object>
<Token>[ACTIONBUTTON:2]</Token>
<Settings>
<Setting>
<Name>CommandName</Name>
<Value>SyndicateModule.Action</Value>
</Setting>
<Setting>
<Name>DisplayIcon</Name>
<Value>True</Value>
</Setting>
<Setting>
<Name>DisplayLink</Name>
<Value>False</Value>
</Setting>
</Settings>
</Object>
<Object>
<Token>[ACTIONBUTTON:3]</Token>
<Settings>
<Setting>
<Name>CommandName</Name>
<Value>ModuleSettings.Action</Value>
</Setting>
<Setting>
<Name>DisplayIcon</Name>
<Value>True</Value>
</Setting>
<Setting>
<Name>DisplayLink</Name>
<Value>False</Value>
</Setting>
</Settings>
</Object>
<Object>
<Token>[ACTIONBUTTON:4]</Token>
<Settings>
<Setting>
<Name>CommandName</Name>
<Value>ModuleHelp.Action</Value>
</Setting>
<Setting>
<Name>DisplayIcon</Name>
<Value>True</Value>
</Setting>
<Setting>
<Name>DisplayLink</Name>
<Value>False</Value>
</Setting>
</Settings>
</Object>
</Objects>

The CommandName is the attribute that determines which action button is used by the ordinal numeric values. Notice that these four action buttons use different CommandName values as you might expect.

The DisplayIcon attribute is a Boolean (true/false or yes/no) value indicating whether or not the icon is displayed; the DisplayLink is similar and used for setting if the text is used as a link. A good example of both is the EditText ([ACTIONBUTTON:1]) in our Text/HTML module on the Home page. Notice that it has both the icon and the text as links to add/edit the content of the module.

DotNetNuke Skinning Tutorial A simple, clear, step-by-tutorial to creating DotNetNuke skins to put you in control of the look and feel of your DotNetNuke website
Published: May 2008
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

More menu options

Unlike the action buttons, we don't have to have the [ACTIONS] token defined in our XML file, but we'll go ahead and do it for a good reason, which is to set the provider. Setting the provider is a good practice, because from version to version and install to install we won't know what menu will be set by default. So we should explicitly declare it ourselves. This is highlighted in the next code snippet.

Add the token definition to your XML file by adding the following code:

<Object>
<Token>[ACTIONS]</Token>
<Settings>
<Setting>
<Name>ProviderName</Name>
<Value>DNNMenuNavigationProvider</Value>
</Setting>
<Setting>
<Name>ExpandDepth</Name>
<Value>1</Value>
</Setting>
<Setting>
<Name>PopulateNodesFromClient</Name>
<Value>True</Value>
</Setting>
</Settings>
</Object>

The ExpandDepth attribute refers to the menu levels or submenus it will display. The PopulateNodesFromClient is another boolean type of attribute which determines if it will get the menu items when they are needed and populated from the client-side or if they are loaded on the server side, which makes for longer loading times upfront.

Container Token Attributes

Although we won't be adding these in this article to our container, for the sake of reference, here they are. The following is a list of some of the skin objects you use in your containers and their corresponding attributes you may add to the XML file with their respective default values and descriptions.

DotNetNuke Skinning Tutorial A simple, clear, step-by-tutorial to creating DotNetNuke skins to put you in control of the look and feel of your DotNetNuke website
Published: May 2008
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

Token

Attribute

Default Value

 

Description

 

[TITLE]

 

CSSClass

Head

 

The CSS class name used for style

 

[ICON]

 

BorderWidth

 

0

 

The width of the border around the image/icon

 

[VISIBILITY]

 

BorderWidth

 

0

 

The width of the border around the visibility icon

 

 

MinIcon

 

min.gif

 

The image used for collapsing content

 

 

MaxIcon

 

max.gif

 

The image used for expanding content

 

[PRINTMODULE]

 

PrintIcon

 

Print.gif

 

The image used for printing content from the module

Implementing more graphics

Now you know how to create containers. That is, putting in rounded corners and shadows in our containers. This would keep the look of our containers consistent with the look of the rest of the skin. The steps needed to accomplish this are:

  1. Create a PSD file in PhotoShop.
    • Create a rounded rectangle with the appropriate colors. This time the background color will match with the tan color.
    • Create the shadow effect.
  2. Save the sliced images in Photoshop.
  3. Create two rings of table cells around what you have already got, and set their widths and heights to match the respective images.
  4. Insert the images using CSS.

Summary

You now know how to create containers. Your DotNetNuke skinning skills are almost complete.

About the Author :


Darren Neese is a Microsoft specialist who currently works as a senior web developer and project manager. With over ten years of experience in the IT industry, he has worked as a Windows developer, a web developer, a database administrator, a corporate trainer, an academic teacher, as well as being a server and network administrator. He holds several related Microsoft certifications and implements DotNetNuke and other Microsoft-based solutions for clients.

Books From Packt

Plone 3 Theming
Plone 3 Theming

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

Joomla! 1.5 Template Design
Joomla! 1.5 Template Design

Expert Cube Development with Microsoft SQL Server 2008 Analysis Services
Expert Cube Development with Microsoft SQL Server 2008 Analysis Services

SOA Patterns with BizTalk Server 2009
SOA Patterns with BizTalk Server 2009

Small Business Server 2008 – Installation, Migration, and Configuration
Small Business Server 2008 – Installation, Migration, and Configuration

Drools JBoss Rules 5.0 Developer's Guide
Drools JBoss Rules 5.0 Developer's Guide

Flex 3 with Java
Flex 3 with Java

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
q
L
t
1
Y
j
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