Create DotNetNuke Container

Create DotNetNuke Container

In Create DotNetNuke Skin we saw how to create DotNetNuke Skin and now we will see how to add new containers

Containers are the part of the skin where we define the way we want the modules we put in our portal to look. Containers can be very simple but they can also be very complicated... it's up to our taste and skills. The example below is a simple container.

Let's create two new files.

Our "MyFirstSkin/containers/common.ascx" file:

 <%@ 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="ACTIONBUTTON1" Src="~/Admin/Containers/ActionButton.ascx" %>    
<%@ Register TagPrefix="dnn" TagName="ACTIONBUTTON2" Src="~/Admin/Containers/ActionButton.ascx" %>    
  
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="ccommon">    
    <tr>    
        <td class="ctitle"><dnn:TITLE runat="server" id="dnnTITLE" /></td>    
    </tr>    
    <tr valign="top">    
        <td runat="server" id="ContentPane" class="ccontent"><dnn:ACTIONS runat="server" id="dnnACTIONS" /></td>    
    </tr>    
    <tr>    
        <td class="actionbuttons">    
                 
            <dnn:ACTIONBUTTON1 runat="server" id="dnnACTIONBUTTON1" CommandName="SyndicateModule.Action" DisplayLink="False" DisplayIcon="True" />    
            <dnn:ACTIONBUTTON2 runat="server" id="dnnACTIONBUTTON2" CommandName="PrintModule.Action" DisplayLink="False" DisplayIcon="True" />    
        </td>    
    </tr>    
</table> 

Our "MyFirstSkin/containers/container.css" file:

.ccommon{margin-bottom:20px;}    
.ccommon .ccontent{padding:10px 0;}    
.ccommon p{margin-top:0;}    
.ccommon .actionbuttons{text-align:right;font-size:1px;line-height:1px;height:1px;padding-right:20px;}    
.actionbuttons img{margin:0 0 10px 0;}  

Ready to upload it?

In order to make our skin available to our portal, we have to upload it using the admin interface (advanced user may also use FTP to upload the skin files).
Let's browse the "MyFirstSkin/containers/" folder and compress the common.ascx and container.css in in a MyFirstSkin.zip file.

It's time to run our browser and type in the address bar our DotNetNuke's portal URL, login and apply the skin!