Link to home
Start Free TrialLog in
Avatar of Howard Bash
Howard BashFlag for United States of America

asked on

SharePoint 2013 Searchbox Branding

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.
Avatar of Walter Curtis
Walter Curtis
Flag of United States of America image

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?
Avatar of Howard Bash

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of Walter Curtis
Walter Curtis
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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...
You may need to modify the procedure because of variations in your environment.
My environment is SharePoint online (OOTB).
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...
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.
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.