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/.

New Features:

1. Login/Register links added to the breadcrumb division. Commented out by default.
2. New “additionalHeader” class added to the footer menu style to support multiple subjects in the footer menu.

Bug Fixes:

1. Footer Wrap / Footer Move with corner-case footer menu layouts and the expansion of DNN subjects in Admin/Edit pages.
2. Homepage breadcrumb text-indent when homepage title is very long.

How to get the latest version (for current owners)

• Snowcovered
  Once logged in, you’ll find the upgrade in My Downloads -> Patches / Hot Fixes.

• SWReg (Adammer Store):
  You can use the link found in your original email receipt to download the latest version.

View Demo Site

About Greytness

As its name suggests, Greytness is a single color grey skin with 2 Themes (Standard and Winter). It includes 24 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.0 of the Greytness skin is an upgrade for DNN 4 users and a completely new skin for DNN 5 users. We rewrote the DNN 5 skin manifest to support future DNN 5 skinning features.

New Winter Theme

In keeping with the sleek style of Greytness, we have created a new Winter Theme that is subtle and clean and should add some winter cheer to your DNN site.

Change log

• Added New Winter Theme
• Added 6 New Containers
• Changed Search Button Image
• Rewrote DNN Skin Manifest File (DNN5)
• 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/.

Current Website Compliance (a moving target)

HTML5 [validate]
In this version of the Hypertext Markup Language (HTML), new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability. Read more

CSS3 (CSS level 3) [validate]
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Read more

WAI-AAA, WCAG 2.0 [validate]
Web Accessibility Initiative (WAI) and the Web Content Accessibility Guidelines 2.0 (WCAG 2.0) explain how to make Web content accessible to people with disabilities. Conformance to these Guidelines will help make the Web more accessible to users with disabilities and will benefit all users. Read more

Elemento is a super crisp, clean, and unique DotNetNuke skin. A DotNetNuke skin like no other!

6 Unique Page Styles
Including Breadcrumbs and dynamically generated Sub Naviagation.

181 Containers
Including 6 Title/Header sizes per container sytle.

Best Practices

• World Wide Web Consortium (W3C) validated XHTML
• Rehabilitation Act Section 508 compliant
• WAI-A, WCAG 1.0 compliant
• W3C validated CSS 3

Search Engine Optimized (SEO)
Including the Adammer CSS menu module and Dynamic Site Title.

Detailed information available at the Elemento Demo Site.

Winners Announced!
11/02/2009

Congratulations to:

• @adampax
• @jonathan_allen
• @samerde
• @tommorgan

for winning our first Twitter skin giveaway!

A special tip of the hat to @tommorgan for his Elemento haiku. Well played sir.

Update: (11/02/09): The Adammer Elemento Skin Geiveaway via Twitter has ended. However, due to its success we anticipate another giveaway soon. Follow @adammer for further announcements.

View the Elemento Demo Site

Greytness, a DNN skin that is clean, simple, sleek, and FREE! (as in beer)

ArchitectX was such a huge success, we’ve been busy with custom skin development since its release in January 2008. Greytness is our way of giving back to the DNN community which has been a big part of our success.

About Greytness

As its name suggests, Greytness is a single color grey skin (more colors soon). It includes 18 containers which can be arranged with great flexibility in its 21 panes.

Greytness is written in valid XHTML 1.0 Transitional, valid CSS level 3 code, and does not contain any tables.

Our commitment to Web Standards

Adammer is a W3C Contributing Supporter.

We hope Greytness will help developers create more DNN skins that comply with W3C, WAI, and Rehabilitation Act Section 508 standards.

Greytness is a clean, simple, and sleek skin that we encourage developers to use as a reference for techniques to create more standards compliant and accessible DNN skins.

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/.

We’ve also modified the search result item layout to make the page easier to read.

NOTE: DNN 4.x ONLY, not compatible with DNN 5.x.

1. Download our custom SearchResults.aspx file.
2. Create a backup copy of you current file DNNROOT\Admin\Search\SearchResults.aspx
3. Overwrite existing file with the downloaded file DNNROOT\Admin\Search\SearchResults.aspx
4. Give it a try!

Leave a comment if you have any suggestions for improvement or just want to say how much you liked it.

Installation Instructions

1. Dowload our Custom Events Theme.
2. Extract downloaded file into directory: DNNROOT\DesktopModules\Events\Themes\
   You should now have a new directory named FullWidthLg in the Events\Themes directory.
   The FullWidthLg directory should contain a file named FullWidthLg.css
   e.g. DNNROOT\DesktopModules\Events\Themes\FullWidthLg\FullWidthLg.css
3. Apply the new theme to your Events Module.
   1. Select Settings from your Events Module.
   2. Expand the Events Module Settings.
   3. From the Theme/Skin select box, select FullWidthLg.
   4. Click Update.

Leave a comment if you have any suggestions for improvement or just want to say how much you liked it.

We will use 5 files for this tutorial.

1. FLVPlayer_Progressive.swf
   This is an Adobe created Flash file that will load our flash video and the video controller.
2. Corona_Skin_2.swf
   This is the video controller Flash file that will overlay our video to allow users to Play/Pause, Seek, and Mute the Flash video
3. expressInstall.swf
   This is another Adobe created Flash file that will communicate with the Adobe servers to install a Flash plugin if missing from the user’s browser.
4. swfobject.js
   This is a JavaScript file that will write the code necessary for the object include. Developed by Geoff Stearns, Michael Williams, and Bobby van der Sluis. http://code.google.com/p/swfobject/
5. OurVideo.flv
   This is our Flash video. We used Adobe Media Encoder to convert from Quicktime (.mov) to Flash Video (.flv) but there are many applications that can do this video conversion

Prerequisite:
If you are using a brand new install if IIS, you will need to enable the .flv mime type. If your site is hosted by a 3rd party this step may not be necessary as they have most likely added the mime type for Flash video to your web server already.

Adding .flv MIME type in IIS

1. Select the site to configure in IIS, right click and select “Properties”
2. Under HTTP Headers Tab, select “File Types” under the MIME Map section and select “New Type”
3. Type “.flv” as the associated extension and “video/x-flv” as the content type.
4. Select “OK” and you’re ready to fly!

STEP 1:
We need to upload the 5 files to our DNN server. By default DNN does not allow the upload of .flv and .js files using the DNN File Manager. You can add these extensions to the “File Upload Extensions” list at Host > Host Settings > Advanced Settings > Other Settings > File Upload Extensions, or you can FTP these files to your server.

1. We will create a new folder DNNROOT\Portals\0\includes and upload swfobject.js into it.
2. We will create a new folder DNNROOT\Portals\0\videos and upload FLVPlayer_Progressive.swf, Corona_Skin_2.swf, expressInstall.swf, and OurVideo.flv into it.

STEP 2:
We will add the HTML code to the HTML/Text Module to play the Flash Video

1. Create a new HTML/Text module on a DNN Page
2. Click “Edit Text” link
3. Click the “Source” button on the Editor. Located in the upper left-hand corner
4. Cut and Paste the following code into the Editor

<script src="/Portals/0/includes/swfobject.js" type="text/javascript"></script>
<object width="400" height="350" id="FLVPlayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
  <param name="movie" value="/Portals/0/videos/FLVPlayer_Progressive.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="scale" value="noscale" />
  <param name="salign" value="lt" />
  <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=/Portals/0/videos/Corona_Skin_2&amp;streamName=/Portals/0/videos/OurVideo&amp;autoPlay=false&amp;autoRewind=false" />
  <param name="swfversion" value="8,0,0,0" />
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="/Portals/0/videos/expressInstall.swf" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object width="400" height="350" type="application/x-shockwave-flash" data="/Portals/0/videos/FLVPlayer_Progressive.swf">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=/Portals/0/videos/Corona_Skin_2&amp;streamName=/Portals/0/videos/OurVideo&amp;autoPlay=false&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0" />
    <param name="expressinstall" value="/Portals/0/videos/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FLVPlayer");
//-->
</script>

5. Click “Update” link

That should be all you need. You should now see the Flash video with controller on your DNN page. The code should be fairly easy to modify if you need to change the location or your files or text that is displayed if the user does not have Flash installed.

Please leave a comment if you have any additional questions.

UPDATE:
Hosting the .swf and .flv files on another server

Below are instruction to host your flash video on another server but behave like it’s hosted on your server.

Example:
www.OurServer.com (our DNN server)
www.RemoteServer.com (some other server such as Amazon S3)

In this example we created a directory on www.RemoteServer.com named /videos and upload FLVPlayer_Progressive.swf, Corona_Skin_2.swf, expressInstall.swf, and OurVideo.flv

We kept the swfobject.js file on www.OurServer.com.

The update code will now look like this:

<script src="/Portals/0/includes/swfobject.js" type="text/javascript"></script>
<object width="400" height="350" id="FLVPlayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
  <param name="movie" value="http://www.RemoteServer.com/videos/FLVPlayer_Progressive.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="scale" value="noscale" />
  <param name="salign" value="lt" />
  <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=http://www.RemoteServer.com/videos/Corona_Skin_2&amp;streamName=http://www.RemoteServer.com/videos/OurVideo&amp;autoPlay=false&amp;autoRewind=false" />
  <param name="swfversion" value="8,0,0,0" />
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="http://www.RemoteServer.com/videos/expressInstall.swf" />
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object width="400" height="350" type="application/x-shockwave-flash" data="http://www.RemoteServer.com/videos/FLVPlayer_Progressive.swf">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=http://www.RemoteServer.com/videos/Corona_Skin_2&amp;streamName=http://www.RemoteServer.com/videos/OurVideo&amp;autoPlay=false&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0" />
    <param name="expressinstall" value="http://www.RemoteServer.com/videos/expressInstall.swf" />
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
<!--
swfobject.registerObject("FLVPlayer");
//-->
</script>

Notice we have fully qualified the URI for the .swf and .flv files.

This should be all you need to host your Flash video on another server and have it look as though it is hosted on your server.

Note: On some servers (due to their configuration), you may need to add a crossdomain.xml file to the root of the remote server to allow cross-domain access to your flash content.