Building Your First DotNetNuke Skin: A Beginner's Guide to MVC

#dnn #cms #mvc #skindevelopment

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:

DotNetNuke Installation:
Make sure you have DotNetNuke installed on your server. You can download it from the official DotNetNuke website.
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:

Go to File > New > Project....
Select "ASP.NET Core Web Application" and click "Next."
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

Inside the Skins folder, create a new folder for your skin, e.g., MySkin.
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

Copy the MySkin folder to *Portals_default\Skins* in your DNN installation directory.
Log in to your DNN portal.
Navigate to "Admin > Extensions" and install your new skin.
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.

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more