Return to Snippet

Revision: 45072
at February 3, 2012 12:30 by rumremix


Updated Code
<!--in master page , replace -->


<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
		</asp:ContentPlaceHolder>

<!--with -->

<div class="s4-notdlg" id="searchBoxOuter">
		<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
		</asp:ContentPlaceHolder>
	</div>

<!--then add the following css, pointing to your image (here called 'searchBox.png'). Additional options are commented out. -->

<style type="text/css">
#searchBoxOuter {width:215px; height:27px; background: url('images/searchBox.png')  no-repeat; margin-top:3px; /*position:absolute; right:27px; top: 27px;*/}
/*#searchBoxOuter:hover { background: url('images/bg-search.png') 0 -30px no-repeat;}*/
.s4-search INPUT.ms-sbplain {background-color:transparent; background: none; border:none !important; width:180px !important; height:24px !important; font-size:13px; color:#77a22f; padding:3px 0 0 6px !important;  font-style:italic;}
 .s4-search .srch-gosearchimg {	background-color:transparent; background-image:none; visibility:hidden;}
 input.s4-searchbox-QueryPrompt {font-size:13px !important; }



</style>

Revision: 45071
at April 23, 2011 08:50 by rumremix


Updated Code
<!--in master page , replace -->


<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
		</asp:ContentPlaceHolder>

<!--with -->

<div class="s4-notdlg" id="searchBoxOuter">
		<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
		</asp:ContentPlaceHolder>
	</div>

<!--then add the following css, pointing to your image (here called 'searchBox.png'). Additional options are commented out. -->

<style type="text/css">
#searchBoxOuter {
	width:215px; height:27px; background: url('images/searchBox.png')  no-repeat; margin-top:3px; /*position:absolute; right:27px; top: 27px;*/
}

/*#searchBoxOuter:hover {
	 background: url('images/bg-search.png') 0 -30px no-repeat; 
}*/

.s4-search INPUT.ms-sbplain {
	background-color:transparent; background: none; border:none !important; width:180px !important; height:24px !important; font-size:13px; color:#77a22f; padding:3px 0 0 6px !important;  font-style:italic;
}

.s4-search .srch-gosearchimg {
/	background-color:transparent; background-image:none; visibility:hidden;
}

 input.s4-searchbox-QueryPrompt {
	font-size:13px !important; 
}


</style>

Revision: 45070
at April 23, 2011 08:50 by rumremix


Initial Code
<!--in master page , replace -->


<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
		</asp:ContentPlaceHolder>

<!--width -->

<div class="s4-notdlg" id="searchBoxOuter">
		<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
		</asp:ContentPlaceHolder>
	</div>

<!--then add the following css, pointing to your image (here called 'searchBox.png'). Additional options are commented out. -->

<style type="text/css">
#searchBoxOuter {
	width:215px; height:27px; background: url('images/searchBox.png')  no-repeat; margin-top:3px; /*position:absolute; right:27px; top: 27px;*/
}

/*#searchBoxOuter:hover {
	 background: url('images/bg-search.png') 0 -30px no-repeat; 
}*/

.s4-search INPUT.ms-sbplain {
	background-color:transparent; background: none; border:none !important; width:180px !important; height:24px !important; font-size:13px; color:#77a22f; padding:3px 0 0 6px !important;  font-style:italic;
}

.s4-search .srch-gosearchimg {
/	background-color:transparent; background-image:none; visibility:hidden;
}

 input.s4-searchbox-QueryPrompt {
	font-size:13px !important; 
}


</style>

Initial URL


Initial Description
This is the quickest way to style the search bar. It involves creating one single image that includes both the input area and search button.

Initial Title
style the search bar in sharepoint 2010

Initial Tags
css, search, style, sharepoint

Initial Language
CSS