Learn MS .NET

Using DotNetNuke effectively takes time in learning how to best use the tool.  One common mistake that many new administrators of the framework make is to place an html/text module above or below another module that they have on a page. Although to make the page more maintainable each module has some options in the settings that we can use to insert html/text.

So if we select the settings in the action menu for the module and then once we get to the module settings page expand the plus sign next to the Advanced Settings we will see the following:

As you can see we have the options for a Header Text and a Footer Text, both of these fields are ntext fields in the database that houses them.  Therefore, we have an unlimited number of characters that can be placed within these two textboxes for displaying above and below our module.

The only thing is that these are not WYSIWYG editors to enter the text in but at least it saves the addition of two more modules on the page that would increase the load time of the page.

Hope this tip saves some use of text modules and better use of the framework.

As DotNetNuke has grown and aged the methods of skinning for the framework have continued to age and improve.  With the pending release of version 5.1 of DNN about to happen, I thought it would be nice to put together a series of blog posts about the methods and types of skinning options available.

The options for skinning DNN have grown considerably since version 1.0 of the product. With 1.0 you had to actually change the skin within the codebase and it wasn’t a very easy task at the time. 

When 2.0 was released, one of the important features of that release was the ability to easily update and change skins.  At least if my memory serves me correctly.  I know by the time 3.0 was released skinning had been basically standardized in how it was going to be accomplished.

At this point forward till the release of the 5.0 product, not a lot had changed in how skinning was done within the framework. We had two options when it came to skinning, I’m going to call the two methods we had up to this point the web designer way and the the web developer way.

Let me explain what I mean, the web designer way consisted of using html, css and xml files to provide the markup, style sheet information and the xml file tied them together with the skin objects that were available within the framework that it was being installed on.

The web developer way consisted of using ascx and css files to accomplish the same thing.  The main difference is that as a web developer, the properties of the skin objects were placed within the ascx file instead of the xml file.  The other main difference is that using the ascx and css file combination the file wasn’t changed when it was uploaded to the framework. 

With the release of version 5.0 of the framework, there was an introduction of a 3rd method of creating skins with the use of skin widgets.  As well as some new methods of packaging up your skin for public release has changed with the new version.  We still have support for the older way of packaging up skins in zip files without an xml manifest, but there is a new way that allows us to provide more information as well as the ability to write release notes and to provide a license for the use of the skin.

Over the next several blog posts I will go into detail and build a skin that will take will be the same but built in the three different ways that we have available.  As well as a post about the new method of packaging up a skin for the latest release of the framework.

For anyone that is having trouble Peter Schotman of interApps has created a basic skin to help people understand skinning within the latest version of DotNetNuke 5.0. 

It is a basic skin from looking at the zip file.  It has the Manifest file for use with DNN 5.0 and contains two skin files and 4 containers within the setup file.

It does not make use of the new widgets in the skin files, but the files are ascx files and not the html/xml combination files that some people are used. It does give a good base for the Manifest file though.

DotNetNuke Skinning 101 - Home

Paul Scarlett of tressleworks.ca has created a Visual Basic Script to re-package DNN 4.0 skins into the new format for DNN 5.0.

The script is designed to unzip an existing skin/container package and then generate the appropriate manifest and then repackage it back up for deployment to a DNN 5.0 site.

He makes mention of requiring the following library to be installed on your system: XStandard XZip library.

Download DotNetNuke Skin Repackaging Script

With the release of the latest version of DotNetNuke 4.9, there have been some new improvements to things.  Some of these things won’t be apparent unless your paying close attention.  This post will not summarize the changes as I made a post previous to this that eluded to the changes.  This post will center around the new Styles skin object.

Style Skin Object

This skin object is new and allows us as skin developers to make better use of the styles that we use with our skins.  We can now use conditional expressions to insert other style sheets within our skin.  This makes it much easier to build a skin and then tweak it for the different types of browsers that may be viewing the site.

Style Object Properties

• Condition
  • This is an Internet Explorer specific condition.  All valid conditional expressions may be used such as “LT IE 7” or “(IE6) | (IE7)”. More information on these and other Internet Explorer conditions can be found at the MSDN Library.
• IsFirst
  • This Boolean property allows us to define if the style sheet link should be loaded as the first link or not. If the value is false then it will be loaded as the last link.
  • Values: True, False
• Name
  • This is a string value that will define the ID of the style sheet link.
• StyleSheet
  • This is a string value that will contain the path to the  style sheet that is to be loaded. This path is relative to the root of the application.
• UseSkinPath
  • This Boolean property allows to determine whether we should be loading the style sheet relative to the path of the skin.
  • Values: True, False

As we can see from the properties of the style object, it now gives us many options in how we want to structure our CSS files and even the ability to determine the loading order somewhat of how DotNetNuke places them in the loading order. 

Example

With this new object it always helps to see how to implement it properly.  With that in mind we will explore the sample that is readily available for everyone in the new 4.9 release with the new Entropy skin that replaces the old standby Blue skin.

First up will be how this is implemented in the ASCX files for skin development.

ASCX Method

  1: <%@ Control Language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
  2: <%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>
  3: 
  4: <dnn:STYLES runat="server" ID="StylesIE6" Name="IE6Minus" 
  5:     StyleSheet="ie6skin.css" Condition="LT IE 7" UseSkinPath="true" />

As we can see from the example we have a style sheet that will be added to the skin if the browser being used is less than Internet Explorer 7.  The link will be named “IE6Minus” and that we want to load the style sheet “ie6skin.css” from the root of the skin folder because we have the “UseSkinPath” set to true.

HTML/XML Method

  1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3: <html xmlns="http://www.w3.org/1999/xhtml">
  4: <head>
  5:     <link rel="stylesheet" type="text/css" href="skin.css" />
  6: </head>
  7: <body>
  8:     [STYLES]
  9: </body>
 10: </html>

The content of the html file.

  1: <Objects>
  2:     <Object>
  3:         <Token>[STYLES]</Token>
  4:         <Settings>
  5:             <Setting>
  6:                 <Name>Name</Name>
  7:                 <Value>IE6Minus</Value>
  8:             </Setting>
  9:             <Setting>
 10:                 <Name>StyleSheet</Name>
 11:                 <Value>ie6skin.css</Value>
 12:             </Setting>
 13:             <Setting>
 14:                 <Name>Condition</Name>
 15:                 <Value>LT IE 7</Value>
 16:             </Setting>
 17:             <Setting>
 18:                 <Name>UseSkinPath</Name>
 19:                 <Value>True</Value>
 20:             </Setting>
 21:         </Settings>
 22:     </Object>
 23: </Objects>

The content of the xml file.

Both examples will produce the same output when used in a skin.  They would load the ie6skin.css if the page determines that we are viewing this on a browser that is lower then Internet Explorer 7.  I think in the long run this skin object will be a great addition to the core skin objects that are contained within the DNN Framework.