SharePoint 2013 Searchbox Branding

Howard Bash
Howard Bash used Ask the Experts™
on
I am looking to rebrand a SharePoint site.  One task is to modify the Search Box.  I need to change the search magnifier, the search textbox and the dropdown of filters.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Walter CurtisSharePoint AED
Distinguished Expert 2018

Commented:
the good news; yes, the search box can be modified.  The maybe bad news; you need to use the browser development tools and determine which css to modify and if you do want something more apply jQuery styling and bells and whistles.

Do you know how to modify css on SharePoint pages?
Howard BashSenior Software Engineer

Author

Commented:
Yes.  I have been branding the site by noodling with dev tools and jQuery to play with the master page and built a CSS file plus some jQuery mods into the master page as a result.

The search widget is a 7 levels deep DIV nightmare.
SharePoint AED
Distinguished Expert 2018
Commented:
Howard BashSenior Software Engineer

Author

Commented:
I had found that link and tried to modify the HTML template associated with the search, but it didn't have any affect.  Also,  I tried to roll back to the OOTB file and that failed telling me that the file was in use and so I couldn't replace it...
Walter CurtisSharePoint AED
Distinguished Expert 2018

Commented:
You may need to modify the procedure because of variations in your environment.
Howard BashSenior Software Engineer

Author

Commented:
My environment is SharePoint online (OOTB).
Walter CurtisSharePoint AED
Distinguished Expert 2018

Commented:
The article as well as my experiences are with SharePoint on-premise. I am not sure how to do it with SharePoint online.

Good luck...
Howard BashSenior Software Engineer

Author

Commented:
This aspect,  one would think (apparently not),  would be much the same.  Both are SharePoint 2013,  they both have masterpage folder and themes folders and all the pieces called out.  But somehow it just doesn't seem to work.  I have trashed the magnifier, putting another image in it's place,  but the image isn't the size and in the position on a grid of images that the code wants or expects.
Howard BashSenior Software Engineer

Author

Commented:
Here is my latest attempt at modifying the magnifier.  
var oldSrc = "/_layouts/15/images/searchresultui.png?rev=44#ThemeKey=searchresultui";
var newSrc = 'https://mysitehost/sites/PublishingSandbox/_catalogs/masterpage/HCP/customGo.png';

$('img[src="' + oldSrc + '"]').attr('src', newSrc);

Open in new window


This code runs and replaces the magnifier with a blank image, not the image I specified (and confirmed it exists).  Also,  the search button no longer drops down the filter.

So,  the code above finds the image, replaces it (poorly) and then the search magnifier no longer works.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial