Building Your First DotNetNuke Skin: A Beginner's Guide to MVC
Tags: dnn, cms, mvc, skindevelopment
Published: 2023-11-21 08:20:06

Creating a DotNetNuke (DNN) CMS skin for an MVC project can be an exciting venture. In this tutorial, we will guide you through the process step by step, ensuring it's beginner-friendly. By the end, you'll have a solid understanding of how to create a custom skin for your MVC project in DotNetNuke.


**Prerequisites:**

1. DotNetNuke Installation: 
Make sure you have DotNetNuke installed on your server. You can download it from the official [DotNetNuke website](https://dnncommunity.org/).

2. Visual Studio:
Install Visual Studio or use your preferred development environment.

**Step 1: Create a New MVC Module**
Open Visual Studio and create a new MVC module for DotNetNuke:

1. Go to _File > New > Project_....
2. Select "ASP.NET Core Web Application" and click "Next."
3. Choose the "_MVC_" template and click "Create."

**Step 2: Understand DNN Skinning Structure**
Before diving into skin creation, it's crucial to understand the basic structure of a DNN skin. A skin typically consists of two main components: the _*.ascx_ file for layout and the _*.css_ file for styling.

**Step 3: Create Skin Folder**
In your DNN project, create a new folder named _Skins_ in the root directory.

**Step 4: Add Skin Markup**

1. Inside the _Skins_ folder, create a new folder for your skin, e.g., _MySkin_.
2. Inside _MySkin_, create a new file named _MySkin.ascx_.

```
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MySkin.ascx.cs" Inherits="YourNamespace.MySkin" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="/Portals/_default/Skins/MySkin/MySkin.css" />
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <!-- Header Content Goes Here -->
        </div>
        <div id="content">
            <!-- Content Goes Here -->
            <dnn:DnnContentPane runat="server" id="ContentPane" />
        </div>
        <div id="footer">
            <!-- Footer Content Goes Here -->
        </div>
    </div>
</body>
</html>
```

**Step 5: Add Skin CSS**
Inside the _MySkin_ folder, create a new file named _MySkin_._css_ and add your styles.

```
/* Add your custom styles here */
body {
    font-family: Arial, sans-serif;
}

#wrapper {
    width: 100%;
    margin: 0 auto;
}

#header {
    background-color: #3498db;
    color: #fff;
    padding: 10px;
}

#content {
    padding: 20px;
}

#footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
}
```

**Step 6: Install and Apply the Skin in DNN**

1. Copy the _MySkin_ folder to **Portals\_default\Skins\** in your DNN installation directory.
2. Log in to your DNN portal.
3. Navigate to "_Admin > Extensions_" and install your new skin.
4. Go to "_Admin > Site Settings_" and set your skin as the default skin.

**Step 7: Test Your Skin**
Create a new page in your DNN portal and apply the newly created skin. Make sure to add some content to test the layout.

Congratulations! You've successfully created a basic DNN skin for your MVC project. This tutorial provides a foundation for building more complex and customized skins as you become more familiar with the DotNetNuke (DNN) platform.