Posted By

rumremix on 04/23/11


Tagged

css bar search style sharepoint 2010


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

jlaws0n


style the search bar in sharepoint 2010


 / Published in: CSS
 

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.

  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  

You need to login to post a comment.