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.
Howard BashSenior Software EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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?
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.
Walter CurtisSharePoint AEDCommented:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

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...
Walter CurtisSharePoint AEDCommented:
You may need to modify the procedure because of variations in your environment.
Howard BashSenior Software EngineerAuthor Commented:
My environment is SharePoint online (OOTB).
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...
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.
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft SharePoint

From novice to tech pro — start learning today.