SharePoint 2010 Branding: Use Caution When Branding the Search Box

While working on a custom SharePoint 2010 master page I had a situation where the ContentPlaceHolder called PlaceHolderSearchArea was rending the search box in a way that was not meeting the requirements set forth in the design.   Instead of trying to mess with changing the way the content was being rendered into the ContentPlaceHolder I thought I could take a short cut and just set it’s visibility to false, wrap the SmallSearchBox delegate control with the styles and images I wanted and then place them outside of the ContentPlaceHolder.

Initially this seemed to work out well and I was very happy with the results.   I had seen several other people recommend doing this in SharePoint 2007 so I figured there wouldn’t be any issue in SharePoint 2010.   That assumption was very wrong.

About a week after I had deployed the branding into our development environment I had a person who was working on InfoPath forms tell me that there was a problem with SharePoint.   He was getting the error “This page has been modified since you opened it” each time he tried to create a workflow on a document library.  After a bit of troubleshooting I was able to determine that the issue was indeed caused by a problem in our custom master page…  I just didn’t know what was causing the issue.     I spent the next few hours going line by line through the master page looking for any potential issues.    Finally I decided to start taking chunks of the custom master page and placing them into the default V4.master until something broke.    After about another hour of fiddling around I located the problem.    It was caused by a combination of setting the ContentPlaceHolder’s visibility to false and placing the search delegate control outside of that place holder.

To resolve the issue I created a custom control that inherits from SearchBoxEx.   In the control I had it render out the additional custom branding I needed.  I then created a new control feature which would cause my new control to be rendered instead of the default SearchBoxEx whenever the delegate control SmallSearchInputBox was rendered. 

I deployed the update solution package and then created a new workflow on a document library.   Success!

0 thoughts on “SharePoint 2010 Branding: Use Caution When Branding the Search Box”

  1. Dear Mike

    I hope you are well. I am trying to brand my search text box on my sharepoint 2010 I just need to change the image and put a border around the text box. Could you kindly show me how to do this trick please. Many thanks

    Regards

    Rodolfo

    1. The key to making minor changes like that is to modify the CSS. I recommend using the IE 8 developer toolbar to investigate the styles being applied directly to the textbox and the surrounding tags. You can then create a custom CSS and attach it to your master page to override these settings.

  2. Whew, this can be quite a pain! I am also just trying to add a border around the search box. I””ve tried playing with some custom css but can never seem to change the search box at all… I will try the IE8 dev toolbar to see if there is a class I””m missing. It seems like other sites are suggesting an approach like you took but I just want to add a border 🙂

  3. Thanks for the IE8 Dev toolbar suggestion, that thing ROCKS! Well to answer my own question for future people searching for this…

    Here is the class that I had to modify to put a border around the input box.

    ms-sbcell

    * I just added a 1 px solid colored border and it put it around the input box and the search button. I am still working on getting a border around the scopes box. Tried ms-sbscopes but no go, if I find it I will post here 🙂

  4. Hi

    I”ve read what you had to say here and maybe I”m just too dumb. We”re experiencing the same “This page has been modified since you opened it” error on custom master. Could you perhaps give some more detail to assist me in debugging this issue on our masterpages?

Leave a Reply