DotNetNuke (DNN) is a popular open-source Content Management System (CMS) built on the Microsoft ASP.NET framework. One of the key features of DNN is its ability to extend and customize the functionality of the system using ThemeObjects. A ThemeObject is a customizable component that can be added to a DNN skin to provide additional functionality, such as a navigation menu, a custom login form, or a slider.

In DNN, Theme objects (previously known Skin Objects), also known as skin objects, are a specific type of extension used within themes to enhance the functionality of standard user interface (UI) elements present on a webpage.

A Theme Object is a user-control element that can be incorporated into a Theme to provide specialized functionality. Unlike a Module in DNN, a Theme Object is typically not configurable or moveable by the website administrator. Instead, the behavior of a Theme Object can be controlled by setting its attributes within the Theme, which then become "fixed" for that specific theme.

Understanding ThemeObjects

A ThemeObject is a user control that is added to a DNN skin to provide extra functionality. ThemeObjects can be built with any.NET language, including C# and VB.NET. They are often used to provide custom functionality that DNN does not provide by default or to replace existing functionality with a custom implementation.

ThemeObjects in DNN are used by embedding them in a skin file. An XML document that describes the layout and appearance of a DNN website is known as a skin file. Skin files typically contain HTML markup, CSS styling, and DNN-specific tokens that are dynamically substituted with content at runtime. ThemeObjects are added to a skin file by entering a token that refers to the user ownership of the ThemeObject.

Each Theme Object serves a distinct purpose, with designated functionality for specific UI elements such as the site logo, login link, menu, and more. In addition to their predefined functionality, many Theme Objects offer attribute customization to adjust their behavior. These attributes often come with default values.

To add a Theme Object to a Theme, two steps are generally required:

• Adding the Theme Object to the Theme, and
• Setting its attributes to configure its behavior.

Within Layouts and Containers, Theme Objects can be incorporated as typical webpage components such as the menu bar, copyright notice, login/registration links, privacy policy links, terms of service links, and search boxes. These Theme Objects are added to the HTML or ASCX as tokens.

Add a Theme Object

You must edit the ASCX file of your specific Theme's layout. There are three things you must add.
Register the Theme Object

At the top of the ASCX file, a register tag must be included to specify the location of the Theme Object on the server. This register tag has the following format:

<%@ Register TagPrefix="dnn" TagName="ThemeObjectName" Src="ThemeObjectPath" %>

The "ThemeObjectName" refers to the name of the Theme Object, while "ThemeObjectPath" specifies the location of the Theme Object on the server (e.g., ~/Admin/Themes/BreadCrumb.ascx).

It's worth noting that even if a Theme Object is added multiple times within the Theme, the register tag only needs to be added once for each Theme Object type.

Add the Theme Object itself

To add the Theme Object to the layout, use a tag with the following structure:

<TagPrefix:TagName runat="server" id="UniqueId" />

The "TagPrefix" attribute value corresponds to the TagPrefix attribute value in the register tag, while "TagName" corresponds to the TagName attribute value in the register tag.

The "runat" attribute is required to indicate to the Framework that the tag is not static HTML but needs to be processed. The "UniqueId" attribute should be a unique identifier for this Theme Object within the Theme, as duplicating this identifier will result in an error and the Theme will not function correctly. The Id should also be valid in HTML terms, starting with a letter and not containing any spaces.

If using the same Theme Object multiple times in a single Theme, the only difference between instances should be the UniqueId, aside from any distinct attribute values.

Add attributes
    
<TagPrefix:TagName  runat="server" id="UniqueId" Attribute="Value" />

Developing a ThemeObject

A basic familiarity with .NET programming and ASP.NET web development is required to create a ThemeObject. The following are the steps to creating a ThemeObject:

Create an ASP.NET User Control
Create a new ASP.NET user control as the first step in building a ThemeObject. By right-clicking on the project and selecting "Add New Item" in Visual Studio, you may build a new user control. Choose "Web Form" from the selection of templates and name your user control something descriptive.

DNN SkinObjectBase class
You must inherit from the DNN SkinObjectBase class to allow your user to control a SkinObject. This class contains the functionality required to interface your user control with the DNN skinning system. To include the SkinObjectBase class, add the following code to the code-behind file of your user control:

using DotNetNuke.UI.Skins;

public partial class SkinObjectName : SkinObjectBase
{
    // ...
}

Code or develop the desired functionality for the ThemeObject
Following that, you must implement the functionality of your ThemeObject. This will be determined by the capabilities you wish to provide. If you are constructing a navigation menu ThemeObject, for example, you would implement the logic to generate the menu items and render them in HTML.

Register the ThemeObject
You must register your ThemeObject with the system before it can be used in DNN. This is accomplished by including a manifest file in your project that explains the properties and dependencies of the ThemeObject like mentioning package type as a SkinObject “<component type="SkinObject">”. The manifest file is an XML document with information about your ThemeObject, such as its name, description, and version number.

Why Custom ThemeObject needs to Develop for DotNetNuke

While DNN has a number of built-in Theme Objects to assist developers and designers in quickly creating a website theme, there may be special requirements that these pre-built Theme Objects cannot meet. In such circumstances, custom Theme Objects that provide the desired functionality may be required.

DNN provides a list of inbuilt Theme Objects that can be found at https://www.dnnsoftware.com/docs/designers/theme-objects-1.html. DNN Developers or Designers can customize Skin Templates to meet specific needs beyond the pre-defined DNN SkinObjects. This may involve developing custom SkinObjects with functionality tailored to specific requirements. Developers can start with blank templates of theme objects from https://github.com/DNNCommunity/starter-theme-object

A website, for example, might require a custom contact form that isn't available as a pre-built Theme Object. A custom Theme Object can be created in this case to provide the required functionality. Bespoke Theme Objects can also be used to generate distinct visual features that distinguish a website from others that rely solely on pre-built Theme Objects.

Common ThemeObjects

You can find a list of DotNetNuke's inbuilt ThemeObjects at ThemeObjects, but it is important to note that the ThemeObjects listed below must also be included for better performance.

At DNNDevelopers, we have extensive experience fulfilling our client's requirements through our proficiency in various tools and techniques of DotNetNuke development. Our mastery of almost all the tasks involved in DotNetNuke Development and Designing allows us to create high-quality, optimized, and visually appealing DNN themes and skins. If you need assistance in achieving better results for your business needs, please do not hesitate to contact us.

Custom Theme Object development necessitates technical expertise and familiarity with DNN's programming model, but it may be a powerful tool for building unique and effective website designs. Developers and designers can fulfill particular functionality and design need with bespoke Theme Objects that would not be achievable with pre-built Theme Objects.