Category: Branding

Custom Search MasterPage for SharePoint 2010

I wish I could say that I was smart enough to have figured this one out for myself but I can’t. I was working on my first custom branded SharePoint 2010 site and the search screen was all messed up. The navigation was displaying doubled. It turns out that the search center out of the box used minimal.master. This uses the placeholders that are in v4.master in different way so the search box ends up in the breadcrumb pull down. At any rate, Randy Drisgill wrote a great and very easy to follow post about how to modify your custom masterpage to the search center. It took me longer to create the feature to deploy the new search masterpage than it did to make the modifications.

 

Update: Randy Drisgill has changed his approach to branding the search screens but here is his original text below.

 

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 (UPDATE: Here is a nice sandbox solution to help do this 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/ )
  3. Create a new custom master page with some minor adjustments for the way search centers work

For this post, we will focus on the third option. For simplicity, I will walk you through actually converting v4.master to work for the search centers. This can be useful if you want to show the typical SharePoint2010 navigation and UI that is normally hidden for the search center. The concepts here would work just as well with your own custom master page, in fact I have tried it a couple times with my own. Also, I will assume you understand the basics of working with master pages in SharePoint Designer 2010:

  1. Make a copy of v4.master (or whatever other custom master page you are working with) and give it a new name like v4_searchcenter.master.
  2. Edit the new master page and locate and remove the PlaceHolderTitleBreadcrumb. This will allow the pop-out breadcrumb to still function properly:

    <asp:ContentPlaceHolder id=”PlaceHolderTitleBreadcrumb” runat=”server”>
    <SharePoint:ListSiteMapPath
    runat=”server”
    SiteMapProviders=”SPSiteMapProvider,SPContentMapProvider”
    RenderCurrentNodeAsLink=”false”
    PathSeparator=””
    CssClass=”s4-breadcrumb”
    NodeStyle-CssClass=”s4-breadcrumbNode”
    CurrentNodeStyle-CssClass=”s4-breadcrumbCurrentNode”
    RootNodeStyle-CssClass=”s4-breadcrumbRootNode”
    NodeImageOffsetX=0
    NodeImageOffsetY=353
    NodeImageWidth=16
    NodeImageHeight=16
    NodeImageUrl=”/_layouts/images/fgimg.png”
    RTLNodeImageOffsetX=0
    RTLNodeImageOffsetY=376
    RTLNodeImageWidth=16
    RTLNodeImageHeight=16
    RTLNodeImageUrl=”/_layouts/images/fgimg.png”
    HideInteriorRootNodes=”true”
    SkipLinkText=”” />
    </asp:ContentPlaceHolder>

  3. Next, add the PlaceHolderTitleBreadcrumb back right before the PlaceHolderMain. This will allow the search center to inject the search box in a good location:

    <asp:ContentPlaceHolder id=”PlaceHolderTitleBreadcrumb” runat=”server”></asp:ContentPlaceHolder>
    <asp:ContentPlaceHolder id=”PlaceHolderMain” runat=”server”/>

  4. Move PlaceHolderPageTitleInTitleArea (and any supporting HTML) to a hidden panel because this placeholder isn’t used the same way in the search center:

    <asp:ContentPlaceHolder id=”PlaceHolderPageTitleInTitleArea” runat=”server” />
    <asp:Panel visible=”false” runat=”server”>
    <asp:ContentPlaceHolder id=”PlaceHolderPageTitleInTitleArea” runat=”server” />
    </asp:Panel>

  5. For v4.master you will also want to remove ClusteredDirectionalSeparatorArrow and <h2></h2>. It won’t make sense to show these at the top now:

    <SharePoint:ClusteredDirectionalSeparatorArrow runat=”server”/>
    <h2></h2>

  6. Next, several lines of CSS need to be added to make sure things look right for the search center. You can add them to the <head> section of the master page:

    <style type=”text/css”>
    /* remove left margin */
    .s4-ca {
    margin-left: 0px;
    }
    /* remove gray background at top (optional) */
    .srch-sb-results {
    background:transparent none repeat scroll 0 0;
    }
    /* clean up top padding on 1st search page */
    .srch-sb-main {
    padding-top: 20px;
    }
    /* remove centering on 1st search page (optional) */
    .srch-sb-results4 {
    margin: inherit;
    padding-left: 20px;
    }
    /* remove background color on 1st search page (useful for colored designs) */
    .ms-bodyareaframe {
    background-color: transparent;
    }
    /* —————————————— */
    /* — CSS that may be req. to reset the search styling — */
    /* —————————————— */
    /* fix height of area above search results */
    td.ms-titleareaframe, div.ms-titleareaframe, .ms-pagetitleareaframe {
    height: auto !important;
    }
    /* fix border color on search results */
    .ms-main .ms-ptabrx, .ms-main .ms-sctabrx, .ms-main .ms-ptabcn, .ms-main .ms-sctabcn {
    border-color: #eeeeee;
    }
    /* fix arrangement of body area on search results */
    .srch-sb-results {
    height: auto;
    }
    /* fix positioning of prefs and advanced link on results */
    .ms-sblink {
    display:block;
    }
    /* fix the color of the prefs and advanced link on results */
    .ms-sblink a:link, .ms-sblink a:visited, .ms-sblink a:hover {
    color:#0072BC;
    }
    </style>

    5. Save the new master page, and check in / publish as a major version and approve it. Apply this master page to only the search center, and apply it as site master page while leaving system master page set as v4.master.

UPDATE: Some commenters have pointed out that if you want to edit pages in the Search Center (and who doesn’t?) these changes result in a double ribbon scenario. I haven’t fully tested this fix, so I’d be curious to hear about the results, but it looks like this would fix it:

  1. Add <asp:ContentPlaceHolder id=”PlaceHolderGlobalNavigation” runat=”server”/> to the hidden panel.
  2. Remove <div id=”s4-ribboncont”>…</div> and ALL of its contents.
  3. Add in its place this line: <asp:ContentPlaceHolder ID=”SPNavigation” runat=”server”></asp:ContentPlaceHolder>

This should fix the double ribbon issue, but you also LOSE the top popout breadcrumb and the quick edit/save button at the top left of the ribbon.

Here are screenshots of the final result:
image
image
You can employ these same techniques on your own master pages to create search center specific branding.

If you had trouble following the code changes you can download the completed v4 search center master page: v4_SearchCenter.zip

Themes for your SharePoint 2010 environment

I spend most of my time working on custom branding projects using SharePoint. These are great projects and tend to be large custom dev projects. They also tend to have larger budgets. But what about those clients that want a different look and feel but don’t have the large budget. Use a custom theme or template. There are several packaged themes out there for SharePoint 2010 that provide you with a look and feel that while not unique does change the way that SharePoint looks. The themes also provide some level of customization either during the purchase process or after. One of the key things to take into account is that there is probably going to be some level of customization to be done after the fact.

SharePoint Packages: SharePoint Packages offers 5 different SharePoint 2010 themes. I have implimented these for several clients with great results. If you get the platnium package they work with all the OOB SharePoint site templates including MySites. The underlying CSS is not difficult to modify. There are two things to keep in mind with using these themes. Changes made to the theme are not reflected untill you do an IISreset and unapply the theme and reapply the theme to the site so make sure to do all your changes in dev and then put them out on production. The last is that the install process is manuall. You need to copy the files to the 14 hive and import them into the MasterPage gallery. Because of this while it does support branding MySites it is cumbersome for Personal sites. To truly automate this you would need to take all the branding files and include them in a WSP and use feature stapling. Not a big deal but requires a developer to do this.

 

PixelMill: I was at the SharePoint Conference 2011 and I went to the booth for these folks. It looks like they have interesting products. I have not implimented them yet. They do not support MySites according to their web site. It does look like it is easy to update the CSS after the fact.

SharePoint MasterPages: These people have been around for a while. They have a robust offering of SharePoint 2007 themes and new offerings for 2010. In addition, they also claim that their templates are ready for Office 365 which none of the others point out.

Bind Tuning: This site has several layouts, that feel less like SharePoint, and more like a custom branded site. You also have the ability to use a WYSIWYG editor to customize the OOB to get closer to your individual brand. The site does not list the SharePoint site templates that it supports. I have used these themes and while the price point is great and the customization is excellent it does not support feature stapling so if you want the theme to be applied automatically you will need to create a feature staple feature. The files for this theme do get compiled into a WSP so that does make deployment across the farm easier.

One thing that I like to caution people about when I am recomending a theme is make sure that the theme you choose is close to what you want the end result to look at. It doesn’t make a lot of sense for you to select a theme that uses rounded corners and gradients if you don’t like rounded corners and gradients. It will be lots of pain and angst to try to change a theme that significantly.

When Pigs Fly…

“Good design is obvious. Great design is transparent.” – Joe Sparano

I have had the good fortune to work with some very talented designers in my career. They have taught me about the difference between good design and great design. The good is something that when you look at it makes you say wow. The great is when you don’t even realize that it was designed well; when something is so intuitive that you instantly know how to find what you are looking for or know how it works. As a web developer it was my job to translate the vision of the designer into SharePoint and make sure that what is great in PhotoShop is great in SharePoint. It is that pixel perfect philosophy that I bring to my work integrating design into SharePoint.

I know that design is generally not the first thing you think about when you think SharePoint. In fact, design is generally the last thing you think about when you think of SharePoint. You think document management, team collaboration, intranets, you think ugly and unusable. By creating a user centric information architecture and implementing compelling visual design SharePoint can be transformed. I am a SharePoint architect at BlueMetal Architects. I have been using SharePoint as a platform for web content management and extranets since 2005. I specialize in applying custom design and brand to SharePoint. I work with clients to architect complex SharePoint solutions from a user perspective.

This blog is about handy development tricks that I use on a regular basis as well as topics of user experience, SharePoint design, and information architecture. At the end of the day I want visitors to the sites I build to say “Wow, that is SharePoint?”