Simple Red Leaf CSS Skin

Introduction | Features | Installation | Skin Useage | Work in Progress

Skin Useage

The skin comes as two separate files, a 3 pane and 5 pane layout design.

Content Panes

When you are working with a skin, if you do not enter any content in a content area, the space does not shrink as with a table design. You have to select the skin layout that suits the page.

ie. for this design select the 3 pane layout.

For this design select the 5 pane layout
5 pane skin

This content should be placed in a 3 pane layout in order for it to expand across the entire width of the page, here it is displayed in the 5 pane layout.
3 pane design in a 5 pane layout

Containers

The edit menu that is used within a container to access the module settings, has been changed from the Solpart menu to a drop down list because the Solpart menu is not compatible with the skin. Simply select the function you require from the drop down list and then click on the Go arrow to load the function. You can learn how to remove the Solpart menu from a container and set this up in your skins.

Tag Line

The tag line content area at the top of the skin can be used to add a descriptive keyword based title aimed at search engines.

Add your tag line and surround it with h5 tags, this will automatically format the text for you.

<h5>This is my search engine keyword phrase</h5>

Go to the Text / HTML modules Settings / Page Settings / Un-tick ‘Display Container’

On-line Text Editor

Because the skin requires you to use a DOC TYPE of XHTML transitional, it’s important for you to understand the basics for creating well formed XHTML compliant code. This tutorial covers XHTML and best practice coding for skins and modules in DotNetNuke.

I recommend that you download and use the FCK Text Editor instead of the default FreeTextBox DotNetNuke editor as the FCKeditor creates XHTML compliant code.

Developing and Testing

If you are using the skin as a basis for developing your own CSS layout skins, follow this tutorial for tips on testing your DotNetNuke skin. Testing in a variety of browsers is especially important when you are working with CSS and DotnetNuke.

You may also find this tutorial useful for minimising and creating efficient CSS code.

Installation | Page 4 of 5 | Work in Progress

You need to Register for free to DNN Creative Magazine and Login to access this download.

Versions

March 2007 v1.3

Special skin release version for DNN 4.4+
This version uses the new DOC TYPE feature in DNN 4.4+ and enables the DOC TYPE to be selected without making changes to the default.aspx file

May 2006 v1.2

Skin is fully XHTML Transitional 1.0 compliant and passes W3C standards
Fixes to containers, ids changed to classes (mulitiple ids causes invalid code)
Fixes to Javascript function in skin for selecting print.css and iehack.css files for validation

March 2006 v1.0

Initial Release of Skin

License

You are free to download this skin and use it on as many DotNetNuke portals as you wish. But you may not sell this skin or make it available for download on any other site.