Website Design Interviews

This tutorial demonstrates the steps to create a printable view of your web pages, so a user can simply go to the file menu in their browser window and select print. This presents the user with a printable, user friendly, readable page.

The tutorial shows you how to create a print stylesheet for your DotNetNuke skin, how to format the layout of the print stylesheet, how to change the text font so that it is suitable for reading when printed out, how to set the width of the stylesheet, how to format links, and also how to display the full URL of a link next to a text link so that it can be viewed on the printed page. Finally, we demonstrate how to select which content to make available for printing and how to remove content not required for printing, this is an essential technique for removing elements such as the menu and login links which are not required for a printed page.

The videos cover:

• Video 1 - Introduction, Considerations, Setup
• Video 2 - Current Print Preview, Creating the Print CSS
• Video 3 - Remove Elements from the Printed Page
• Video 4 - Repositioning the Content, Removing Content Styling
• Video 5 - Styling the Content Pane, Re-styling the Headings
• Video 6 - How to Style Links for the Printed Page
• Video 7 - Styling Unordered lists, Method Two for Print Stylesheets using Javascript

Total Time Length: 50mins

The CSS reference book is a special 112 page resource to help you learn how to use CSS for your DotNetNuke skins.

The CSS reference book demonstrates all of the currently supported CSS properties used within CSS 2.1.

The book comes in pdf format, so this makes it easy to quickly search for a CSS property and find the information you require, complete with examples and images.

Dark Ritual is a free, tableless, fixed width, XHTML compliant website. This skin comes with 2 layouts in 2 versions:

• Index 3 pane skin with text header
• Index 3 pane skin with logo
• Admin 1 pane skin with text header
• Admin 1 pane skin with logo

It also comes with 3 containers:

• h1 title
• h2 title
• transparent, no title container

Bitter Sweet is a free, tableless, fixed width, XHTML compliant website design. This skin comes with 2 layouts in 2 versions:

• Index 2 pane skin with text header
• Index 2 pane skin with logo
• Admin 1 pane skin with text header
• Admin 1 pane skin with logo

It also comes with 3 containers:

• h1 content pane
• h2 right pane
• transparent, no title container

Zenlike 1.0 is a free, lightweight, tableless, fluid W3C-compliant website design. This skin comes in 2 different types:

• index_with_logo - uses the logo from the admin menu / site settings
• index - uses text for the site header which you can edit in the skin files

It also comes with 5 containers:

• h4 title box
• h4 title no bot line
• h4 title with bot line
• top pane h3 title
• transparent no title

Lazy Days is a free, tableless, W3C-compliant website design.This skin comes in 3 variations:

• index – a 2 pane fluid skin
• index_sub_menu - a 2 pane fluid skin with a sub menu
• 1 pane – a 1 pane fluid skin, suitable for the administration area in DotNetNuke

It also comes with 6 containers:

• h1 title gradient
• h1 title
• h2 title gradient
• h2 title
• h3 title
• transparent no title
  

Greenery is a free, tableless, W3C-compliant website design. This skin comes with 3 variations

• greenery – index (main skin)
• greenery – index_submenu (main skin with a sub menu in the right pane)
• greenery – admin (single pane skin for use with admin pages)

It also comes with 2 containers:

• h1 title
• transparent, no title container 

In this video tutorial we demonstrate how to style the search box in DotNetNuke skins. We walk you through how we applied the styling to the search box in the free ‘internet sharing’ skin.

This covers how we expanded the width of the search box, how to use a graphic for the search box, how to style the text that the search box uses, how to style the search link as a button and how to replace the search link with an image.

This tutorial is part 2 of the How to create a DotNetNuke skin from an XHTML template tutorial.

In Part 2 of the tutorial we cover how to create the containers, semantically coding the content, styling and formatting the content, overriding the DotNetNuke default classes, how to easily add the additional skin layout variations, and how to setup and create a print.css file so that you can style your own print layout of the skin.

The videos cover:

• Video 1 - Creating the containers
• Video 2 - Text styling and overriding the default DotNetNuke styles
• Video 3 - Styling the header tags
• Video 4 - Styling content based on the content pane location
• Video 5 - Creating layout variations
• Video 6 - Creating an additional styled menu
• Video 7 - How to create a print layout (print.css)

Total Time Length: 60mins

In this tutorial we demonstrate how to convert a free open source XHTML pure CSS template into a DotNetNuke skin.

We demonstrate how to convert the andreas01 template created by Andreas Viklund.

This tutorial is in two parts, part 1 covers how to transfer the structure of an XHTML template into a DotNetNuke skin and how to adapt it to create the content panes, the menu and various DotNetNuke tokens.

The videos cover:

• Video 1 - Introduction and preparations
• Video 2 - Creation of content panes
• Video 3 - Login links and packaging skin
• Video 4 - How to fix layout display problems
• Video 5 - How to create the menu
• Video 6 - Adding the search box and validating the skin

Total Time Length: 52mins