By Lee Sykes
January & February 2006
Continuing our series on How to build a DotNetNuke website, we are now ready to begin creating our skin. Make sure that you have followed the previous tutorials so that you fully understand this tutorial.
This is a series of 8 videos detailing how to create a skin for DotNetNuke using Visual Web Developer 2005 Express Edition.
The skin files are included with the videos for you to download. The skin 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 skin files.
The videos cover:
Video 1 - Initial preparations and setup in VWD
- Creating a skin using Visual Web Developer 2005 Express Edition
- Explanation of the images exported for the skin
- Copying across the DNN-Blue skin files for editing
- Associating the skin.css file with the .htm skin file
- Enabling validation in Visual Web Developer to check for errors in the skin code
- Fixing the validation errors that are in the DNN-Blue skin before creating your skin
- Formatting the document
Time Length: 5min 47secs
Video 2 - Setting up the layout of the skin using tables
- How to create a content area where you can add modules to the page
- Adding a new row and table cells to create a new module content area pane at the top of the skin to enter a keyword phrase using the Text / HTML module to target the search engines
- Re-arranging the tokens to suit our own template arrangement
- Creating the section for the vertical menu and content pane area
- Adding a Links row
- And Copyright, Terms and Privacy Row
- Completion of the initial layout of the skin
Time Length: 14min 20secs
Video 3 - Packaging and uploading the first edit of the skin to a localhost installation
- How to package the first edit of the skin ready for installation
- How to automatically install the skin to a localhost installation of DotNetNuke
- How to assign the skin to a page on a DotNetNuke portal for testing
Time Length: 3min 50secs
Video 4 - Creating a skin.xml file and setting the menu to display vertically
- Creating a skin.xml file
- How to set the menu to display vertically
- Specifying the settings for the skin Tokens
Time Length: 2min 27secs
Video 5 - Styling the skin using the skin.css file and methods to quickly view the edits of a skin
- First edits to the skin.css file
- The PageMaster class
- How to quickly view changes to the skin.css file within your localhost installation without reloading the entire skin.zip file
- The different methods available to quickly view in your localhost installation any edits you make to a skin
Time Length: 5min 39secs
Video 6 - Styling the skin using the skin.css file continued - (working with images)
Classes:
- Skin master - Set background colour
- skingradient - Set gradient image for links row. How to add an image to a table cell using CSS. Tips on using the repeat image feature and background colour, especially with gradient images. How to prepare the image for table cell overloads
- Viewing the changes – Testing the skin against variable sized text (for people with visual impairments). – Testing for overloading of table cells and background images. – Testing for browsers which disable the display of images
- How to add comments to a CSS file
- Controlpanel – How to change the background colour of the admin control panel
- Looking at the pane classes (areas where you can add modules to the page) – Top Pane, Left Pane, Content Pane, Right Pane etc.
Time Length: 10min 35secs
Video 7 - Styling the skin using the skin.css file continued - (the menu)
- How to create a class for the new contentpane - toppanese
- How to create a class for the new menupane – adjusting the padding – ensuring the menu and main content align correctly
- Menu container class
- How to add a background image and colour to the menu. How to repeat a gradient image to fill the menu which then fades through to the background colour
- Viewing the menu in the localhost install
- Viewing the top admin control panel with the new background colour
- How to specify the height for the background image of the menu
- MenuItem class - Experimenting with the settings
- How to specify the main menu text appearance
- Rest of menu items:
- MenuIcon class
- SubMenu
- MenuBreak
- MenuItemSel
- MenuArrow
- RootMenuArrow
- Standard Button – How to change the colours of the buttons
- Viewing the results so far
- How to correct the problem of the menu and content pane moving up and down the page when there is no content
- Viewing the corrections
Time Length: 16min 16secs
Video 8 - Styling the skin using the skin.css file continued - (adding the final classes and releasing the skin)
- Editing the Head class
- Finishing the CSS off – adding additional CSS classes to style the:
- Content Pane title text and Control panel text
- Default text style for the main content
- Textboxes in the admin and edit pages
- Date
- Login and register, breadcrumbs, copyright, terms & privacy, hostname, search links
- H1, H2, H3 tags etc.
- Final check – How to add a line break in between the menu and the first module in the menu pane for spacing
- How to package the skin for release into a production environment
- Naming the skin & Zip file (Naming Conventions)
Time Length: 10min 39secs
Check the
Skinning Toolkit which details all of the skin classes and the elements they style - essential reading