You want to change the size of the search box web part, this is fairly straight forward when you know how.
1. Firstly get the name/ID of the search box. Open your SharePoint front page, right click in the search box and select “inspect element”, then in the Developer box you should see the search box ID listed, it will be something like: ct100…… make a note of this.
2. Now you have done this you need to create a small CSS file with the following in it:
<style>
#ctl00_ctl45_g_8d3c81ab_972c_4bd5_839f_bdc8c1a4707e_csr_sbox { /* Search Box */
width:250px;
height:30px;
}
</style>(Adjust the sizes as you need)
3. Now you want to save this in the correct location. Firstly open the front page of your SharePoint collection, click the cog to get the “Site Settings.” Click the “Design manager”, click on “3. Upload sites” make a note of the URL in my case this is: file://intranet.domain.com@80/_catalogs/masterpage/ open Windows explorer on your computer and map a network drive with this as the UNC path, you’ll need to change it to: \\intranet.domain.com\_catalogs\masterpage\ however.
4. Copy the css file you created into here somewhere, and take a note of the URL to it.
5. Open the front page of SharePoint, edit the page and insert a “Content Editor” web part from media and content. Stick the web part somewhere out of the way and give it a label so you can recognise it. Then paste in the URL to the CSS file so in my example the “content link” is: http://intranet.domain.com/_catalogs/masterpage/intranet/searchbox_size.css using the “Content Link”.
6. Once added, save and close. Hit refresh on the page and you should see that the search box has now changed in size! This stopped the weird two lined search box problem I was getting.
Useful Links