Advanced Search

style the search bar in sharepoint 2010

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!--in master page , replace -->
  2.  
  3.  
  4. <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
  5. 			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
  6. 		</asp:ContentPlaceHolder>
  7.  
  8. <!--with -->
  9.  
  10. <div class="s4-notdlg" id="searchBoxOuter">
  11. 		<asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
  12. 			<SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>
  13. 		</asp:ContentPlaceHolder>
  14. 	</div>
  15.  
  16. <!--then add the following css, pointing to your image (here called 'searchBox.png'). Additional options are commented out. -->
  17.  
  18. <style type="text/css">
  19. #searchBoxOuter {width:215px; height:27px; background: url('images/searchBox.png')  no-repeat; margin-top:3px; /*position:absolute; right:27px; top: 27px;*/}
  20. /*#searchBoxOuter:hover { background: url('images/bg-search.png') 0 -30px no-repeat;}*/
  21. .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;}
  22.  .s4-search .srch-gosearchimg {	background-color:transparent; background-image:none; visibility:hidden;}
  23.  input.s4-searchbox-QueryPrompt {font-size:13px !important; }
  24.  
  25.  
  26.  
  27. </style>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.