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.
