Learn DNN / DotNetNuke

Issue 34 - 5 Free XHTML Compliant Pure CSS DotNetNuke Skins

Subscribe to the magazine

July 2008

Welcome to issue 34 of DNN Creative Magazine.

In this DotNetNuke training series we have converted 5 open source html templates into DotNetNuke skins.

These templates have been chosen due to their different design and CSS techniques used. Each of these template designs used a different approach while converting them to a DotNetNuke skin, so you will be able to view the code and learn from this variety of implementations.

Skins

Lazy Days
Fluid design, re-size the browser window and view how the balloons and buildings move. View the text styling, especially the implementation of blockquotes. The DotNetNuke control panel in this skin had to be moved to the bottom of the page so it would not interfere with the design.

Zenlike
Fluid design centred with a background image. This skin presented an interesting challenge when converting to DotNetNuke, especially so that the background image would not interfere when administrating in DNN. The control panel in this skin is placed underneath the main header.

Bitter Sweet
Stylish fixed width skin. The main challenge for this skin was the layout of the panes in DotNetNuke, if a pane did not contain any content, the layout collapsed. This was fixed by changing and improving the original CSS of the XHTML template so that it is suitable for a CMS. Notice how the title backgrounds extend outside the text in the content pane.

Greenery
Interesting fixed width design with an image cutting the skin in half. This presented interesting challenges when implementing the right pane in DotNetNuke and preventing the pane dropping below the main content in IE6.

Dark Ritual
Fixed width 3 pane skin. Dark background skins always present a challenge in DotNetNuke when working in the administration area. A 1 pane skin was created with a white background in the content area for administration tasks, along with special styling for the FCK editor so that content can be viewed when adding images and links using the FCK editor.

As you can see, viewing the code from a variety of designers helps to improve your CSS skills and learn multiple techniques for manipulating the layouts and styling of CSS skins in DotNetNuke.

View all skins live

Used
By

Testimonials

| The SoloCoder Podcast | Google | Privacy Statement | Terms Of Use