Articles

This tutorial is part 2 of the Pure CSS Search Engine Optimized Skin Layouts tutorial. We previously demonstrated how to create a 3 pane skin using floats and absolute positioning. We are now going to demonstrate how to create multiple skin layouts using a skinname.css file.

Using the skinname.css file technique allows you to easily create variations of skins while also reducing the amount of code placed in the skin.css file.

In this video tutorial we create a 2 pane version of the CSS skin using minimal code changes.

Time Length: 8mins

Curiously.green1.0 is a free, lightweight, tableless, W3C-compliant skin. This skin comes in 2 different types:

• with_logo - uses the logo from the admin menu / site settings
• no_logo - uses text for the site header which you can edit in the skin files

It also comes with 5 containers:

• h1 container
• h2 container
• h3 container
• transparent, no title container
• box (a highlighted container)

FreeStyle is a free XHTML compliant pure CSS skin. This skin comes in 2 different types:

• index_logo - uses the logo from the admin menu / site settings
• index - uses text for the site header which you can edit in the skin files

It also comes with 4 containers:

• h1 container
• h2 container
• h3 container
• transparent, no title container

Summer Breeze is a free XHTML pure CSS skin. This skin comes in 2 different types:

• index_logo - uses the logo from the admin menu / site settings
• index - uses text for the site header which you can edit in the skin files

It also comes with 4 containers:

• h1 container
• h2 container
• h3 container
• transparent, no title container

Andreas 09 is a free XHTML/CSS skin. This skin comes with 3 different layouts and 7 colours:

• 3 panes
• 2 panes with the side menu on the left
• 2 panes with the side menu on the right

It also comes with 4 containers, they are automatically styled depending on the pane you insert them into:

• h1 container
• h2 container
• h3 container
• transparent, no title container

Andreas 01 is a free XHTML/CSS skin. This skin comes with 3 different layouts:

• 3 panes
• 2 panes with the menu on the left
• 2 panes with the menu on the right

It also comes with 4 containers:

• h1 container
• h2 container
• h3 container
• transparent, no title container

In this tutorial we continue the XHTML compliance tutorials from issue 19. Since the tutorials were released, a few additional code changes were discovered through discussions in the forum on DNN Creative, so, this tutorial outlines those additional changes.

In the issue 19 tutorials we used DotNetNuke v4.4, for this tutorial we use v4.5.1 and we outline any differences between the 2 versions.

We also demonstrate how to enable the account login module to become XHTML compliant, this involves editing the core code using Visual Studio 2005. We have created a separate tutorial so that you can learn how to install the DotNetNuke source code using Visual Studio 2005.

DotNetNuke has always caused problems by generating non-compliant XHTML code, so even if your skin is fully XHTML compliant, your DotNetNuke portal will not pass the W3C XHTML validation tests because the core code generates non-compliant code.

In these 3 video tutorials we walk you through the steps needed to enable your DotNetNuke installation to become XHTML compliant. These steps will only work with the latest 4.4.x version of DotNetNuke.
How to create an XHTML Compliant DotNetNuke 4.4

In the latest version of DotNetNuke 4.4 .x, a new function has been introduced which allows you to change the DOC TYPE of a document directly within a skin. This is essential for CSS skins.

The video covers:

• How to switch DOC TYPES in DNN 4.4
• Preparations
• Viewing the current render mode
• How to create a doctype.xml file
• How DotNetNuke uses the doctype.xml file
• Testing the new skin
• Confirming standards compliance mode and quirks mode for the skins installed on the portal

Time Length: 9min
How to select DOC TYPES in DotNetNuke 4.4.x

In previous skinning tutorials, when working with pure CSS skins, we recommended to remove the Solpart Menu from a container and to use the [DROPDOWNACTIONS] token instead as it provides a performance benefit.

In the latest version of DotNetNuke 4.4.1 there is currently a bug with the [DROPDOWNACTIONS] token. There is however a simple fix ...
How to fix the [DROPDOWNACTIONS] token bug in DotNetNuke 4.4.1