Overview

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.

When using the DotNetNuke 4.x search and no results are returned (search didn’t find content that matched the search criteria), this code will display “No Search Results Found” instead of the displaying an empty search results page.

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!

We’ve noticed that most or our clients find the default DNN calendar font too small. That’s why we usually add our own Events Theme for use with our custom DNN skins. You can download it for free and see if it works for you.

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.

This tutorial describes one of the many ways to add a Flash Video (.flv file) with video controller to the Text/HTML Module in DNN.

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.

This is a very simple (and portable) SQL statement that will list the email addresses of all members of a DNN security role by the security role name.

This is useful if you use 3rd party newsletter or email listserv software and need the email addresses of all members of a DNN security role.

SELECT u.Email FROM Users u, UserRoles ur, Roles r
WHERE r.RoleID = ur.RoleID AND
ur.UserID = u.UserID AND
r.RoleName = 'Registered Users'

You can replace 'Registered Users' with any Security Role name.

This can be executed from the Host>SQL page or using the Microsoft SQL Server Management Studio.

Question: How can I add an HTML <form> element to the Text/HTML module in DNN?

Problem: When editors add a <form></form> tag to the Source of the Text/HTML module, the <form> tags are removed after they click the Update link on the “Edit Text/HTML” form.

Cause: ASP.NET only allows one form per page and by default creates its own form just inside the <body></body> tags.

Solution: Here’s an example form we will add to our Text/HTML module.

<form action="http://someURL.com" method="post">
<label for="firstName">Your First Name</label>
<input id="firstName" title="Your First Name" alt="Your First Name" type="text" />
<label for="lasttName">Your Last Name</label>
<input id="lasttName" title="Your Last Name" alt="Your Last Name" type="text" />
<input title="Submit Form" type="submit" value="Submit Form" />
</form>

Take note of the Form method and action values.

Locate your submit button input. In our example it is

<input title="Submit Form" type="submit" value="Submit Form" />

Add the onclick method using the method and action values like this:

<input title="Send Form" onclick="this.form.method='post'; this.form.action='http://SomeURL.com/';this.form.submit(); />

Next we remove the opening and closing <form></form>tags so we are left with the following code:

<label for="firstName">Your First Name</label>
<input id="firstName" title="Your First Name" alt="Your First Name" type="text" />
<label for="lasttName">Your Last Name</label>
<input id="lasttName" title="Your Last Name" alt="Your Last Name" type="text" />
<input title="Send Form" onclick="this.form.method='post'; this.form.action='http://SomeURL.com/';this.form.submit();" type="submit" />

We cut and paste this code into the Text/HTML Editor making sure to be in “Source” mode. (Make sure the “Source” button in the upper left-hand corner of the Editor is highlighted.)

If you need your action to be get not post you can change this.form.method='get'. This will add the form values as URL parameters.

If you want your form to open a new window on submit you can add this.form.target='blank' as well.

Special thanks to Mitchel Sellers for his blog about this subject.

Update:
A word about this.form.method='get'
Some browsers (we’re not naming names but you know who you are), can’t handle the length of the __VIEWSTATE URL parameter which is sent when using the get method. In cases where we have to use the get method for forms, we add the following JavaScript code at the top of our form to clear the __VIEWSTATE value. This is not “best practices” but allows the solution above to work when using some “popular” browsers.

<script type="text/javascript">
//<![CDATA[
document.getElementById("__VIEWSTATE").value='';
//]]>
</script>