DotNetNuke 7 skinning tutorial

Question

I'm looking for a decent tutorial on creating skins for DotNetNuke 7. I've not been able to find anything for the most up to date version of dnn and although I've had some success modifying existing skins, it would be a lot easier to be able to build them from scratch.

Any suggestions?

Answer 1

I'm not going to go into too much detail, but I'll define some of the key elements about DotNetNuke Skinning and some of the potential problems you may encounter.

A skin can be written in one of two ways, html or an ascx. The most common way is through an ascx.

• html : When you utilize this method, any changes you make within the skin will not be applied until DotNetNuke parses the skin. When DotNetNuke does this parse, it will reference your manifest to correctly parse all of the values so it displays.

• ascx : This way does not need to be parsed, the changes you make will instantly go live. Which makes manipulation easier. However, this will still contain an a manifest to define your content as well.

Now, the easiest way to imagine DotNetNuke structure is through Panes and Containers. Essentially a Pane will always be wrapped within a Container.

But how do I design a skin?

A few things to note, with DotNetNuke you tend to not design a site for exactly that page- You create more elaborate structures that can be used in a more general sense. For example:

So with the above image, you see a few key elements such as:

1. Logo
2. Search
3. Login
4. Menu
5. Banner
6. Grouping of three Content.
7. Grouping of four Content.
8. Another piece of Content.
9. Footer which is grouped by four as well.

So essentially we have a fairly easy data structure. Which would usually include some fairly basic organization. But my question is, how do you account or mobile devices or different page layouts such as:

Now you have a slightly more complex issue. Well, DotNetNuke really kept a few considerations- Keep the developer as a developer, the designer as a designer. Which allows large groups working with a site the flexibility without destroying one another work.

In every DotNetNuke skin you'll see these:

<%@ Control language="C#" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>

What are those? Well, the first is defining our ascx. The important thing is the second one. Essentially DotNetNuke has tokens available, these tokens will allow the skin to reflect changes made within DotNetNuke in it's interface.

So when we are referencing the core location, rather then a static object. This allows the DotNetNuke interface to automatically input the logo in the location.

Whoa, you lost me- If that is just a reference how do we specify the location?

<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>

Will reference our object. To specify the location within our site you would do this:

<div class = "example_logo">
    <dnn:LOGO runat="server" id="dnnLOGO" BorderWidth="0" />
</div>

So we are essentially wrapping our token object in a div element. Then we are actually calling our token. This will physically place the logo from DotNetNuke interface into your site now.

This essentially eliminates the static approach, and allows it to become dynamic.

So these are important, but how do I create the structure?

<div id="Origin">
    <div class="Wrapper">
         <div id="Origin-Header">
            <div class="origin-header clearfix">

                 <!-- Header Elements -->
                 <div class=origin-logo>
                      <dnn:LOGO runat=server" id="dnnLOGO" BorderWidth="0" />
                 </div>
                 <div class="origin-login">
                       <dnn:LANGUAGE runat="server" id="dnnLANGUAGE" showMenu="false" showLinks="true" />
                       <dnn:LOGIN runat="server" id="dnnLOGIN" CssClass="login" /> |                      <dnn:USER runat="server" id="dnnUSER" CssClass="user" />
                       <dnn:SEARCH runat="server" id="dnnSEARCH" UseDropDownList="true" ShowSite="false" ShowWeb="false" />
                  </div>
            </div>
       </div>

        !-- Banner -->
        <div id = "Origin-Banner">
              <div class = "origin-banner-pane" id="origin-banner-pane" runat="server" />
        </div>

So the above is an example to get you started. As you see your using your essential knowledge to build the site-structure. Your just filling in the DotNetNuke Tokens into your design. Then where you'd like the DotNetNuke modules to fill your sites data from the DotNetNuke interface is within those Panes.

Now the next important aspect will be the essential packaging of your skin. This will actually ensure it works correctly once it is installed.

You can get more information from http://www.dotnetnuclear.com and http://www.dnnchat.com

Hopefully this provides the basics to get you started. Which leaves the packaging and manifest left.

Hopefully this points you in right direction and helps.

Feel free to ask questions or follow those sites to try and get more information on the subject.