Tidy is an Open Source MIT License skin hosted on CodePlex.

Below you can download the slide deck in PDF format. As soon as the full presentation audio and video is ready I will make that available as well.

Download

Presentation Description:
This discussion will cover both basic and advanced real world skinning techniques and methodologies with an emphasis on web standards and design flexibility/fluidity. Unencumbered by past precedent, this promises to be a lively and informative discussion, even for the non-technical.

More about Adam Humphrey on the DotNetNuke Blog

Additional Videos:

• Adam Humphrey on User Groups
• DotNetNuke Interview: Adam Humphrey

The Adammer CSS NavMenu creates unordered lists that are styled entirely by CSS for displaying navigation within our custom and commercial DotNetNuke skins.

The hover/fly-out solution is modeled after “Son of Suckerfish” using embedded unordered lists. This solution does not require any external JavaScript. Set navType="Hover" for this type of menu.

Using the NavMenu in Our Skins

To use the Adammer NavMenu skin object in our skins you need only register it and include the tag that calls it in the skin .ascx file:

<%@ Register TagPrefix="Adammer" Namespace="Adammer.DNN.Skins" Assembly = "Adammer.DNN.NavMenu" %>
 
<Adammer:NavMenu id="nav" Level="0-0" Type="Tabs" ExcludeTabs="Admin,Host" runat="server" />

The two lines above will display the top-level (parent) tabs from the portal. To include additional levels, you add additional properties that identify the levels and feature you want displayed.

The line below will display the first through third level under the parent tabs (which are at level zero):

<Adammer:NavMenu id="nav" Level="1-3" Type="Tabs" ExcludeTabs="Admin,Host" runat="server" />

Always specify the Level with a starting and ending range, even if it is only one level that you want to display. Along with the Level property, there are additional properties to control the NavType of the menu, along with ExcludeTabs and IncludeTabs, which will assist in keeping only the tabs that you want to be rendered on a specific menu instance.

Property Definitions

ID – Set this property to place an ID on the rendered control. This is needed to reference the different instances of the control in the CSS file.

Level – A number from 0 to n to identify what level of tabs should be displayed. Specify this setting with a starting and ending level. Level=”0-0″ will only display the root tabs. Level=”1-3″ will display the 1st through 3rd levels.

NavType -

Tabs – Will display a list of your links that can be configured to look like tabs that are defined in the CSS file. The vertical or horizontal orientations are accomplished through CSS mostly by setting a width on the main container.

ActiveChildTabs – Used for displaying a list of tabs that has the currently active tab as a parent.

Hover – Used if you want to set the menu to use embedded Unordered Lists with detection to add the mouse-overs for IE browsers.

SelectList – Can be used to display all of the tabs in a single select box.

Template – The template type of menu allows you to specify an external template file so that you can completely configure the output of the menu including layout, styles, etc.

IncludeTabs – A list of tab names separated by commas that would be the only ones loaded in this instance of the control.

ExcludeTabs – A list of tab names separated by commas that will be excluded from all the other tabs that are loaded in this instance of the control.

Note: you can also use regular expressions to define includes and excludes for your menus.

CacheTabs – If set to true will cache the tab generation process so that the menu does not have to be rebuilt on every request. Set this to true after you have your menu working like you want.

DisplayIcon – If set to true it will use the Icon file that is assigned to the Page in Page Settings.

HideTabName – If set to true, this property will hide the name of the tab. This is usually used in conjunction with the DisplayIcon setting to make image type menus.

HideTabNamesByLevel – Set this to a range of levels that you want to hide tab names on. This is useful for displaying images on the parent, and still showing the names on child menus.

ShowHiden – If set to true, this property will also include tabs/pages in the menu that have been set to hidden in the Page Settings.

OnlyExpandActive – Set this to true if you want the child items in a single instance to only be shown after the parent is clicked. This is usually used in a vertical navigation to give the navigation the feel of an expanding type tree.

DisplayRoles – A list of security role names separated by commas that will be allowed to see this instance of the menu. This allows you to display different menus for different roles. This property can also use RegEx wildcards.

Example: DisplayRoles="IT_.*" will display the menu instance for any user in a Role that begins with “IT_”.

DisplayPaths – A list of URL paths separated by commas that will be allowed to see this instance of the menu. This allows you to display different menus for different URLs. This property can also use RegEx.

Example: "forums.*", will allow this instance of the menu to only be displayed if the URL has “Forums” in it).

Replacements – A comma separated list of search=replace pairs. This is useful if you don’t like something about the output of the menu, but don’t have access to change it through some other property. This property can also use RegEx.

Example: If you wanted to replace the word Home with the word Start you would use Replacements="Home=Start".

TemplateFile – Specify the Filename of the Template to be used for this instance.

ShowType – This property was added to support using two instances of the menus on the same page as in the case when you want to display root navigation in one instance and child navigation in another, with the child instance only displaying the links for the currently active root.

Note: This setting is only valid when using the "Tabs" NavType.

WithActiveParent – This value will render all the active children of the currently active tab. If you are using two instances of the menu (one for parent and one for child, then you will most likely set ShowType="WithActiveParent" on your child menu.

ChildrenOnly – This value will make the menu show only the children of the tabs specified in the IncludedTabs property. It is useful if you want to target a specific section of the tab hierarchy.

Always – This will make the menu always render whatever levels are specified. It is the default and is not normally set explicitly.

Creating Hover Fly-out Navigation (Suckerfish)

Example CSS Used in Hover Type Menu:

/*-- Set bottom margin and color of menu that does not contain menu items --*/
#nav ul {padding:0px; margin:0px; list-style:none; float:left; width:100%; background:transparent;}
 
/*-- Set line height --*/
#nav li {position:relative; float:left; line-height:12px; list-style:none; padding:0px; margin-bottom:0px; background-color:transparent}
 
/*-- Font for top menu items --*/
#nav a {font-family:Verdana, Geneva, sans-serif; font-weight:normal; font-size:12px; display:block; margin:0; text-decoration:none; text-align:center; padding:0 20px 0 18px; margin:0px; color:#000; background:#CCC url(graphics/menu_divide.gif) right center no-repeat; line-height:26px;}
 
/*-- Second-level list container --*/
#nav li ul {position:absolute; left:-999em; width:167px; border-top:#999 1px solid; border-left:1px solid #999; z-index:1000}
 
/*-- Second-level menu items --*/
#nav li li a { width:150px; font-size:11px; text-align:left; background:#E6E6E6 none; color:#222; border-right:1px solid #999; border-bottom:#999 1px solid; line-height:16px; padding:6px 6px 6px 10px; text-transform:none; font-family:Verdana, Geneva, sans-serif; font-weight:normal;}
 
/*-- Hover style for menu items --*/
#nav li a:hover {background: #FAFAFA none; color:#000;}
 
/*-- Top-level selected menu items --*/
#nav li.SelectedTab a {}
 
/*-- Second-level selected menu items --*/
#nav li li.SelectedTab a {background:#CCC none; color:#222;}
 
/*-- Third-level selected menu items --*/
#nav li li li.SelectedTab a {background: #CCC none; color:#222;}
 
/*-- Hover style for selected menu items --*/
#nav li.SelectedTab a:hover {background: #FAFAFA none; color:#000;}
 
/*-- Font color for disabled tabs --*/
#nav .DisabledTab {color:#CCC;}
 
/*-- No need to change these hover classes unless you need more than 4 levels --*/
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul,
#nav li.iehover ul ul,
#nav li.iehover ul ul ul,
#nav li.iehover ul ul ul ul{left: -999em;}
 
/*-- Set where the first drop-down hover menu starts along the y axis --*/
#nav li:hover ul,
#nav li.iehover ul {top: 26px;left:-1px;}
 
/*-- Set where the first drop-down hover menu starts along the x axis --*/
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li.iehover ul,
#nav li li li.iehover ul {top: 2px;left:166px;}

The Adammer CSS NavMenu is licensed through Snapsis Software.

Visit the demo site to download.

Features

Native DNN 6 Containers

We’ve updated the containers to support the new DNN 6 “Manage” button.

Don’t worry, they maintain full DNN 5 compatiblity too!

Updated h1-h6 Styles

We’ve updated the header (h1-h6) sytles to better handle wrapping module titles.

z-index Bug Fixes

People love to modify Greytness to their unique needs. We make customization super easy with fully commented CSS files.

And more…

Check out the Greytness demo site to view a full list of features.

Download at the Greytness Demo site

Creative Commons

Greytness by Adammer LLC is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Permissions beyond the scope of this license is available at http://www.adammer.com/legal/eula/.

Visit the demo site to download.

Features

New Install Package

The Greytness install package now includes the Adammer NavMenu Skin Object. It’s no longer necessary to install our menu module before you install Greytness.

DotNetNuke 6 compatible

5 Unique Designs

Greytness includes 5 unique themes: Charcool, Charcool Breadcrumb, Standard, Midnight, and Winter.

Fully commented CSS

People love to modify Greytness to their unique needs. We make customization super easy with fully commented CSS files.

Built for Accessibility

Greytness is best practices W3C designed. This includes Web Accessibility Initiative (WAI) and Web Content Accessibility Guidelines (WCAG).

z-index bug fix

We have fixed a minor bug affecting only IE 7 & 8 when the fly-out menu covers Flash and iFrames in the banner pane.

And much more…

We’ve included many cool new features in this latest version of Greytness. Download today and let us know what you think.

Download at the Greytness Demo site

Creative Commons

Greytness by Adammer LLC is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Permissions beyond the scope of this license is available at http://www.adammer.com/legal/eula/.

You now have end-to-end encryption between your computer and the Adammer AlphaWorks servers. This secured channel helps protect your data from being intercepted by a third party. This provides you with a more secure and private user experience.

Use our contact form or post a comment to our blog with the knowledge that your information, email address, comments, etc., will be encrypted.

What is SSL?

SSL (Secure Sockets Layer) is a protocol that helps provide secure Internet communications for services like web browsing, e-mail, instant messaging, and other data transfers. When you use SSL, your information is encrypted so it can’t be read by any intermediary party such as employers and internet service providers (ISPs).

Visit the demo site to download.

New Features

New Charcool Themes

In this latest version of Greytness, we’ve added two new Themes: Charcool and Charcool Breadcrumb.

Fully commented CSS

The skin.css file is now fully commented to make customization much easier.

Localization

Greytness v2.3 fully supports the built in DNN localization functionality.

32bit PNG backgrounds

All border images are now 32 bit (transparent) .png. This allows you to change the Body background color seamlessly. image courtesy of ie6funeral.com

WAI Compliance

We modified the footer links to use an unordered list to best comply with W3C Web Accessibility Initiative (WAI).

And much more…

We’ve included many cool new features in this latest version of Greytness. Download today and let us know what you think.

Download at the Greytness Demo site

Creative Commons

Greytness by Adammer LLC is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Permissions beyond the scope of this license is available at http://www.adammer.com/legal/eula/.

Support for DNN Ribbon Bar Control Panel

In this latest version of Greytness, we’ve added support for the new DNN Ribbon Bar Control Panel included in DNN 5.4.1.

HOW TO ENABLE THE NEW RIBBON BAR CONTROL PANEL
If you upgraded from a previous version of DNN, the new Ribbon Bar Control Panel is not enabled by default.

• Host > Host Settings > Other Settings
• Change the Control Panel drop down box to “RIBBONBAR”

Change log

• Added Support for the new Ribbon Bar Control Panel
• Minor Bug Fixes

Download at the Greytness Demo site

Creative Commons

Greytness by Adammer LLC is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Permissions beyond the scope of this license is available at http://www.adammer.com/legal/eula/.

About Greytness

Greytness is a grey/black skin with 3 Themes (Standard, Winter and Midnight). It includes 30 containers which can be arranged with great flexibility in its 21 panes. Greytness is written in valid XHTML 1.0 Transitional, valid CSS 3 code, and does not contain any tables.

Version 2.1 of the Greytness skin is a simple upgrade for DNN 5 users. The download no longer includes a DNN 4 compatible version but you can still download version 2.0 with support for DNN 4 on the Demo Site.

New Midnight Theme

In keeping with the sleek style of Greytness, we have created a new Midnight Theme that is very clean and will add additional style and flexibility to your dark themed DNN site.

Change log

• Added New Midnight Theme
• Added 6 New Containers
• Removed Admin and Host menu items

Download at the Greytness Demo site

Creative Commons

Greytness by Adammer LLC is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Permissions beyond the scope of this license is available at http://www.adammer.com/legal/eula/.