Taming the DNN Search Function

As most people would agree, the DNN search funcion is a mighty untidy looking beast: it's not very customisable and it looks, quite frankly, horrible. For one thing, the number of the returned search item is not in line with the result. For another, the link that points to the resullt is duplicated. You get the actual page title as a link as well as a huge url string pointing to the same thing. So, your carefully designed skin breaks when the string pushes outside the page boundaries.

Anyway, fed up with this, I decided to get my hands dirty and put it right.

As ever, back up everything first and test this out on a local server. You can use any text editor you like, but you will get better results and gain more understanding by using Visual Studio (expensive) or Visual Web Developer 2008 (free!).

Ok, fire up your program of choice and open up your local copy of your website. In solution explorer, go to admin and open up SearchResults.ascx. This file contains the code that renders the search output on your page. First thing to do is locate the code beginning with:

<asp:HyperLink id="lnkLink" runat="server" CssClass="CommandButton" NavigateUrl=

This is the horrid super long link you get with your resuts. Select the entire <asp:HyperLink> tag and comment it out.

Next, locate at the top of the page the first instance of <asp:TemplateColumn>. Change this to <asp:TemplateColumn ItemStyle-VerticalAlign="Top">. This will sort out the result numbers for you. Save the page, browse to your site and perform a search. What a difference! Next, log in as admin and make sure only Show Description is ticked. Log out and search again. Looks miles better, doesn't it?

If your're feeling confident, go back to the SearchResults.ascx and play about with the properties of any element that takes your fancy (visual studio makes this sort of thing dead easy!). In my case, I added a horizontal line to seperate the resuts, or you could simply specify a colour in the AlternatingLineStyle section. I also centred the page numbers.

Check out what I have done at elegantsimplicity.com