The Search Input Box can be placed in any skin by adding it to the layout.master file of the skin. Most skins already have a SearchInput control but usually only renders a link. Because of this, be sure that if your layout.master file already has a SearchInput control, you use a unique ID on the one that you add.

The control can be styled very easily by using a combination of the ImageUrl, ButtonCssClass and TextboxCssClass properties.

The Search Control:

<portal:SearchInput id="SearchInputBox1" runat="server"
	LinkOnly="false"
	RenderAsListItem="false"
	ImageUrl="skinbase_magnifier.png"
	ButtonCssClass="searchbutton"
	TextboxCssClass="searchbox"
	OverrideWatermark="enter search terms"
	UseHeading="false"
	HideOnLoginPage="true"
	HideOnPasswordRecoveryPage="true"
	HideOnRegistrationPage="true"
	HideOnSearchResultsPage="true"
	HideOnSiteSettingsPage="true"
/>

The CSS:

.searchpanel {
    background-color: #000;
    border: 1px solid #CCC;
    float: left;
    height: 25px;
    margin: 0;
    padding: 0 5px;
}

.searchbox {
	background: none transparent;
	border: 0;
	color: #FFF;
	top: 5px;
}

.searchbutton {
	position: relative;
	top: 5px;
}

The Result:

Some Notes

• You should use unique classes for the ButtonCssClass and TextboxCssClass values.
• The ImageUrl is for using an image as the search button.
• The skinbase_ prefix on the ImageUrl value is used to instruct the SearchInput control to find the image in the base of the skin directory. For example, if the name of your image file is magnifier.png, your ImageUrl value would be skinbase_magnifier.png.
• You can change the watermark text to anything you like by adding OverrideWatermark="Your own watermark" to the SearchInput control. This feature is only available in mojoPortal 2.3.5.5 or higher.