DNN Skinning

Skins

• The user interface offered by DNN is not as "slick" as Joomla and Google, which offer much more AJAX features. But the DNN community is working on that.
• For websites about DNN for DNN developers, it may be best to use the default skin because users are already familiar with DNN's look and feel.

  However, any other topic, the opposite is true -- keeping the default skin means that visitors who know about DNN will think that the site was slapped together quickly, that the developer did not add any "value".

Module Design Tasks

The plan Process Guidance

Cascading Style Sheets

CSS separates layout mark-up from site content text. This also provides more flexibility and are more flexible to adapt to changes in web standards.

A screen shot of skin.html needs to be named skin.jpg for display in the DNN Skin Gallery.
1. PortalModuleControl.StyleSheet for custom modules.
2. default.css — default host level styles
3. skin.css or skinfilename.css — skin styles
4. container.css or containerfilename.css — container styles
5. portal.css — custom styles defined by portal Administrator

A skin applied at the tab level will always override a skin assigned at the portal level.

Templates

The DNN Starter Kit creates the default site.

DNN is integrated with VS 2005 such that you can create a website by selecting File > New Web Site > My Templates > DotNetNuke Web Application Framework.

DNN4+ no longer comes with the 4 templates that came with DDN3:

• Default
• Personal
• Club
• Small Business

HTML, CSS, and graphics files are held in .ascx user control files which are pre-compiled by the DNN Skin Uploader run by the Host User or Portal User (admin). from the File Manager tab on the Admin or Host menu.

Several skin files are contained in a skin package:

• one defining the private admin area.
• one defining the public portal

The particular skin presented to any user is determined by the Default.aspx file.

Dynamic messages are specified in Visual Basic (vb) code-behind business logic in .ascx.vb files.

More Skins

I would like to see skins that mimic other popular websites:

1. Companies:
   • HP (for pages for users of their software)
   • MSDN and MVP Blogs for Microsoft developers
   • Apple
2. Social Networking:
   • Facebook
   • MySpace
   • Google Groups
   • Blogger
3. E-commerce:
   • Ebay for shopping carts
   • Amazon
   • Best Buy
4. Other CMS
   • Drupal
   • Joomla
   • MediaWiki
   • Alfresco
   • Liferay

I don't want to mimic these sites for nefarious purposes (e.g., "phishing" to make people think mine is the real site). What I want is users to feel "at home" with the look and feel they are comfortable with at my site.

Skin Features

I'd like for visitors to my site to be able to select a skin, then my site would continue displaying that skin in the future.

The standards I following when developing skins are detailed here. They include mark-up to adapt to viewing by mobile phones.

If you would like one of these (or another), please let me know.

Snowcovered is a portal offering modules and skins.

Tim O'Brien (a British ex-pat living in Sweden) OBrienIT offers (if you register) his "pure" CSS skin that does not use HTML tables (which are slower to load). More importantly, his skins pass validation by W3C validation and SilkTide.

HouseofNuke provides a container that uses the "SuckerFish" approach for CSS, using only a tiny bit of JavaScript to support non-standard aspects of certain versions of Internet Explorer.

Containers are managed within the skin by providing images instead of text for headings or padding between content areas.

The XMenu skin from MarkitModules makes use of the Mootools JavaScript framework.

http://www.dnnskins.com/home.aspx

Control Attributes

DNN controls expose properties:

• ControlName — the name of the control that this label refers to (508 support)
• ResourceKey — the resource key used for the localized label text
• HelpKey — the resource key used for the localized help text
• Suffix — an optional suffix that is added to the ResourceKey after localization
• Text — default text, if no localization text can be found.

DNN localization resourcekey names use these extensions:

• .Text — used for the text properties of controls (default)
• .Help — used for help text (see more below)
• .Header — used for the headertext properties of DataGrid columns
• .EditText — used for the edittext properties of DataGrids
• .ErrorMessage — used for the ErrorMessage property of Validator controls

Reference

This page was created to present informaton on these pages in an updated, more concise way.

How to Install DotNetNuke 4.3.x from DNN Creative magazine