DNN Tutorials

Quirks and Standards Compliance modes are the two methods that browsers can use to interpret your CSS. It’s one of the important considerations if you are implementing a pure CSS skin or using font-resizing techniques.

This tutorial covers:

• Quirks and Standards Compliance modes
• Switching modes
• DOC TYPES Document Type Definition (DTD)
• Which XHTML DTD is suitable for DotNetNuke?
• How do we set DotNetNuke to use XHTML 1.0 transitional DTD?
• Pros and Cons

The tutorial also includes a Default.aspx file for you to download so that you can quickly set your DotNetNuke installation to use XHTML 1.0 Transitional.

This tutorial explains XHTML and how to improve your skin and module coding standards by implementing the XHTML rules. It covers:

• Examples
• Why bother with XHTML compliant code? What’s it all about?
• How does this affect DotNetNuke?
• The XHTML standards also need to be adhered to by module developers. Why?

And further resources.

Continuing our series on How to build a DotNetNuke website, we demonstrate how to enable the Vortex Music skin to use resizable text.

While viewing a web page using Internet Explorer, if you go to the View menu and select Text Size / Largest, you should see that the text size increases.

The main reason to enable text sizing is to make your site accessible to as many people as possible. Enabling text sizing within your website allows visitors with visual impairments the opportunity to view the content of your site.

A further consideration is that it is law in the US and UK to create accessible sites.

This tutorial contains 5 videos which explain the best method for setting this up with a DotNetNuke skin.

The Skin and Container files are included with the tutorial.

Video 1 - Initial preparations and setting up the skin ready for text sizing. (5min)

Video 2 - Initial Classes and cleaning up the CSS code using shorthand techniques, enabling the menu to use text sizing. Details of the various DotNetNuke CSS files and inheritance problems (15min)

Video 3 - Further classes, enabling the Text / HTML module to use text sizing. Viewing and fixing various browser problems. (9min)
 
Video 4 - Setting skin objects to use text sizing. Fixing further Internet Explorer sizing problems (9min)

Video 5 - Final classes enabled for text sizing. Further testing and viewing in a variety of browsers. (12min)

This is part of the How to Build a Website in DotNetNuke series.

This tutorial looks at the HouseMenu created by Tim Rolands from the House of Nuke.

The HouseMenu is a free CSS based menu and can be used to replace the standard Solpart menu that comes with DotNetNuke.

The tutorial covers:

• Introduction to the features
• The Benefits of the HouseMenu over the Solpart Menu
• Issues

And comes complete with 4 videos covering:

• Video 1 - Demonstration, Installation (5min)
• Video 2 - Adding the HouseMenu to a skin (6min)
• Video 3 - Designing and configuring the HouseMenu (10min)
• Video 4 - Internet Explorer fixes through CSS hacks and comparisons with the Solpart menu (4min)

Skin and Container files are included with the tutorial.

This tutorial is intended for people who are familiar and comfortable with CSS.

We look at some of the techniques that are available within CSS to minimise the size of our CSS stylesheets and to write more efficient code.

In particular focusing on:

CSS Shorthand
Grouping Classes
Colour Shorthand

– This is a good performance enhancement for any DotNetNuke skin.

This is part of the How to Build a Website in DotNetNuke series.

This tutorial consists of 2 videos detailing how to create a container for DotNetNuke using Visual Web Developer 2005 Express Edition.

The container files are included with the videos for you to download.

Video 1 - Creating a container: Image Header – White Background

• Copying across the files from the DNN-Blue container to use as a reference
• Fixing the errors in the default container
• Associating the .CSS file with the .htm file so that you can view the changes you make in the CSS file
• Explanation of the Tokens and their functions
• Renaming of the classes within the table cells
• Editing the container.css file
• Explanation of the classes
• How to edit the classes to change the look of a container
• How to add an image to your container
• Using gradient images: making use of the repeat function and background colour to take into account any possible overloads of table cells, or instances such as a browser disabling images
• Adding the .xml file

Time Length: 10min 26secs
Download Size: 11.5 MB

Video 2

• Packaging a container
• How to automatically install the container to your DotNetNuke installation
• Viewing the container
• Explanation of the classes that we created
• Create two further containers and an explanation of each of the containers:
• Image Header SE White Background container:
• This container is similar to the first container except elements of the code and Tokens that we do not need have been stripped out to reduce the file size and page load times
• Transparent.htm
• This container is completely transparent
• Final changes and setting up the containers for release to a production environment

Time Length: 5min 47secs
Download Size: 6.5 MB

This is part of the How to Build a Website in DotNetNuke series.

This tutorial demonstrates the various components that make up a skin and how a skin works.

The video covers the following details:

• Why a skin does not use <HTML> <BODY> or <FORM> tags
• .htm and .ascx and the differences between the two files
• Placeholders [Tokens] – uniquely identify a skin object
• Working with images
• Content Panes and how they are added to a skin – the minimum requirement is for one content pane to be named “ContentPane”
• Skin.css stylesheet
• Tokens and the .xml file
• Skin Objects – attributes
• If you are using a .htm file the settings of the tokens are provided within the skin.xml file
• If you are using a .ascx file the settings are provided directly within the .ascx file

Time Length: 11min 36secs
Download Size: 11.1MB