Categories: CMS & E-CommerceWeb DevelopmentTutorials

DotNetNukeSkinning: Creating Containers

9 min read

Creating our first container

In VWD (Visual Web Developer), from the Solution Explorer window, find the following location and create a new folder called FirstSkin: ~/Portals/_default/Containers/
Add a new item by right-clicking on this new folder. Add a new HTML file and call it Container.htm.
Similarly, add a CSS and an XML file, Container.css and Container.xml respectively.
Clear out all the code in the newly created files that VWD initializes it with.

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

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.

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

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.

Packt