Converting a Custom SharePoint 2010 Master Page into a Search Center Master Page 34

This is a topic that I’ve been asked probably a hundred times since the SharePoint 2010 bits were released. Before I get into how I solve it, I’ll provide a little back story. To quote from my upcoming book, Professional SharePoint 2010 Branding & UI Design:

There are three site templates to choose from when creating search sites in SharePoint 2010: Enterprise Search Center, Basic Search Center, and FAST Search Center. Unlike most other sites in SharePoint 2010, these sites do not have v4.master or even nightandday.master applied to them; instead, they have minimal.master applied to them.

If you have a custom master page that is based on v4.master, nightandday.master, or even one of the typical starter master pages and apply it to one of these search center sites, you notice that the search center doesn’t work properly. This is because the page layouts and pages that are created by default for these search center sites are hard coded specifically to work best with the way minimal.master is coded.

In fact, if you apply v4.master to one of the Search Centers, the search box seems to be removed from the page… when actually it is still on the page, just hiding up in the pop-out breadcrumb menu:
image
As you can tell, this is less than ideal. Also problematic is the fact that the default minimal.master that is applied to the search centers doesn’t really contain traditional navigation or ways of navigating back to the parent site. So how do you get custom branding to work with the search center in SharePoint 2010? You have some options:

  1. Create a new custom master page based on minimal.master
  2. Adjust the page layouts or pages in the search center, to use the standard content placeholders
  3. Nick Hadlee created a nice sandbox solution to fix this problem for you. In many cases this might be the best course of action if you are comfortable using 3rd party solutions: http://sp2010searchadapters.codeplex.com/ )

I used to recommend a different solution instead of option #3 there, but now I only use the sandbox solution to solve this problem for all my client work because it just works and customers typically are ok with installing sandbox solutions.

34 thoughts on “Converting a Custom SharePoint 2010 Master Page into a Search Center Master Page

  1. Reply Shailendra Sep 29, 2010 4:08 pm

    Hello Randy,
    Very nice and informative post. Just one question.
    You have used Enterprise search center, basic search center or FAST search center

  2. Reply Randy Drisgill Sep 29, 2010 4:15 pm

    The example shows Enterprise search center but I believe the other two would work the same. Note, I haven’t done much testing in Foundation yet. There could be something funky there.

  3. Reply Jeff Sep 30, 2010 1:21 pm

    Thank you! Very helpful! How come the quick launch menu doesnt show up?

  4. Reply Randy Drisgill Sep 30, 2010 1:36 pm

    Jeff: The default behavior of the search pages is to hide the left navigation and use the full page width to display search results. I’m sure you could work around this if you wanted, but it might need some massaging.

  5. Reply Shailendra Oct 1, 2010 4:00 am

    Hello,
    When your book “Professional SharePoint 2010 Branding and User Interface Design” will be published ?

    Seems that I need to read that from page to page

  6. Reply Jeff Oct 1, 2010 8:47 am

    Randy,

    I’m rather new when it comes to branding SharePoint sites, but as far as my quick launch problem goes I have been struggling to say the least. I have been making various changes to the searchmain.aspx page but have yet to achieve the results I want. Could you point me in the right direction?

    Also, I have noticed when I click on either of the tabs on the search page another ribbon appears briefly then it goes away? It’s a minor issue but I am worried my client will find it annoying.

    Your blog has been a huge help during this process and I for one will definitely be picking up a copy of your book.

    Thanks!

  7. Reply neodante Oct 3, 2010 10:53 pm

    Hi Randy,

    Every week Amazon notifies me of a new shipping date of your book. Just to say, we are waiting for it !!! :)

    Keep up the good work ! Great work.

    Best,
    Julien

  8. Reply Randy Drisgill Oct 3, 2010 11:02 pm

    @neodante – I know… Sorry about that everyone. I thought we were locked on the date, but recently it just went crazy. Wrox doesn’t send me updates so I see it on Amazon like everyone else. I don’t want to curse it, but I THINK it’s not moving anymore.

  9. Reply neodante Oct 3, 2010 11:13 pm

    Randy, don’t worry: we all know that writing a book is a huge work. Hope to see you at the Summit.

    Julien (I dont’ know why my pseudo on your blog is neodante…)

  10. Reply Vegard Oct 5, 2010 2:28 am

    Great post Randy – followed the steps and got the results I wanted in no time.

    Just one question: Is there any way to get the same global navigation on the search site as on other sites in the same site collection?

  11. Reply Tyler Oct 5, 2010 2:54 pm

    Hey Randy, great article. Could you distinguish in more detail what you mean by setting the master page as a site master page while leaving the v4.master as a system master page?

    Thanks

    -Tyler

  12. Reply Jeff Oct 6, 2010 7:10 am

    Tyler,

    When you go to site settings —>master page, you have the option of setting both the site master page and system master page.

    site master page- all the publishing pages

    system master page- all the forms and view pages

    Hope that helps

  13. Reply Tyler Oct 6, 2010 6:37 pm

    Thanks for clarifying Jeff

  14. Reply Peter Oct 14, 2010 4:49 pm

    Hi Randy,

    Another great post.

    Just a note. Something to be aware of when using this technique with the Basic Search Center is that the default provisioned pages (default.aspx, results.aspx etc) have code for the ribbon embedded in them. Using the technique above you end up with two ribbons and a whole lot of confusion on the page. What I’ve done in these cases is simply remove the ribbon container & ribbon code from the master page as it’s handled by the pages themselves.

    This is only applicable to the basic search template as the enterprise and fast search templates utilise the ribbon provided by the masterpage.

    Cheers
    Pete

  15. Reply Aysa Oct 23, 2010 11:08 am

    great post.. Thanks randy..

  16. Reply Gabriele Nov 2, 2010 10:55 am

    It doesn’t work for WSF 2010 + Search Server Express 2010 Basic Search Center. If you change the master page using WSF Master Page pickers like OrbitOne you does not view the global navigation menu and almost all action in “Look & feel” and “Site Action” generate an error.

  17. Reply Ronnie Phipps Nov 22, 2010 4:18 pm

    @ Peter,
    I have two ribbons showing up on my search page as well. I tried what you suggested, and it broke my search page. I removed the ribboncont div tag and all its contents.

  18. Reply Outernal Dec 8, 2010 10:19 pm

    I just applied the above steps to SP Foundation 2010 and Search Server Express 2010 using a basic search center and it WORKED LIKE A CHAMP:)
    Perhaps a difference for me… I installed the search center as a subsite of my main. When checking back in the v4.master (new one) I marked it as custom master in Designer. Boom! Awesome.
    Thanks man! Easy steps! I’ll be ordering your book too!

  19. Reply Jonathan P. Dec 22, 2010 3:09 pm

    I have done this and it worked great for applying my custom Master Page to the Search Center. However, the problem I’m having is that I don’t get any search results as an anonymous user, but authenticated it works perfectly. I’ve checked to make sure that everything is set to crawl and that crawl should index all aspx pages regardless of permissions, but I still get nothing…anyone have any ideas?

  20. Reply Joe Dec 23, 2010 8:53 am

    Great post, very useful in getting me out of a bind with a customer! Keep up the fantastic work.

  21. Reply Randy Drisgill Feb 22, 2011 7:33 pm

    For everyone having issues with double ribbon, I added an UPDATE to the post. I haven’t fully testd it, let me know what you think.

  22. Reply Tim Apr 1, 2011 7:26 am

    This should work as well to eliminate the double ribbon.

    - Don’t delete anything from the master.
    - In your css, add:

    body #s4-ribbonrow div#s4-ribbonrow {
    display:none;
    }

    It should be gone now without deleting any of the stuff in the top ribbon
    I’m still testing if it doesn’t delete anything on other pages or places, but so far it looks ok.

  23. Reply arien78 Apr 26, 2011 7:56 am

    Thanks Randy, this issue was a show stopper for the Migration from 2007 to 2010 for a major client.
    My Hero!!! :)

  24. Reply pais Jun 5, 2011 3:53 am

    Randy…thank you so much for this article. It was a great help. Much appreciated.

  25. Reply pinchii Sep 27, 2011 3:59 pm

    in reply to my own previous post:

    this fixed the yellow bar issue

    #s4-statusbarcontainer {
    display: none;
    }

    and I didnt notice the double bar pushing the “add webpart” menu down, but Tim’s CSS fix above did the trick…

    body #s4-ribbonrow div#s4-ribbonrow {
    display:none;
    }

    now my site search site is nice and functional ;)

  26. Reply Mark Beij Nov 18, 2011 8:54 am

    I did almost the same as Tim, only to find out that I should have read more of the comments:

    * Hide second ribbon */
    #s4-ribbonrow > div.s4-ribbonrowhidetitle {
    display: none;
    }

  27. Reply roncresswell Jan 8, 2012 6:35 pm

    I did it yet another way – again I should have finished reading first perhaps!

    /*hide any s4-ribbonrowhidetitle elements whose parents are s4-ribbonrowhidetitle elements*/
    /*(eliminate double ribbon)*/
    .s4-ribbonrowhidetitle > .s4-ribbonrowhidetitle
    {
    display:none;
    }

  28. Reply Wahid Saleemi Mar 1, 2012 10:58 am

    You’re a life saver Randy. How do you move the search box to the center of the page? It looks left justified. I tried applying padding to some css but can’t ever get it working right. Any tips? We want it to appear like the original search center.

  29. Reply david Mar 1, 2012 9:10 pm

    Thanks Randy for the tips. I tested, and the double ribbon goes away when taking out the s4-ribboncont, but for me the login menu on the far right of the ribbon also disappeared. Has anybody else encountered that?

  30. Reply klp Mar 30, 2012 9:51 am

    Thank you so much Randy! Your tutorial has worked out perfectly on my development environment from start to finish.

    If anyone is interested, you can take things even further and create one master template for entire site and depend on creating custom pages to help distinguish the look the feel of different sections on your site.

    If you do this process, then create a new enterprise search site. Attach your one master template to it. Then attach a new custom page (search) to it!

    By doing this, you can easily customize the look and feel of your search page, results page and advance results page, all through the ribbon! (They will act as web parts). You can also customize the look and feel of your new search site through the class’s and ID’s you have set from within the custom page layout you just created.

    Wahid, use margin:10px 0 0 250px; on .ms-sbtable, to make your text box look centered on your page. You may need to be more specific than that and use something like this…

    #myparent .ms-sbtable {
    margin…
    }

  31. Reply klp Mar 30, 2012 10:01 am

    The only other thing I would add to this tutorial is if the user already has a search box on his master template and is looking to complete this search site project, but with his/her same custom master template.

    My recommendation is to set your “top” search box, located in your header, to a CSS value of display:none, and then show it with JavaScript/jQuery on pages that are not associated to your search site! SharePoint 2010 needs JavaScript to run properly so I don’t feel bad in doing this.

  32. Reply Anonymous May 13, 2012 2:09 pm

    This is incredibly helpful information. I’m running into a problem in that I’ve used Basic Search Center and there’s no place to set a master page (as there is in root & all my publishing (sub) sites. Do I need to turn the publishing feature on?

    My “Look and Feel” choices are:
    Title, description, and icon
    Tree view
    Site theme
    Navigation

    Thanks in advance.

    Kathy

  33. Reply Randy Drisgill May 13, 2012 8:52 pm

    Kathy, turn on publishing, or you can apply master pages from SharePoint designer. Powershell is also an option.

  34. Reply Steve Jeffery May 26, 2013 4:50 am

    I know this might be a little late but just in case it helps someone. In my case I had a highly customised master page plus our client wanted customised search results. What this means is if you are authoring your own search results (and as Andy states, why wouldn’t you) then the above problems largely do not apply.

    However, search centres contain 5 pages only two of which are results. So in my case I did not want to have to rebuild the other three just to use my master page as that meant a lot more work. My solution was a hybrid of the above.

    By all means move the placeholdertitlebreadcrumb but I left it’s list navigation where it was to retain the breadcrumb feature. Regarding the CSS to resolve the duplicate ribbon, I put this in a custom placeholder as I wanted it to apply to the three standard SharePoint pages but not for two critical custom result pages, so I simply overrode the content with nothing in my pages. Et voila. A perfect solution without excess redevelopment.

    Many thanks for the article.

Leave a Reply