DEV Community

Shraddha Deshmukh
Shraddha Deshmukh

Posted on

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

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.

  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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Some comments have been hidden by the post's author - find out more

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay