customize search box in sharepoint 2010

Add Search To Master Page or enable search box in masterpage

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




To style the Search Button 



/*Search Box Styles*/
.s4-search input.ms-sbplain{
  margin-top:5px!important;
  background:url(../images/search_left.png) no-repeat; 
border:0 none !important; 
height:16px; 
padding:4px 2px 2px 9px; 
color:#666;
  font-size:.85em;
  font-style:normal;}
.s4-search .ms-sbgo{padding-top:5px;}
.s4-search .ms-sbgo a{ 
  margin-top:5px;
  background:url(../images/search_btn.png) no-repeat; 
  width:27px; height:22px; display:block; }
.s4-search .srch-gosearchimg, .s4-search .ms-sbgo span{display:none; }
.adminBar .ms-sbrow a, .ms-sbcell{margin:0; padding:0;}


Download Images Used:




For SharePoint Foundation Search box CSS

/* ::::::::::::::::::Search:::::::::::::::::: */


.s4-search{
padding:0px !important;
margin-right: 5px;
}
.s4-search select,.s4-search input{
/* [ReplaceColor(themeColor:"Light2-Lighter")] */
border:1px solid #e3e3e3 !important;
color:#476382;
float:left;
/* [ReplaceColor(themeColor:"Dark2")] */ color:#476382;
}
.s4-search select{
height:21px;
font-family:Verdana,Arial,sans-serif;
font-size:9pt;
padding:0 3px;
margin:3px 3px 0 0;
}
.s4-search input,.s4-search .ms-searchimage{
float:left;
/* [RecolorImage(themeColor:"Light1-Lighter",method:"Blending",includeRectangle:{x:0,y:511,width:1,height:18})] */
background:none;
/* [ReplaceColor(themeColor:"Light1")] */ background-color:#fff;
}
.s4-search input{
font-size:1.1em ;
height:16px;
padding:1px 3px 2px;
border-right:1px solid #e3e3e3 !important;
width:130px !important;
margin-top:3px;
}
.s4-search .ms-searchimage{
/* [ReplaceColor(themeColor:"Light1")] */ background-color:#fff;
background-image:url('PARTCAT-images/search-btn.png');
background-repeat:no-repeat;
/* [ReplaceColor(themeColor:"Light2-Lighter")] */ border:0px solid #e3e3e3 !important;
height:16px;
width:43px;
padding:2px 3px 1px;
border-left:none !important;
margin-top:3px;
margin-left:5px;
}

#onetIDGoSearch {

width:43px !important;
height:15px !important;
}

#onetIDGoSearch img {
display:none;
width:43px !important;
height:15px !important;
}

.ms-searchimage > .s4-clust {
    width:43px !important;
    height:15px !important;
   
}

.s4-help{
display:inline-block;
margin:4px 4px 3px 21px;
}

/* ::::::::::::::::::Search:::::::::::::::::: */





No comments:

Powered by Blogger.