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

(Updated March 2007 for DNN 4.4)

The aim of this skin is to provide a clean, simple, search engine friendly and accessible skin.

The layout is created using just CSS (no tables) and makes use of CSS for styling the fonts, menu etc.

The skin takes advantage of the features that CSS layout designs provide:

Accessibility, Flexibility, Print View, Search Engine Friendly, Small File Size, Browser Compatible, etc.

(Updated March 2007 for DNN 4.4)

This tutorial outlines how you can reduce the overall size of your CSS files and therefore the page load time of your DotNetNuke portal by editing the CSS files.

It is possible to reduce the default.css file from 17K to 12K by using CSS shorthand techniques and editing the code so that it passes the W3C CSS Validation Test.

Example free CSS file included for download.
Reducing the DotNetNuke CSS file sizes

Techniques, tips and tricks to help you skinning in DotNetNuke. Layout, Solpart menu, CSS, class, id problems all solved with these easy troubleshooting techniques. Learn and get more from your DotNetNuke skins.

The videos cover:

• Video 1 – Introduction, Edit CSS, troubleshooting
• Video 2 – CSS layouts, images, id and classes and additional tips

Total Time Length: 17mins

Troubleshooting DotNetNuke Skins

In this tutorial we demonstrate how to incorporate Google Adsense into DotNetNuke websites.

In particular, the aim was to build a DotNetNuke website which would allow an administrator with little or no experience of DotNetNuke to:

• Easily choose what type of Adsense ad they wish to display on the page, for example a square ad or banner ad
• Easily choose the location on the page for the Adsense ad
• and all of the Adsense ads need to blend within the text content of the page

In these 4 video tutorials we walk you through, step by step, how to integrate Google Adsense with DotNetNuke skins. We demonstrate how to incorporate Adsense into the Free Simple Red Leaf CSS skin. You can see an example of the Adsense skin in action by watching the introduction video below. The code is available for download with the videos.

The videos cover:

• Video 1 – Introduction and demonstration
• Video 2 – Skin setup and Google Adsense setup
• Video 3 – Adding Adsense square ads and blending with the text
• Video 4 – Adsense coloured containers and banner ads

Total Time Length: 33mins

View video 1 to watch an introduction to the tutorial (4.4MB)

Watch all videos: Incorporating Google Adsense into DotNetNuke

In this tutorial we demonstrate how to create 3 horizontal CSS menus using the HouseMenu created by Tim Rolands from the House of Nuke.

We walk you through step by step, editing the free Simple Red Leaf CSS skin, and convert it to use horizontal menus. All of the skin code is available for download with the videos.

The menus

We explain how to create a:

Single horizontal menu that just displays the root items of the menu


Horizontal menu with a sub menu


Horizontal menu that uses images for the buttons with a sub menu


The videos cover:

• Video 1 – Introduction and demonstration
• Video 2 – Creating the layout initial configuration for a horizontal CSS menu
• Video 3 – Styling the horizontal root menu
• Video 4 – Configuring the horizontal sub menu
• Video 5 – Styling the sub-menu and setting up for all root menu items
• Video 6 – Pros and Cons, Creating a submenu using images to create a button effect
• Video 7 – Styling the image menu

Total Time Length: 65mins

View video 1 to watch an introduction to the tutorial (3.8MB)

Watch all videos: Creating Horizontal CSS menus in DotNetNuke using the HouseMenu

How many times have you wanted to use a font other than the generic fonts that we are forced to use for web pages?

This video tutorial (54 mins) demonstrates a technique which allows you to use any font you require for your text headings.

The user does not need the font installed on their machine.

Some designers use the technique of using images for their headings just so that they can incorporate different fonts into their designs. The problem with this is that you need to create a new image for every single title that you wish to create. This is a chore and defeats the object of using a dynamic content management system such as DotNetNuke.

Welcome to sIFR (Scalable Inman Flash Replacement). sIFR has been around for a while now, but there are minimal DotNetNuke sites implementing this technique. Using sIFR can give your website the extra design edge and help you to move away from the generic DotNetNuke designs that you tend to see.