C# DotNetNuke 7 换肤教程

DotNetNuke 7 skinning tutorial

提问by HuwD

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.

我正在寻找一个关于为 DotNetNuke 7 创建皮肤的体面教程。我找不到任何关于 dnn 的最新版本的东西，虽然我在修改现有皮肤方面取得了一些成功，但这会很多更容易能够从头开始构建它们。

Any suggestions?

有什么建议？

采纳答案by Greg

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

我不会详细介绍，但我会定义一些关键要素DotNetNuke Skinning以及您可能遇到的一些潜在问题。

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

皮肤可以用两种方式之一编写，html或者ascx. 最常见的方式是通过ascx.

• html: When you utilize this method, any changes you make within the skin will not be applied until DotNetNukeparses the skin. When DotNetNukedoes 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.

• html：当您使用此方法时，您在皮肤中所做的任何更改都不会应用到DotNetNuke解析皮肤之前。何时DotNetNuke解析，它将引用您的清单以正确解析所有值，以便显示。

• ascx：这种方式不需要解析，您所做的更改将立即生效。这使得操作更容易。但是，这仍将包含一个清单来定义您的内容。

Now, the easiest way to imagine DotNetNukestructure is through Panesand Containers. Essentially a Panewill always be wrapped within a Container.

现在，想象DotNetNuke结构的最简单方法是通过Panes和Containers。本质上 aPane将始终包含在 a 中Container。

But how do I design a skin?

但是我该如何设计皮肤呢？

A few things to note, with DotNetNukeyou 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:

需要注意的几件事，DotNetNuke您往往不会为该页面设计一个站点 - 您创建了可以在更一般意义上使用的更复杂的结构。例如：

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.

1. 标识
2. 搜索
3. 登录
4. 菜单
5. 横幅
6. 三个内容的分组。
7. 四个内容的分组。
8. 另一个内容。
9. 页脚也按四个分组。

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, DotNetNukereally 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.

现在你有一个稍微复杂的问题。嗯，DotNetNuke确实保留了一些考虑因素 - 保持开发人员作为开发人员，设计师作为设计师。这允许在一个站点上工作的大型团队具有灵活性，而不会破坏彼此的工作。

In every DotNetNukeskin you'll see these:

在每个DotNetNuke皮肤中，您都会看到这些：

<%@ 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 DotNetNukehas tokens available, these tokens will allow the skin to reflect changes made within DotNetNukein it's interface.

那些是什么？嗯，首先是定义我们的ascx. 重要的是第二点。本质上DotNetNuke有可用的令牌，这些令牌将允许皮肤反映DotNetNuke在其界面中所做的更改。

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

所以当我们引用核心位置时，而不是静态对象。这允许DotNetNuke界面自动在该位置输入徽标。

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 divelement. Then we are actually calling our token. This will physically place the logo from DotNetNukeinterface into your site now.

所以我们本质上是将我们的令牌对象包装在一个div元素中。然后我们实际上是在调用我们的令牌。现在，这会将DotNetNuke界面中的徽标物理地放置到您的站点中。

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 Tokensinto your design. Then where you'd like the DotNetNukemodules to fill your sites data from the DotNetNukeinterface is within those Panes.

所以上面是一个让你开始的例子。正如您所看到的，您正在使用您的基本知识来构建站点结构。您只需填写DotNetNuke Tokens您的设计。然后，您希望DotNetNuke模块从DotNetNuke界面填充站点数据的位置在那些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.comand http://www.dnnchat.com

您可以从http://www.dotnetnuclear.com和http://www.dnchat.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.

随时提出问题或关注这些网站以尝试获取有关该主题的更多信息。

回答by Ryan Doom

Your best bet is probably to look at the existing skins that ship with DotNetNuke as a start. To create a new skin just go to the /Portals/_default/skins area and copy one of these directories paste and rename it to something unique. This should now show up in your skin selector. 90% of the .ascx skin files are just HTML/CSS. You can then modify the skin.css file and ASCX files as necessary to get your desired look. To make a new skin option just create a new .ascx file.

最好的办法可能是首先查看 DotNetNuke 附带的现有皮肤。要创建新皮肤，只需转到 /Portals/_default/skins 区域并复制这些目录之一粘贴并将其重命名为唯一的名称。这现在应该显示在您的皮肤选择器中。90% 的 .ascx 皮肤文件只是 HTML/CSS。然后，您可以根据需要修改 skin.css 文件和 ASCX 文件以获得所需的外观。要创建新的皮肤选项，只需创建一个新的 .ascx 文件。

You could also purchase a skin or two and take a look at how those were developed.

您还可以购买一两个皮肤，看看它们是如何开发的。

回答by RacerNerd

As Chris Hammond points out in the first comment, these tutorials are hard to come by. @Chris - Thanks for writing the Module Template. The community and I appreciate it.

正如 Chris Hammond 在第一条评论中指出的那样，这些教程很难获得。@Chris - 感谢您编写模块模板。社区和我很感激。

I have been trying to learn about DNN skins myself and came across the DNN Hero website that has a good basic video tutorial about how to create a skin for a site.

我一直在尝试自己学习 DNN 皮肤，并发现 DNN Hero 网站有一个很好的基本视频教程，介绍如何为网站创建皮肤。

It can be found here: http://www.dnnhero.com/Premium/Tutorial/tabid/259/ArticleID/80/1-How-to-create-my-first-skin-in-DotNetNuke-Part-1-6.aspx

可以在这里找到：http: //www.dnnhero.com/Premium/Tutorial/tabid/259/ArticleID/80/1-How-to-create-my-first-skin-in-DotNetNuke-Part-1- 6.aspx

I don't think this series is in the free set of videos, so you may have to subscribe to get it. I am a subscriber and have not been disappointed. If you need an introduction to skins or anything else DNN, the site is really informative.

我认为该系列不在免费视频集中，因此您可能需要订阅才能获取。我是订户，并没有失望。如果您需要介绍皮肤或其他任何 DNN，该站点非常有用。