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