How to create a container for DotNetNuke® - part 7

By Lee Sykes

January & February 2006

Continuing our series on How to build a DotNetNuke website, we are now ready to begin creating the container for our skin. Make sure that you have followed the previous tutorials so that you fully understand this tutorial.

These videos detail 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. The container is provided in the folder structure that we outlined in the previous tutorials to help you quickly get started. This skin is stage one of the Vortex Music Productions website design. Further changes will be made to this skin in later issues to enhance the skin.

Scroll to the bottom of the page to download the videos and container files.

vortex music skin

The videos cover:

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

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