Often times we run into websites that have various design requirements. One of these requirements is the placement or layout of the search control. DotNetNuke (DNN) comes standard with a skin object that suffices for most projects, but there are times it falls short. I have recently taken the time to review what we did to allow for a left action search options with some graphic elements.
A standard search control for a DNN skin may look something like this
The control currently does not give any options for placing the search action on the left side of the entry box. To do so you need to create a secondary control option.
Step 1: In the "admin/skins/" directory which contains the control file for the standard search control, "search.ascx" make a copy of it.
Step 2: Rename the file to searchleft.ascx.
Step 3: Open up the searchleft.ascx file and change
"<asp:TextBox id="txtSearch" runat="server" CssClass="NormalTextBox" Columns="20" maxlength="255" enableviewstate="False"></asp:TextBox> <asp:LinkButton ID="cmdSearch" Runat="server" CausesValidation="False" CssClass="SkinObject"></asp:LinkButton>"
to
"<asp:LinkButton ID="cmdSearch" Runat="server" CausesValidation="False" CssClass="SkinObject"></asp:LinkButton> </span><asp:TextBox id="txtSearch" runat="server" CssClass="NormalTextBox" Columns="15" maxlength="255" enableviewstate="False"></asp:TextBox> </span>"
Save and exit.
Step 4: In your skin file add "<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/SearchLeft.ascx" %>"
Step 5: Modify your CSS to match the design requirements
Step 6: Review your results. Here is an example
