Geeks With Blogs
Rajiv Popat blog

Customizing - DotNetNuke Search Input - The Problem

In a Recent Project I had felt the need to customize the DotNetNuke search input. If you've used DotNetNuke Search Inputs before you might have realized that the search Input Module is a little limiting in terms of customization. So, basically the kind of search inputs that you can have in DotNetNuke (based on what I currently know) are:

Of course, you could customize this slightly or you could have another kind with a picture just by changing the module settings:

And Finally you can have one with a search button (which of course can also be further customized)

How Ever there are times where you might want to further customize this Module beyond the out of box customizations that are allowed by DotNetNuke. The Control of course is available under Admin/Search/SearchInput.ascx but then again changing core modules is not such a good idea, is it?

Recently I had small requirement on a project which uses DotNetNuke where I had to customize this input and display something like this:


Customizing - DotNetNuke Search Input - The Solution

Apparently, I didn't find anything out of the box in DotNetNuke that will let me reach this level of customization and modifying the core didn't seem like such a good idea anyways - So I started out by taking a copy of the Two Files - SearchInput.ascx and InputSettings.ascx and App_LocalResource Folder (which has the resource files). Created a New Folder Under DesktopModules Folder Called CutomizedSearch which now contained a Copy of those two files and the resource files inside a App_LocalResource sub folder. I started out by modifying the Code For SearchInput.ascx by Adding a new TR and moving the buttons in the next Row

Once  Done I Added A new Module Definition by replicating the exact settings that were present in the module definition for the default search input module. Once done I dropped the module on my site and executed it:

So Far So Good, Next I Set out to replacing the image with one I wanted using preferred DotNetNuke method of customization. For this I modified the resource files in my Customized Module's folder to point to the New Image.

Now, I Set out to write a New Container - my ultimate aim was to make the search box look like this -

For this I started out with the CSS (provided by highly efficient graphics person) and quickly wrote up quick Container Code which was some fairly simple HTML.

Zipped the container and uploaded it and allowed DNN to do the rest. Now that I was controlling the Title and area around the text box with the container the "Inside" (the actual control was still white) - I made minor modifications to TD's of SearchInput.ascx file that I had copied just to make sure the correct style were being applied to the body of the control as well, aligned the button within the TD and Ran the Code:

The Image on the left shows the basic point I had started out with Dot Net Nuke Search box. Image On the Right is where I had arrived. The lines of code that I wrote pertaining to Search - 0! Finally I topped it with a cherry - by setting the default text of search box exactly as needed in the Project and doing some more polishing:

Now that I'm done - I'm thinking - could this have been done in a simpler / better / more elegant way? Anyone out there who would rather do it differently?



Posted on Thursday, April 13, 2006 7:22 AM Cookbooks And Articles , DotNetNuke | Back to top

Comments on this post: Customizing the Dot Net Nuke Search Input

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © Rajiv Popat | Powered by: