Recently Added Articles

One more addition has been added to the developer's DotNetNuke skinning toolbox with the release of DotNetNuke 4.9. Introducing...the Styles SkinObject. This little object is a very welcome addition and helps ease the burden of delivering a site layout to the myriad of browsers and screen sizes of site visitors.

Using the skin object is just like using any of the other DotNetNuke skin objects. Basically, you need to register the object on your skin and then apply the object.

Registering is easy. Simply add this to the top of your .ascx file:

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

Then, anywhere on the page you can apply the object. The object doesn't actually display anything, so it doesn't necessarily matter where you add it. However, you may consider simply adding it to the bottom of your page just to keep things free from confusion and clutter.

<dnn:STYLES runat="server" ID="StylesIE6" Name="IE6Minus" StyleSheet="ie6skin.css" Condition="LT IE 7" UseSkinPath="true" />

If you copy and paste the above line into your file, you can click on it to select it and then hit F4 in Visual Studio to view the properties of the tag.

So, now that we know how to apply it, lets go over the properties of the DotNetNuke Styles SkinObject.

Properties

• ID This is the unique name you want to give to your object. This is the name you would use to refer to the object programmatically.
• Condition - this is the conditional usage statement. See below for more information....
• Enable Theming - leave this values at their default. You can't see it, so need to theme it.
• Enable Viewstate - leave this value at its default
• IsFirst - This is a boolean value (True/False) that basically says, "Do you want this skin to be loaded first?" The default property value is set to False. Remember, CSS is applied in order...so if two of the same styles are found in two different CSS files, the last one loaded will be applied.
• Name - This is the name that will be used to identify the css stylesheet in the <link> tag from the DOM
  
• runat - Leave this alone...obviously any server side tag has to have the "runat=server" attribute
• StyleSheet - this is the name of the StyleSheet that you are wanting applied via this SkinObject
• UseSkinPath - this is a boolean value (True/False). When true, the CSS file will be assumed to be located in the same folder as the current Skin you are adding the object to.
• Visible - this is a boolean value (True/False)...Leave it as it, because you can't see it anyhow.

Conditional statements

 If you look in the code behind of the skin object you can see from the code that the required tags are automatically added to the conditional statement you supply in the Condition property. So, essentially you just need to fill in the text that will replace the {0} variable.

openif.Text = String.Format("<!--[if {0}]>", Condition)

   ....

closeif.Text = "<![endif]-->"

Now, if you look at the property box image above, you'll see that the supplied condition is "LT IE 7". What this is doing is telling the browser , "If the user's browser is Less Than Internet Explorer 7, I want you to use the ie6skin.css file located in my current skin folder."

Example Conditional Statements

<p><!--[if IE]>

According to the conditional comment this is Internet Explorer<br />

<![endif]-->

<!--[if IE 5]>

According to the conditional comment this is Internet Explorer 5<br />

<![endif]-->

<!--[if IE 5.0]>

According to the conditional comment this is Internet Explorer 5.0<br />

<![endif]-->

<!--[if IE 5.5]>

According to the conditional comment this is Internet Explorer 5.5<br />

<![endif]-->

<!--[if IE 6]>

According to the conditional comment this is Internet Explorer 6<br />

<![endif]-->

<!--[if IE 7]>

According to the conditional comment this is Internet Explorer 7<br />

<![endif]-->

<!--[if gte IE 5]>

According to the conditional comment this is Internet Explorer 5 and up<br />

<![endif]-->

<!--[if lt IE 6]>

According to the conditional comment this is Internet Explorer lower than 6<br />

<![endif]-->

<!--[if lte IE 5.5]>

According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />

<![endif]-->

<!--[if gt IE 6]>

According to the conditional comment this is Internet Explorer greater than 6<br />

<![endif]-->

</p>

More examples:

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->

<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>

<!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->

<!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->

<!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->

<!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->

<!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->

<!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->

<!--[if true]>You are using an <em>uplevel</em> browser.<![endif]-->

<![if false]>You are using a <em>downlevel</em> browser.<![endif]>

<!--[if true]><![if IE 7]><p>This nested comment is displayed in IE 7.</p><![endif]><![endif]-->

Detecting FireFox browsers

If the following code fails to exclusively detect Firefox..

    <!--[if !IE]>    ...statements...  <![endif]-->  

Use "Downlevel-revealed Conditional Comments" to get it working...

    <![if !IE]>    ...statements...  <![endif]>  

Example to force Firefox to use an exclusive css..

  <![if !IE]>    <link href="css/ff.css" rel="stylesheet" type="text/css" />  <![endif]>

And that's it. Pretty cool, right? I think this SkinObject is going to be a great addition to the core objects and will help us get those skins rendering correctly for a lot more people.

Wanna make sure those conditional statements are working properly? Check out my blog post on viewing your site in many browsers at once or how to test your site easily in different IE versions on your local machine.

Want more CSS control? Check out theveCSSViewer module to truly take command of your CSS Styling on DotNetNuke websites.