A couple of weeks ago, my graphic designer handed me a design with the search box completely different than the standard DNN search web control (see the picture below).

Since I'm always preaching about how we need to make DNN not look like DNN, I agreed that we should give it a go. Since I didn't want to modify the core (KEY CONCEPT), I decided to create a copy of the control in the same folder and rename it CustomSearch.ascx. Since the inherits statement is the same at the top of the web user control, the search control has the same functionality as before. You can find the search control in the /admin/skins folder in your DNN installation.

In order to get the layout I wanted, I did modify the way this control was laid out. The text was as follows:

<%@ Control language="vb" CodeBehind="Search.ascx.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Controls.Search" %> <table cellpadding="0" cellspacing="0" border="0"> <tr><td width="184" height="24" background="/images/Header_06.gif" valign="middle"><asp:TextBox id="txtSearch" runat="server" CssClass="SearchBox" enableviewstate="False" MaxLength="255"></asp:TextBox></td>                         <td width="27" height="24"><asp:LinkButton ID="cmdSearch" Runat="server" CausesValidation="False" CssClass="SkinObject"></asp:LinkButton></td> </tr> </table> <%@ Control language="vb" CodeBehind="Search.ascx.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Controls.Search" %>

Next, I wanted to change what the user will click when they want to initialize the search. In the standard installation, the local resources set that the linkbutton in search.ascx will display the text "Search" next to the search box in the search.ascx control. Instead of the standard text, we are using an image. Since I also want to make sure that when we do an upgrade to the next version, the resources are not over-written, I am going to create a localized resource file that is only applied to this portal. I go to the languages tab under the admin menu and i have the ability there to edit the resource file and it will create a localized version of the text that only applies to the current portal. To change the text drill into Local Resources>Admin>Skins>App_LocalResources and click on Search.ascx. After confirming that you want to create a localized resource file for this portal, change the localized value text box to point to the location of your image. In my case, I made it say < IMG height="24" alt="Search" src="/images/header_07" width="27" border="0" >.

Now, if you look in your \admin\skins\app_localresources folder, you will see a new resx file called "Search.ascx.Portal-0.resx" where 0 equals your portal name.

The last thing to do is modify the styles to create the effect of rounded edges around the search entry and also give the font a little boost. If you noticed earlier, the HTML for the text box sets the CSSClass attribute for the search textbox to SearchBox and the table cell that holds it to SearchTD. Now I define the following styles in my skin.css and i am all set:

.SearchBox
{
 text-align:left;
 background-color: transparent;
 margin: 0px;
 height: 18px;
 width: 90%;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
 padding: 0px;
 color: #005ca7;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10pt;
 font-weight: bold;
 font-variant: normal;
 
}
.SearchTD
{
 background-image:url(/images/Header_06.gif);
 width:184px;
 height:24px;
}

Happy coding...