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
0
