Shai Raiten's Blog : DotNetNuke

Create DotNetNuke Container

Shai Raiten — Sat, 30 Aug 2008 21:29:02 GMT

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!

Create DotNetNuke Skin

Shai Raiten — Sat, 30 Aug 2008 21:28:07 GMT

Create DotNetNuke Skin

Skins and modules are the reasons that DotNetNuke became so popular. They just get you involved. From the early versions you could skin it working with one HTML and one CSS file when for the most of the modern web applications out there, you have to deal with a bunch of files (sometimes and images!) to make them look the way you want.

With this tutorial I'll try to make you understand the basics about DotNetNuke skins and hopefully you'll learn how to create your own first skin from a static HTML page.

1) Skin folders

On your desktop, or wherever you want, create a new folder with the name "MyFirstSkin", that's the name of the skin we'll develop. In that folder create another one with the name "skins"

2) The skin.ascx from a static HTML page

First thing we have to do is to decide the way we want our pages to look like. Create a new HTML page so we can define what goes where.
As you can see all I did was to define the areas where later we'll put the dynamic content. We save this file as "skin.ascx" in the "MyFirstSkin/skins/" folder.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <style>
            body{background:#555;}
            .skinwrapper{border:5px #333 solid;background:#FFF;padding:1px;}
            .skinheader{padding:10px;background:#EEE;}
            .skinmenu{padding:10px;background:#C00;}
            .skinuser{padding:5px;background:#CCC;text-align:right;}
            .skincontentstable{width:100%;}
            .leftpane{background:#EEE;width:200px;}
            .contentpane{background:#FFF;}
            .rightpane{background:#EEE;width:200px;}
            .skinfooter{padding:5px;background:#CCC;text-align:center;}
        </style>
    </head>
    <body>
        <div class="skinwrapper">
            <div class="skinheader">Logo</div>
            <div class="skinmenu">Menu</div>
            <div class="skinuser">Register - Login</div>
            <table border="0" cellpadding="10" cellspacing="0" class="skincontentstable" summary="Design Table">
                <tr valign="top">
                    <td class="leftpane">Left Pane</td>
                    <td class="contentpane">Content Pane</td>
                    <td class="rightpane">Right Pane</td>
                </tr>
            </table>
            <div class="skinfooter">Copyright</div>
        </div>
    </body>
    </html>

3) The skin.css and our skin.ascx page clean up

For the skin we need only everything in the "body" tag and the CSS styles we have included in the head area. So we "Cut" the styles inside the "style" tag and we "Paste" them in a new CSS file with the name "skin.css". We save this file in the same "MyFirstSkin/skins/" folder. Now we can remove the unneeded tags from the skin.ascx page... we keep only everything in the "body" tag.

In our skin.ascx file:

<div class="skinwrapper">
    <div class="skinheader">Logo</div>
    <div class="skinmenu">Menu</div>
    <div class="skinuser">Register - Login</div>
    <table border="0" cellpadding="10" cellspacing="0" class="skincontentstable" summary="Design Table">
        <tr valign="top">
            <td class="leftpane">Left Pane</td>
            <td class="contentpane">Content Pane</td>
            <td class="rightpane">Right Pane</td>
        </tr>
    </table>
    <div class="skinfooter">Copyright</div>
</div>

In our skin.css file:

body{background:#555;}
.skinwrapper{border:5px #333 solid;background:#FFF;padding:1px;}
.skinheader{padding:10px;background:#EEE;}
.skinmenu{padding:10px;background:#C00;}
.skinuser{padding:5px;background:#CCC;text-align:right;}
.skincontentstable{width:100%;}
.leftpane{background:#EEE;width:200px;}
.contentpane{background:#FFF;}
.rightpane{background:#EEE;width:200px;}
.skinfooter{padding:5px;background:#CCC;text-align:center;}

4) DotNetNuke skin objects and the dreamweaver extension

Skin objects are special tags that DotNetNuke recognizes as dynamic content placeholders. So when we write this tag: <dnn:LOGO runat="server" id="dnnLOGO" /> we tell DotNetNuke to put our portal's logo in that place. Dynamic means that we'll be able to change the logo image from our portal's "Site Settings" without touch the code again. Let's put the skin objects in the areas we have specified, using the dreamweaver extension.

<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
    <%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="SOLPARTMENU" Src="~/Admin/Skins/SolPartMenu.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
    <%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>

    <div class="skinwrapper">
        <div class="skinheader"><dnn:LOGO runat="server" id="dnnLOGO" /></div>
        <div class="skinmenu">
            <dnn:SOLPARTMENU
            runat="server"
            id="dnnSOLPARTMENU"
            usearrows="true"
            userootbreadcrumbarrow="false"
            usesubmenubreadcrumbarrow="false"
            rootmenuitemlefthtml="<span>"
            rootmenuitemrighthtml="</span>"
            rootmenuitemcssclass="rootmenuitem"
            rootmenuitemselectedcssclass="rootmenuitemselected"
            rootmenuitembreadcrumbcssclass="rootmenuitembreadcrumb"
            submenucssclass="submenu"
            submenuitemselectedcssclass="submenuitemselected"
            submenuitembreadcrumbcssclass="submenuitembreadcrumb"
            CSSNodeSelectedRoot="rootmenuitembreadcrumb"
            CSSNodeSelectedSub="submenuitembreadcrumb"
            delaysubmenuload="true"
            />
        </div>
        <div class="skinuser">
            <dnn:USER runat="server" id="dnnUSER" CssClass="skinuser" />
            -
            <dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="skinuser" />
        </div>
        <table border="0" cellpadding="0" cellspacing="0" class="skincontentstable" summary="Design Table">
            <tr valign="top">
                <td id="LeftPane" runat="server" width="200" nowrap class="leftpane" visible="false"></td>
                <td id="ContentPane" runat="server" class="contentpane"></td>
                <td id="RightPane" runat="server" width="200" nowrap class="rightpane" visible="false"></td>
            </tr>
        </table>
        <div class="skinfooter"><dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" CssClass="skinfooter" /></div>
    </div>

5. 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/skins/" folder and compress the skin.ascx and the skin.css 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!

Skins and Containers in DotNetNuke

Shai Raiten — Sat, 30 Aug 2008 21:27:36 GMT

Skins and Containers in DotNetNuke

Before starting with DotNetNuke we need to understand DotNetNuke structure.

A skin can be applied at host, portal, page or module level.

For each page within your portal you can set a different skin using the Page Settings.
For each module within a page you can specify a container to surround the module using the Module Settings.

Blue – Skin

Red – Containers

Green – Modules

DotNetNuke

Shai Raiten — Wed, 27 Aug 2008 09:29:48 GMT

DotNetNuke

Open Source Framework ideal for creating Enterprise Web Applications

I'm working on a project with friends and for this project we needed a Free Web Application Framework that will support Forums, Blogs, Shopping Cart, BackOffice and the most important is a Framework that can be modified easily and quickly.

DotNetNuke is one of the Top Web Application Framework on the market and it's Free.

If you are in the Web Business I recommend reading about DotNetNuke!

Web Application Framework

DotNetNuke is an open-source Web Application Framework ideal for creating and deploying projects such as commercial websites, corporate intranets and extranets, online publishing portals, and custom vertical applications.

DotNetNuke is provided as open-source software, licensed under a BSD agreement. In general, this license grants the general public permission to obtain the software free-of-charge. It also allows individuals to do whatever they wish with the application framework, both commercially and non-commercially, with the simple requirement of giving credit back to the DotNetNuke project community.

DotNetNuke is built on a Microsoft ASP.NET (VB.NET) platform, and is easily installed and hosted. With a growing community of over 440,000 users, and a dedicated base of programming professionals, support for DotNetNuke is always close at hand.

Here you can watch a Online Demo