I’ve finally deployed the DotNetNuke site I’ve been working on. After deployment is when the most obvious things pop up.

For instance, in DotNetNuke when you search for something in the site it will return a list of links to what it finds. What it won’t do is display something friendly like “No Search Results Found” if it doesn’t find anything. Dumb and not very user friendly.

I did find what I thought would be the solution at ecktwo, but it didn’t work in Firefox due to the

document.getElementById("search").innerHTML

which doesn’t work in Firefox within a table, which is what the Search Results are generated using the ASP.NET grid view. So, I thought I’d take a stab at building something that worked for both IE and Firefox.

Make a copy of your admin\Search\SearchResults.ascx file and then open the file in notepad. Apply the following code that I’ve highlighted in red:

<%@ Control Language=”vb” AutoEventWireup=”false” Explicit=”True” Inherits=”DotNetNuke.Modules.SearchResults.SearchResults” CodeFile=”SearchResults.ascx.vb” %>

<asp:Datagrid id=”dgResults” runat=”server” AutoGenerateColumns=”False” AllowPaging=”True” BorderStyle=”None”
PagerStyle-CssClass=”NormalBold” ShowHeader=”False” CellPadding=”4″ GridLines=”None”>
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:Label id=lblNo runat=”server” Text='<%# DataBinder.Eval(Container, “ItemIndex”) + 1 %>’ CssClass=”SubHead”>
</asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<ItemTemplate>
<asp:HyperLink id=”lnkTitle” runat=”server” Name=”result” CssClass=”SubHead” NavigateUrl='<%# FormatURL(DataBinder.Eval(Container.DataItem,”TabId”),
DataBinder.Eval(Container.DataItem,”Guid”)) %>’ Text='<%# DataBinder.Eval(Container.DataItem, “Title”) %>’>
</asp:HyperLink>&nbsp;-
<asp:Label id=”lblRelevance” runat=”server” CssClass=”Normal” Text='<%# FormatRelevance(DataBinder.Eval(Container.DataItem, “Relevance”)) %>’ >
</asp:Label><BR>
<asp:Label id=”lblSummary” runat=”server” CssClass=”Normal” Text='<%# DataBinder.Eval(Container.DataItem, “Description”) + “<br>” %>’ Visible=”<%# ShowDescription() %>”>
</asp:Label>
<asp:HyperLink id=”lnkLink” runat=”server” CssClass=”CommandButton” NavigateUrl='<%# FormatURL(DataBinder.Eval(Container.DataItem,”TabId”),
DataBinder.Eval(Container.DataItem,”Guid”)) %>’ Text='<%# FormatURL(DataBinder.Eval(Container.DataItem,”TabId”),
DataBinder.Eval(Container.DataItem,”Guid”)) %>’>
</asp:HyperLink>&nbsp;-
<asp:Label id=”lblPubDate” runat=”server” CssClass=”Normal” Text='<%# FormatDate(DataBinder.Eval(Container.DataItem, “PubDate”)) %>’>
</asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
<PagerStyle CssClass=”NormalBold” Mode=”NumericPages”></PagerStyle>
</asp:Datagrid>

<div id=”NoResults”>
<h3 class=”red” style=”text-align:center”>No Search Results Found</h3>
</div>
<script language =”Javascript”>
var search;
search = document.getElementsByName(“result”);

if (search.length == 0) {
document.getElementById(“NoResults”).style.display=’block’;
}
else {
document.getElementById(“NoResults”).style.display=’none’;
}
</script>

Be sure to add the Name=”result” snippet to the asp:Hyperlink in the code above. It’s easy to miss.

Save that and you should now have a spiffy new message displayed when no results are found. Use whatever CSS you want to style the message.

I’ve had a few questions/comments on using Custom Styles with FCK Editor, so here’s a style that I created that will format any link you apply it to as a red button that changes color on mouse over.

Add this CSS to the fck.css and portal.css files in you PORTALS folder.

/* Both variations --a.color-- and --span.color a--
    are needed to handle DNN's span applications
    not being consistent */

.red_button, a.red_button:link, a.red_button:visited,
 span.red_button a, span.red_button a:link,
 span.red_button a:visited {
        font-weight: bold;
	font-size:10px;
	color: #FFF;
	background-color:#C00;
	padding:4px 8px;
	text-decoration: none;
	border-top: 1px solid #DFDFDF;
	border-left: 1px solid #DFDFDF;
	border-bottom: 1px solid #333;
	border-right: 1px solid #333;
	}

a:hover span.red_button,
span.red_button a:hover {
	background-color:#900;
	border-top: 1px #31557f solid;
	border-left: 1px #31557f solid;
	border-bottom: 1px #666666 solid;
	border-right: 1px #666666 solid;
	text-decoration:none
}

Be sure to add the following to the fck.xml file, to append the style to the menu in the FCK editor.

<Style name="red_button" element="span">
  <Attribute name="class" value="red_button" />
</Style>

Hope this helps, post any questions in the comments.

Version 4.5.2 of DotNetNuke was released on May 29, 2007. Since I’m still heavily developing the site redesign for work in DotNetNuke, I downloaded the upgrade and installed it. It was a simple enough upgrade and worked flawlessly (as far as I can tell).

One thing did bug me. The SEARCH feature added two radio buttons next to the text area for the search, allowing users to search the site or the web. The web search uses Google (of course) and it even comes pre-filled with the DotNetNuke Google AdSense Client ID. This “feature” wasn’t in any of the preview releases, so it’s definitely like they tried to sneak that one in.

To disable the web/site search feature, you have to edit your skin file (it really should be an admin configurable feature). Just add the following, bold code to your search call:

< dnn:SEARCH runat="server" id="dnnSEARCH" showWeb=”False” showSite=”False” />

If you want to use your own Google ID, just locate the file at: admin/skins/App_LocalResources/Search.ascx.resx and change the client=pub-9770992166002654 to your own Google AdSense ID.

I’ve been working on implementing DotNetNuke at work for a few weeks now. After finally getting the hand of skinning DotNetNuke and building a custom skin that mimicked the look of the design provided by Marketing, I wanted to create a set of styles for formatting text. This would allow users to format text (and other elements) with a pre-set look and not have to use font-size, font-color and other outdated markup, thereby creating uniformity and smaller page/code sizes.

Well, after trying many attempts using the FCK Editor settings, I found the steps necessary to implement a set of custom CSS styles in DotNetNuke using the FCK Editor.

  1. Add your customs styles to portal.css in the portal root (Site Settings > Style Sheet) and save. These styles will be applied to your module text outside of the editor.
  2. Create a text file: FCK.xml. Here is where you will define styles to appear in the style list inside the FCK editor.
  3. Using the information in the FCK Editor Wiki help site, create your custom styles in FCK.xml. There should be an entry for each style you want to appear in the editor and in the order you want them to appear. See example below.
  4. Create a text file: FCK.css. These styles give the formatting to the styles you defined in FCK.xml so text in the editor will be formatted properly.
  5. Add your custom styles to FCK.css. This file contains ONLY your custom styles which are exactly the same as the custom styles you added to portal.css. There should be an entry for each style in FCK.xml you want to format.
    Using these lists limits the styles that appear in the editor to only those you want, rather than the long list of styles in portal.css.
  6. Upload FCK.css and FCK.xml to your portal root using the File Manger.
  7. Log in to your portal as Host and edit an HTML/Text module with the FCK Editor.
  8. Select “Show custom editor options”
    Select “Portal” for Settings Type.
  9. Expand “List of available styles for the editor”
    Select “URL” for Style list generation mode. Do not choose “Dynamic” or you will get a style list of garbage.
    Select “File” for Custom XML file, and select FCK.xml you uploaded to the root.
  10. Expand “Editor area CSS”
    Select “URL” for CSS Generator mode. Again, do not select “Dynamic”.
    Select “File” for Custom CSS file, and select FCK.css you uploaded to the root.
  11. Confirm “Apply custom settings to: Portal” and click “Apply”
    Close the FCK Editor custom options page and Cancel module editing.

  12. Refresh your browser with Ctl-F5 to force a refresh of the cache.

The list of styles should appear in the editor now. If you don’t see your styles and the formatting is not right, you might try deleting files in your cache. Also, check for mistakes in FCK.xml, FCK.css and portal.css. They must all be in sync and correct.

Here is a sample FCK.xml adapted from FCK:

<?xml version="1.0" encoding="utf-8" ?>

<Styles>
 <Style name="Image on Left" element="img">
  <Attribute name="style" value="padding: 5px; margin-right: 5px" />
  <Attribute name="border" value="2" />

  <Attribute name="align" value="left" />
 </Style>
 <Style name="Image on Right" element="img">
  <Attribute name="style" value="padding: 5px; margin-left: 5px" />

  <Attribute name="border" value="2" />
  <Attribute name="align" value="right" />
 </Style>

 <Style name="Title" element="span">
  <Attribute name="class" value="Title" />
 </Style>
 <Style name="Topic" element="span">

  <Attribute name="class" value="Topic" />
 </Style>
 <Style name="Custom Bold" element="span">
  <Attribute name="style" value="font-weight: bold;" />

 </Style>
 <Style name="Custom Italic" element="em" />
 <Style name="Title" element="span">
  <Attribute name="class" value="Title" />

 </Style>
 <Style name="Code" element="span">
  <Attribute name="class" value="Code" />
 </Style>

 <Style name="Heading H1" element="H1" />
 <Style name="Heading H2" element="H2" />
 <Style name="Custom Ruler" element="hr">

  <Attribute name="size" value="1" />
  <Attribute name="color" value="#ff0000" />
 </Style>

</Styles>

And corresponding FCK.css:

body, td {
font-family: Verdana, Sans-Serif;
font-size: 13px;
}

.Title {
font-family: Ariel, sans-serif;
font-size: 16px;
font-weight: bold;
color: red;
}

.Topic {
font-family: Ariel, sans-serif;
font-size: 14px;
font-weight: bold;
color: red;
font-style: italic;
}

.Bold {
font-weight: bold;
}

H1 {
font-family: arial, sans-serif;
font-size: 1.7em;
font-weight: bold;
color: #006699;
}

H2 {
font-family: arial, sans-serif;
font-size: 1.3em;
font-weight: bold;
color: #006699;
}

Those steps worked perfectly. Now I’ve just got to create the XML file to match the CSS file. I’ll go ahead and complain. It seems like there should be an easier way. Second, I don’t like the way it applies the styles. If I have a style “.red” (to make the text a specific shade of red) and I’ve got a style .bold (to make the font-weight:bold), DotNetNuke applies each one in a separate SPAN tag. I guess chaining CSS styles (span class=”red bold”) is too complicated.

Ugh! I guess this is the trade off. Moving the tedious task of menial updates to the users means uglier code underneath.

The decision was made at work to start moving content to a Content Management Systems. IT wants to move to mostly Microsoft products, so we chose DotNetNuke as the CMS platform.

I wasn’t overly excited. Much more info is already available for PHP systems like Drupal (or even WordPress), not to mention the size of their development community.

Anyway, DNN 4.5 seems to be a nice release. Much easier to install and I think I’m getting the hang of it. Thanks to Microsoft’s lack of standards support, a total CSS layout is out of the question. DNN likes to drop and add columns depending on where you’re at in the system and it requires a full page for the Inline Editor.

I did manage to generate a nice layout using a one row, three column table to hold my layout divs. This allows DNN to drop and add the columns without messing the formatting up.

This site has also be a great resource for skinning (creating a theme) for DotNetNuke. The Dreamweaver extension is also nice and gives you easy access to all the necessary placeholders for DNN content.