DNN CONTAINERS
TRAINING
Edgar Monarrez
DNN MODULE CONTAINER
Create a Container using HTML
 Assign [TOKEN]’s
 Define ContentPane
 Package Container & Upload

GOOD CANDIDATES TO CREATE
CONTAINERS
HTML
 DNN Administration
 Web Design

WHAT IS A MODULE CONTAINER?

Skin definitions which can be applied to content
modules. A container is defined in exactly the
same manner as a skin except for the fact that
there are a different set of skin objects
(TOKENS or dynamic functionality) used in
containers.
STEP 1: DESIGN YOUR CONTAINER

Design the layout that you want to create using
HTML

Be creative! There are a lot of examples of sites using
DNN.

http://www.dotnetnuke.com/default.aspx?tabid=541
STEP 1: DESIGN YOUR CONTAINER
HTML CODE
INTERNET BROWSER
STEP 2: ASSIGN TOKENS

Dynamic Content
Add a placeholder to represent some type of
dynamic functionality using a
[TOKEN]
Example:
<div>[ACTIONS][TITLE]</div>
STEP 2: ASSIGN TOKENS
[TOKEN]
STEP 2: ASSIGN TOKENS
[TOKEN]
STEP 2: ASSIGN TOKENS
HTML CODE
INTERNET BROWSER
[TOKEN]
STEP 2: DEFINE A CONTENT PANE
A place where content of the module will be
displayed
 Used to organize the structure of content within
a DNN website

<td id="ContentPane" runat="server"></td>
or
<div id="ContentPane" runat="server“></div>
STEP 2: DEFINE A CONTENT PANE
HTML CODE
INTERNET BROWSER
STEP 3: ADDING A CSS (OPTIONAL)


You can add a css file to control the style of your skin
called container.css
The container.css file must be on the root of the skin
package and you must not include a link to the
container.css file.
DELETE THIS LINE WHEN UPLOADING THE SKIN.
DNN WILL ADD THIS LINE AUTOMATICALLY WHEN YOU UPLOAD THE CONTAINER
<link href=“container.css" rel="stylesheet" type="text/css" />
STEP 4: CONTAINER PACKAGING

A skin package includes all the skin files inside of a
zip file “Container.zip”
html
images
Container.zip
Container.
css
Other html
elements
(optional)
STEP 5:UPLOAD CONTAINER & APPLY TO
A MODULE
Login with a host account
 Go to Admin -> Skins and click on Upload Container
 Upload your zip file
 Apply the container to a module by going to Module
Settings

RESOURCES
DNN Skin Video
http://dnn.utep.edu/Portals/628/viewlets/CreateASk
in/CreateASkin.swf
Learn CSS, HTML
http://www.w3schools.com/
Firebug
https://addons.mozilla.org/enUS/firefox/addon/1843