Created By Lee Sykes
Released March 2006
Updated March 2007 v1.3
This free skin is the 'Simple Red Leaf Skin' - it is a pure CSS skin.
The aim of this skin is to provide a clean, simple, search engine friendly and accessible skin.
You can view the skin live here: http://skins.dnncreative.com
The layout is created using just CSS (no tables) and makes use of CSS for styling the fonts, menu etc.
It does not use the SolPart menu. It uses the House of Nuke CSS Menu.
There have been many posts in the forums regarding the use of pure CSS skins in DotNetNuke and the compatibility problems that can occur, so the aim of this skin is to create a solid, flexible skin that takes advantage of the features that CSS layout designs provide:
Accessibility, Flexibility, Print View, Search Engine Friendly, Small File Size, Browser Compatible, etc.
The skin is purposefully simple to enable you to learn from the design and easily change the design of the skin. – It’s a two minute job to change the background image and menu colours.
Make sure you read the full installation instructions as the skin requires additional setup steps BEFORE installing the skin.
Along with the skin is the launch of a CSS and DotNetNuke Research site, which is a completely free community resource to enable everyone to share code, tips, ideas etc. on working with pure CSS layouts.
Supporting the skin is also a series of video tutorials which walk you through How to Create The ‘Simple Red Leaf’ Pure CSS Skin.
Features
Accessibility:
All fonts are based on percentages and can be increased / decreased in size within all browsers. This makes the skin accessible for users with visual impairments. (This tutorial explains how to setup font resizing with a DotNetNuke Skin)
Search Engine Friendly:
The skin is search engine friendly.
- There is a tag line at the top of the skin which allows you to enter a key phrase for your page. This is placed at the top of your source code enabling search engines to index your page based on your key phrase.
- Within the source code, the main content appears before the menu. This allows search engines to easily gain access to your main content and index it. This also allows screen readers easy access to the main content.
- The menu is CSS based and completely search engine friendly. All of the links can be read and indexed by the search engines.
Fluid Layout:
The skin expands and contracts to the size of the window.
Hack Management:
The skin uses a minimum of hacks, but even so, those hacks are stored in a separate css file to make it easier to adjust the skin for compatibility with future browsers.
Print Version:
The skin also uses a separate css file so that you can present a printable version of the website. The print version removes the menu and allows the main text to display across 100% of the available print area.
Tested:
The skin has been fully tested against: IE7(beta2), IE6, IE5.5, IE5 (some spacing issues), Firefox, Mozilla, Netscape, Opera and with online viewing of the Safari browser. (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 currently recommend you install HouseMenu version 1.3)
2. Install the Simple Red Leaf skins and containers (There are two skin zip files and two container zip files to install)
3. Within the Admin menu / Site settings, set:
- Portal skin: Simple Red Leaf Skin 3 panes or 5 panes dependant on your preference
- Portal container: Red Leaf – transparent
- Admin skin: Simple Red Leaf Skin 3 panes
- Admin container: Red Leaf Box – Image Header colour background
It’s important that you set the admin details above, otherwise when you follow the next step, you will not be able to access the admin or host settings in the menu.
4. Default.aspx
This skin requires DotNetNuke to use XHTML Transitional 1.0 for the DOC TYPE, you can read more details about this here. Browser Quirks and Standard Compliance Modes in DotNetNuke
You need to upload the default.aspx file that is included with the skin in order for the text size to display correctly in the various browsers (especially Internet Explorer).
Before you do this, read the warnings in the Browser Quirks tutorial.
You can install the skin without uploading the new default.aspx file, but IE will display all text too large.
- Download the default.aspx file that is included with the skin files
- Rename the original default.aspx file to default_original.aspx
- Upload the new default.aspx file – if you encounter any problems you can revert back to the default_original.aspx file
Each skin layout comes as a separate package to keep the CSS code simple and easy for you to understand and learn from.
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
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.
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.
Work in progress
This skin has been tested with a variety of modules and browsers, but is still regarded as work in progress.
If you come across any compatibility issues, then please visit the forum and leave some feedback.
This skin is used on the DotNetNuke CSS research site, so if I add any enhancements to the skin, they will be also added to this skin here and made available for free download.
I 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 print.css stylesheet. |