DotNetNuke Videos

This tutorial is a step by step guide for how to create the free ‘Simple Red Leaf’ pure CSS layout skin.

You can view the skin live here: http://skins.dnncreative.com

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

The tutorial consists of 9 videos detailing how to create a CSS skin for DotNetNuke using Visual Web Developer 2005 Express Edition.

The videos cover:

• Video 1 – Introduction, Preparations, Explanations
• Video 2 – Setting up the layout skeleton of the CSS skin
• Video 3 – Viewing the initial layout and setting the DOC Type
• Video 4 – Setting first properties in the skin.css file
• Video 5 – Setting up the layout of the skin using CSS
• Video 6 – Finishing touches to the CSS skin layout
• Video 7 – Styling the HouseMenu
• Video 8 – Testing in browsers and fixing with hacks
• Video 9 – Viewing, finishing touches, completion of CSS skin

Total Time Length: 78min 44secs

This free video tutorial demonstrates how to install the FCKEditor. This editor can be used to replace the FreeTextBox editor that comes as standard with DotNetNuke.

The FCKEditor is a WYSIWYG text editor that allows you to add text and image content to your modules. The main module that you will use with the FCKEditor is the Text/HTML module.

I personally always replace the FreeTextBox editor with the FCKEditor as I find the FCKEditor to be more stable and reliable than the FreeTextBox editor. - Highly Recommended.

This is a continuation of our series on How to build a DotNetNuke website.

This video tutorial explains the simple steps for removing the default Solpart menu within a container and replacing it with a drop down list.

The main reason we need to remove the Solpart menu is because the Solpart menu is not compatible with a XHTML Transitional Doc Type.

We need to set up DotNetNuke to use a XHTML Doc Type so that we can successfully implement features such as:

• Font-resizing
• Pure CSS layout skins (no tables)

Time Length: 4min 13secs
Download Size: 4.2MB

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 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

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

This video tutorial provides information related to setting up your computer ready for skinning. It covers:

• Creating the folder structure
• Copying across the DNN skins as a reference
• Setting up Visual Web Developer 2005 Express Edition
• Setting up your localhost install of DotNetNuke ready for skin testing

Time Length: 10min 27secs
Download Size: 9.4MB