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.
LVL 1
Howard BashSenior Software EngineerAsked:
Who is Participating?
 
Walter CurtisSharePoint AEDCommented:
0
 
Walter CurtisSharePoint AEDCommented:
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?
0
 
Howard BashSenior Software EngineerAuthor 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.
0
Increase Security & Decrease Risk with NSPM Tools

Analyst firm, Enterprise Management Associates (EMA) reveals significant benefits to enterprises when using Network Security Policy Management (NSPM) solutions, while organizations without, experienced issues including non standard security policies and failed cloud migrations

 
Howard BashSenior Software EngineerAuthor 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...
0
 
Walter CurtisSharePoint AEDCommented:
You may need to modify the procedure because of variations in your environment.
0
 
Howard BashSenior Software EngineerAuthor Commented:
My environment is SharePoint online (OOTB).
0
 
Walter CurtisSharePoint AEDCommented:
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...
0
 
Howard BashSenior Software EngineerAuthor 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.
0
 
Howard BashSenior Software EngineerAuthor 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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.