Create DotNetNuke Skin
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!