customize search box in sharepoint 2010
Add Search To Master Page or enable search box in masterpage
To style the Search Button
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:::::::::::::::::: */
<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: