Customising the search box Ui in SharePoint 2016

%3CLINGO-SUB%20id%3D%22lingo-sub-194384%22%20slang%3D%22en-US%22%3ECustomising%20the%20search%20box%20Ui%20in%20SharePoint%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-194384%22%20slang%3D%22en-US%22%3E%3CP%3EHi%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20been%20asked%20to%20improve%20the%20appearance%20of%26nbsp%3B%20a%20search%20box%20that%20is%20centrally%20(%20don't%20ask!)%20%26nbsp%3Bsituated%20on%20a%20SharePoint%202016%20publishing%20site%20landing%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20can%20toggle%20with%20Search%20box%20web%20part%20settings%20to%20switch%20between%20search%20center%20and%20a%20custom%20search%20results%20page%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22search%20options.PNG%22%20style%3D%22width%3A%20180px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F34283i6539408D79F0796C%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22search%20options.PNG%22%20alt%3D%22search%20options.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHere%20the%20issue%20is%20how%20do%20I%20change%20the%20height%20as%20it%20looks%20a%20bit%20odd%20on%20the%20page%20%3A(%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22site%20search%20bar.PNG%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F34282i348C829422EA2C4B%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22site%20search%20bar.PNG%22%20alt%3D%22site%20search%20bar.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EWith%20the%20custom%20results%20page%20option%20issue%20is%26nbsp%3Bconversely%2C%20%26nbsp%3Bthe%20width%20-%20the%20entire%20web%20part%20zone%20is%20filled!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Custom%20search%20results.PNG%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F34284iA33A09DF1D269E38%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22Custom%20search%20results.PNG%22%20alt%3D%22Custom%20search%20results.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EIdeally%20I%20want%20the%20users%20to%20have%20a%20consistent%20search%20experience%20on%20the%20intranet%26nbsp%3Bso%20I%20am%20thinking%20I%20should%20go%20for%20the%20first%20option.%26nbsp%3B%20Therefore%2C%20If%20the%20problem%20is%20a%20CSS%20style%20that%20is%20being%20overridden%20then%20any%20pointers%20will%20be%20useful%26nbsp%3BNote%2C%20there%20is%20an%20%26nbsp%3Bunderlying%20(archaic)%20custom%20responsive%20master%20page%20%2B%20CSS%20%2BJS%20which%20I%20do%20want%20to%20replace%20once%20the%20business%20is%20happy%20with%20the%20searching%20capability.%3C%2FP%3E%3CP%3E%3CEM%3EI%20am%20thinking%20of%20the%20Enable-PnPResponsiveUI%20--%26gt%3B%20Classic%20Team%20Site%20(STS%230)%20but%20still%20need%20to%20deal%20%26nbsp%3Bresponsive%20UI%20Page%20Layouts.%20%3C%2FEM%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-194384%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPublishing%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESearching%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%202016%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-195863%22%20slang%3D%22en-US%22%3ERe%3A%20Customising%20the%20search%20box%20Ui%20in%20SharePoint%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-195863%22%20slang%3D%22en-US%22%3E%3CP%3EAll%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20hadn't%20had%20a%20chance%20to%20look%20at%20this%20today%20but%20should%20tomorrow%20-%20when%20I%20clear%20the%20last%20P1%20%3B)%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-195461%22%20slang%3D%22en-US%22%3ERe%3A%20Customising%20the%20search%20box%20Ui%20in%20SharePoint%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-195461%22%20slang%3D%22en-US%22%3E%3CP%3EHere's%20how%20you%20can%20adjust%20the%20size%20of%20searchbox.%20You%20can%20use%20similar%20technique%20to%20adjust%20the%20size%20of%20webpart%20zone%20on%20custom%20results%20page.%3C%2FP%3E%3CP%3E%3CA%20href%3D%22http%3A%2F%2Fwww.geekmungus.co.uk%2Fgeneral-it%2Fchangesizeofsearchboxwebpart-sharepoint2013%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttp%3A%2F%2Fwww.geekmungus.co.uk%2Fgeneral-it%2Fchangesizeofsearchboxwebpart-sharepoint2013%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-195381%22%20slang%3D%22en-US%22%3ERe%3A%20Customising%20the%20search%20box%20Ui%20in%20SharePoint%202016%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-195381%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20not%20sure%20if%20I%20got%20your%20question%20correct%2C%20but%20if%20you%20want%20to%20style%20a%20search%20box%20webpart%20you%20can%20copy%20and%20modify%20the%20oob%20display%20template%20for%20the%20search%20box.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20the%20webpart%20settings%20of%20the%20search%20box%20you%20can%20then%20select%20the%20display%20template%20that%20shall%20be%20used%20by%20the%20search%20box.%20I'm%20currently%20on%20the%20wrong%20device%20so%20I%20cannot%20double%20check%20it%2C%20but%20im%20pretty%20sure%20I%20did%20this%20some%20time%20ago.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Regular Contributor

Hi

 

I have been asked to improve the appearance of  a search box that is centrally ( don't ask!)  situated on a SharePoint 2016 publishing site landing page.

 

I can toggle with Search box web part settings to switch between search center and a custom search results page:

search options.PNG

 

Here the issue is how do I change the height as it looks a bit odd on the page :(

 

site search bar.PNG

With the custom results page option issue is conversely,  the width - the entire web part zone is filled!

 

Custom search results.PNG

Ideally I want the users to have a consistent search experience on the intranet so I am thinking I should go for the first option.  Therefore, If the problem is a CSS style that is being overridden then any pointers will be useful Note, there is an  underlying (archaic) custom responsive master page + CSS +JS which I do want to replace once the business is happy with the searching capability.

I am thinking of the Enable-PnPResponsiveUI --> Classic Team Site (STS#0) but still need to deal  responsive UI Page Layouts.

3 Replies

I'm not sure if I got your question correct, but if you want to style a search box webpart you can copy and modify the oob display template for the search box.

 

In the webpart settings of the search box you can then select the display template that shall be used by the search box. I'm currently on the wrong device so I cannot double check it, but im pretty sure I did this some time ago.

Here's how you can adjust the size of searchbox. You can use similar technique to adjust the size of webpart zone on custom results page.

http://www.geekmungus.co.uk/general-it/changesizeofsearchboxwebpart-sharepoint2013

 

All,

 

I hadn't had a chance to look at this today but should tomorrow - when I clear the last P1 ;)