FreeStyle - Free DotNetNuke CSS Skin

Adapted to DNN By Lee Sykes
Design by Tony Pires
http://www.20pirates.com

August 2007

FreeStyle is a free XHTML compliant pure CSS skin, the original template was created by Tony Pires, and it has been adapted to a DotNetNuke skin by Lee Sykes.

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

This skin comes in 2 different types:

• index_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 4 containers:

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

When using these containers, the header tags are placed around the title of the module.

We have also included with the skin a demo site wizard template so that you can quickly learn how to use and apply the skin to your own DotNetNuke installation.

The skin uses the House of Nuke CSS Menu.

Make sure you read the full installation instructions as the skin requires additional setup steps BEFORE installing the skin.

Features

Search Engine Friendly:

The skin is search engine friendly.

The menu is CSS based and completely search engine friendly. All of the links can be read and indexed by the search engines.

Hack Management:

The CSS hacks for IE are placed in a separate iehacks.css file

Tested:

The skin has been fully tested against: IE7, IE6, IE5.5, Firefox, Mozilla, Netscape, Opera and Safari browsers. (This tutorial provides information for testing a skin in DotNetNuke)

Installation

It’s important that you follow these installation instructions closely as you need to pre-configure DotNetNuke BEFORE you install the skin.

Recommendation:

Make sure that you are familiar with DotNetNuke and understand how to install a standard DotNetNuke skin before attempting to install this skin. Issues 5 and 6 of the magazine covered in detail working with DotNetNuke skins.

Install this skin in a test area first before using it on a live website, to ensure that it is compatible with your current DotNetNuke setup.

You may find layout issues arise with certain modules because they are table based, although none have been found so far.

Install:

1. Download and install the HouseMenu skin object from the House of Nuke to your DotNetNuke portal.
   
   (Further information for skinning with the House Menu is included in this tutorial: How to install and configure the House of Nuke menu for a DotNetNuke skin)
   
   (NOTE: we used HouseMenu version 1.4)
   
   
2. Install the FreeStyle skins and containers (There is a single zip file for download, unzip this file to extract the license file and skin package zip file)
   
   
3. Suggested settings within the Admin menu / Site settings:
   1. Portal skin: freestyle - index
   2. Portal container: freestyle – h1 title
   3. Admin skin: DNN-Blue – Horizontal Menu - Fixed Width
   4. Admin container: DNN-Blue – Image Header – Color Background
      (Note: we suggest using the DNN Blue skin for admin as the freestyle skin is not easy to work with in admin areas
      
      
4. XHTML Transitional 1.0 DOC TYPE is automatically configured by the skin
   
   
5. XHTML compliance: The skin is XHTML compliant, if you require DotNetNuke to also produce XHTML compliant code so that your site passes validation, follow these tutorials:
   How to create an XHTML Compliant DotNetNuke 4.4
   XHTML Compliant DotNetNuke 4.4 and 4.5 - part 2
   

Skin Useage

A site wizard template is available for download which will create a copy of http://skintemplates.dnncreative.com/freestyle on your DotNetNuke installation.

This will allow you to view the content and see how we have applied the various styles and layouts.

To install the site template:

• Extract the two files from the site template zip file
• Upload the files to your DotNetNuke installation: Portals / _default folder
• Login to your DotNetNuke portal as administrator
• Go to Admin / Site Wizard
• Click next and follow the instructions from the site wizard

Feedback

We hope you find the skin useful and please feel free to leave feedback in the forum.

Thanks

I would also like to thank Nik Kalyani from Speerio, Inc. who supplied the Javascript function that calls up the various CSS style sheets dependant on the browser or media type, ie. the iehacks.css stylesheet.

License

All content on http://www.20pirates.com (including text, photographs, web templates, and any other original works) is licensed by the Creative Commons Attribution, NonCommercial, ShareAlike (by-nc-sa) 2.5 License, and you must you give Tony Pires credit on derived work (Tony Pires: http://20pirates.com).

To use a web template for a commercial website, you must request permission and get approval from Tony Pires, via email: tony@20pirates.com or the contact page: http://www.20pirates.com/contact-page

Ask Tony about other uses such as distribution.

These templates and themes are licensed under a Creative Commons Attribution 2.5 License:
http://creativecommons.org/licenses/by/2.5/

You are free:

• to Share — to copy, distribute, display, and perform the work
• to Remix — to make derivative works

Under the following conditions:

• Attribution. You must attribute the work in the manner specified by the author or licensor.
• For any reuse or distribution, you must make clear to others the license terms of this work.
• Any of these conditions can be waived if you get permission from the copyright holder.

This means that you are free to use and modify it for any purpose, but you must include the provided link back to Tony Pires.

Further Information

If you would like to learn more about pure CSS skinning, we have created a series of video tutorials which walk you through How to Create The ‘Simple Red Leaf’ Pure CSS Skin.