Howard Bash
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.
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.
The search widget is a 7 levels deep DIV nightmare.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
ASKER
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...
Good luck...
ASKER
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.
ASKER
Here is my latest attempt at modifying the magnifier.
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.
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);
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 you know how to modify css on SharePoint pages?