Published on: 14 May, 2016

How to create a simple skin in DNN?

Posted by andy | 2344 views 2 likes 0 favourites 2 comments
Tumblr Digg Google Plus

So how does the skin template works in DNN? DNN supports multiple template or skins. Each individual page can have their own skin template or set pre-default skin. The DNN skins are located under portals folder. There are two folders name available, one is _default folder name and the other one is 0 folder name. The _default folder represent the shared folders that can be accessed by all portals. While the 0 portal name is exclusively can be used by a specific portal only which is in this case is the portal that has a portal ID equals to 0.

The following screenshot of the DNN structure folder below is viewed using Visual Studio.

DNN Folder structure

We start the example of skinning by creating a really simple template in html. We will have the following example template structures consist of a navigation, content body and a footer.

Simple skin html template in DNN

This will be the sample of the html code.

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
	<style>
		html, body,form{
			margin:0;
			padding:0;
			height:100%;
			font-family:Arial;
		}
		
		#container{
			margin:0 auto;
			text-align:left;
			min-height: 100%;
			height: auto !important;
			height: 100%;
			margin-bottom:-50px;
		}
		
		nav{
			background:#000;
			height:50px;
			line-height:50px;
			margin-bottom:10px;
		}
		
		nav ul, nav ul li{
			margin:0;
			padding:0;
			list-style:none;
		}
		
		nav ul li{
			float:left;
			margin:0 10px;
		}
		
		nav ul li a{
			color:#fff;
			text-decoration:none;
			text-transform:uppercase;
		}
		
		#left-column{
			float:left;
			width:23%;
			margin-left:2%;
		}
		
		#right-column{
			float:right;
			width:70%;
			margin-right:2%;
		}
		
		.clear-footer{
			height:50px;
			clear:both;
		}
		
		footer{
			height:50px;
			line-height:50px;
			background:#000;
			color:#fff;
			text-align:center;
		}
	</style>
	<div id="container">
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Products</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</nav>
		<div id="body-content">
			<div id="left-column">
				left content goes here...
			</div>
			<div id="right-column">
				right content goes here...
			</div>
		</div>
		<div class="clear-footer"></div>
	</div>
	<footer>
		Copyright mysite
	</footer>
</body>
</html>

We create the simple skin template in the Portal 0 folder. This is the correct place to create your first skin DNN. If have to share your skin for multiple websites, you can place the skin template into the _default folder instead. See the structure of folder I just created below. It is named ByTutorial_SkinTemplate.

Create skin template in 0 folder

To help you save time, we can just copy the sample skin template from the _default folder. In this example, we copy the template name from Gravity folder. What we need are the skin.css, 2-col.ascx, simple folder which is the contains navigation script and image preview for 2-col.jpg, this is optional. If you do not want to offer any preview image, you can omit this one.

Copy skin gravity skin template in DNN

Let's open the 2-col.ascx file and modify the html according to our skin. One of the most important thing you need to understand is, the DNN skin always required a server tag named ContentPane and if you do not have this, it will result an error when you try to load this screen. Basically you need this code sitting somewhere in your skin template. The ContentPane text is not case sensitive so it can be lowercase if you want.

<div id="ContentPane" runat="server"></div>

Here is the new template based on the html skin template we create. We remove all html tags that are not used based on our skin template.

<%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LINKTOMOBILE" Src="~/Admin/Skins/LinkToMobileSite.ascx" %>
<%@ Register TagPrefix="dnn" TagName="MENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>
<div id="container">
	<dnn:MENU MenuStyle="Simple" runat="server"></dnn:MENU>
	<div id="body-content">
		<div id="left-column">
			<div id="leftpane" runat="server"></div>
		</div>
		<div id="right-column">
			<div id="contentpane" runat="server"></div>
		</div>
	</div>
	<div class="clear-footer"></div>
</div>
<footer>
	<dnn:COPYRIGHT ID="dnnCopyright" runat="server" />
</footer>

In order for DNN to understand where to place the module you will need to create a html tag as server control. Usually it is a div tag, but it is not limited to this, it can be td row or span if you prefer. For example, we have two columns in our skin template. One is for the left content and the other one is for the right content. As we place contentpane in the right content, we need another server control to be placed in the left content. Therefore in this case we create the server pane named leftpane. The DNN will now recognize there are two panes available for the system to insert the module. See below image on how DNN detects the panes available to use.

Module pane selector in DNN

The next part is to modify the navigation template file, let's open the SimpleTokens.txt file. We need to match it accordingly to our html navigation. You can leave the script for the navigation as it is. So the only changes are the couple top lines code.

<nav>
<ul>
[*>NODE]
</ul>

The last step is to copy our style into the skin.css file. Simple open the skin.css file and copy and paste the style from our html. Just to let you know by default each template will use the style called skin.css, so this is a required file.

Once everything has already been completed, we can create a simple page and start set the page use our first skin template. The following is the result of the skin template we just create.

First skin template in DNN

If you see above image, it seems that our style we create in html doesn't look the same with the result. This is because it was overwritten by default.css loaded by DNN. What you need to do is to overwrite the style again. Hope this quick tutorial helps. If you have any question about this, feel free to post your comment below.

Comments
azz
Commented on: 06 Feb, 2017 01:22:24 PM
thanks for the tutorial I tried it and succeeded, but I want to use "Mega2DNN" menu style in this skin can you tell me how to alter the "simple" menu
andy
Commented on: 06 Feb, 2017 02:13:07 PM
What you can do is to look for menu word in the skin file and remove that coding and open any default skin that use Mega2DNN menu and replace it. Make sure you include any part of Mega2DNN required files at the top of the code. It should be included I believe by default but just double check it.
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 22 May, 2016
If you want to use Gmail SMTP in your DNN website, this can be easily done by specifying the correct port 587 in the SMTP settings. Unfortunately, there is no port number field supplied in the SMTP settings form. So in order to include the port number, you just need to add the smtp.gmail.com:587 in the SMTP settings.
Published on: 21 May, 2016
There are two options to setup the skin template into the DNN website, the first option is to globally set all pages using the default skin template and the second option is to set the skin template manually to each page. Usually when you create skin templates in DNN, there are at least 2 skins will be created. One would be the home page skin and the rest is the generic page skin.