Creating a Design for SharePoint 2010 Global Navigation and Search Boxes (Wrox)

Summary: Learn how to design and customize the global navigation and the search box in Microsoft SharePoint Server 2010. The article includes an example of how to create a new master page and a new CSS file by using Microsoft SharePoint Designer.

Wrox logo

Wrox SharePoint Books

Applies to: Business Connectivity Services | Open XML | SharePoint Designer 2010 | SharePoint Foundation 2010 | SharePoint Online | SharePoint Server 2010 | Visual Studio

Author: Christian Stahl

Editors: WROX Tech Editors for SharePoint 2010 Articles

Contents

  • Introduction to Creating a Design for the Global Navigation and Search Box

  • Branding the Global Navigation in SharePoint

  • Creating a New Master Page and a New CSS File for Branding

  • Branding the Search Box

  • How to Customize the Search Input Box

  • How to Use jQuery to Set a Value for the Search Box

  • How to Extend the Search Box with a Pop-Up Keyboard

  • How to Customize the Scoped Search Box with a Custom Control

  • Conclusion

  • About the Author

  • Additional Resources

Branding consists of much more than product images and color palettes; it is also about making sure that a site has a well-organized user experience. By using master pages, page layouts, and cascading style sheets (CSS), you can create a consistent look and feel that you can easily update across all pages.

For example, style plays an important part in branding a SharePoint user interface, and you can change the way a page looks and behaves by modifying the font family, size of the fonts, or colors of a specific element, and do so by modifying a single CSS file. You can modify those styles directly in the master page, page layout, or site page; or by editing the code in the CSS file that is attached to the page.

This article focuses on tasks that you can perform by using SharePoint Designer to brand the global navigation in Microsoft SharePoint Server 2010.

Branding the Global Navigation in SharePoint

The global navigation scheme is important in a SharePoint site. The global navigation elements include links to sites and pages in the site collection, and it can contain links to other kinds of important sections on the site collection. The global navigation scheme helps to orient users so that they can easily move around the site, and it is especially important to branding and customizing a SharePoint site.

When you brand the global navigation, strive for simplicity and aesthetics. Allow for the possibility that users might rely on the site navigation more than they use search to find information. Place the navigation elements on the page where the users would expect them to be, and make those elements easy to use and understand. Don't expect your users to have patience with the design. The purpose of every navigation element on the SharePoint page should be obvious.

In SharePoint Server 2010, the global navigation renders with unordered lists and list items, and therefore provides a more standard model to customize. When you want to work with the functionality and the look and feel of the navigation at the same time, consider the SharePoint AspMenu control, its data source, and its cascading style sheets (CSS). The CoreV4.css file defines several classes that style the global navigation elements, and you can override some global elements by using a custom CSS file.

In the following example, you create a custom master page and a custom CSS file to change the default colors of the navigation list. To get the look and feel of the navigation to appear the way that you want it, you have several options. This example affects only the color of the navigation list, the color of hover, and the color of the selected tab, as shown in Figure 1.

Figure 1. Tab color selection

Tab color selection

Creating a New Master Page and a New CSS File for Branding

This section describes how to change the look and feel of the global navigation to meet a company's branding requirements. Use the following procedures to create a new master page that is based on a v4.master file, and to attach a new CSS file that contains classes.

Note

Master pages and page layouts are enabled by default only for site collection administrators.

To create a new master page

  1. Open SharePoint Designer 2010, click Sites, and then click Open Site.

  2. Type the URL to the site, for example, http://myserver, and then click Open.

  3. Click Site Objects in the navigation pane on the left side, and then click Master Pages. Click the icon to the left of v4.master to select the master page.

  4. Click Copy in the ribbon, and then click Paste. The file name is now v4_copy(1).master.

  5. Click the file, and then on the ribbon, click Check Out.

  6. In the File Information box, click the link to the file and rename it CustomMaster.master.

  7. Click outside the field, and then click Save.

  8. Click Edit File in Customization to open the file.

To create a new CSS file to attach to the new master page

  1. Click All Files in the left navigation pane, and then in window on the right side, click Style Library.

  2. On the ribbon, click File and then choose CSS from the menu.

  3. Rename the file to CustomCss.css.

To add a reference in the master page to CustomCss.css

  1. Click the CustomMaster.master tab, and add the reference in the code view. Type the following as a new row just below the row with SharePoint:CssLink.

    <SharePoint:CssLink runat=”server” Version=”4”/>
    <!--Custom CSS-->
    <SharePoint:CssRegistration name=”/Style Library/CustomCss.css” runat=”server” After=”corev4.css”/>
    
  2. Save the master page, and then click Yes in the dialog box.

    You can find the following default CSS classes for the global navigation in the corev4.css file on the SharePoint front-end web server. When you specify a new CSS file for your custom master page (for example, CustomCss.css), and your CSS file contains these classes, the classes that you define overwrite the classes in corev4.css. You can store CSS files such as CustomCss.css in another folder on the root site if you prefer. Paste the following CSS classes into CustomCss.css, and then save the file.

    /* Navigation list */
    .s4-tn{
    background-color:#00557B;
    padding:0px; margin:0px;
    }
    /* Global navigation */
    .s4-tn li.static > .menu-item{
    color:#fff; 
    white-space:nowrap;
    border:1px solid transparent;
    padding:4px 10px;
    line-height:12px;
    height:15px;
    }
    /* Hover */
    .s4-tn li.static > a:hover{
    background:url("/_layouts/Images/selbg.png") repeat-x left top;
    background-color:#0087C1;
    color:#fff;
    text-decoration:none;
    }
    /* Selected */
    .s4-toplinks .s4-tn a.selected{
    background:url("/_layouts/images/selbg.png") repeat-x left top;
    background-color:#0087C1;
    color:#fff;
    text-decoration:none;
    border:1px transparent solid;
    padding-right:10px;
    padding-left:10px;
    margin:0px;
    }
    
  3. Verify that the files are published and approved by browsing to each file in SharePoint Designer and selecting it. After you select the file, you can see the check-in option in the ribbon. After you check in the file, you can publish it.

You just created a custom master page and applied a custom CSS file (CustomCss.css) that contains classes that override the default SharePoint CSS file. Now that you have customized the global navigation to some extent, it is time to specify the master page that the top site uses (and all sites that inherit from it). After you switch to the new master page, you can continue to edit CustomCss.css.

To apply the new Site Master Page and System Master Page settings, browse to the top site for your SharePoint project, and then navigate to Site Settings. If you want every site in the site collection to pick up the new master page that is attached to the new CSS file, reset all subsites.

In the previous section, the CSS classes provide only basic changes, such as modifying the background colors for the global navigation. However, you can customize all facets of a site, such as the search input box and the scoped search box, by using a delegate control.

The SharePoint 2010 user interface typically includes a search box. It might be necessary to modify this control, especially if it appears on a public-facing website, where the search box is one of the most important elements in the design. Customizing the SharePoint search box can be a tricky task that requires careful attention to position and behavior, and to all the functionality in the control.

When you brand the search box, consider the following recommendations:

  • Make it simple, easy to find, and clearly visible on every page.

  • Make sure that the input field and buttons are sized appropriately.

  • View your site in different browsers to see how your customized search controls appear.

How to Customize the Search Input Box

The search box control renders as a placeholder in the master page and can be replaced by a custom control that is inherited from the SharePoint SearchBoxEx class. The control is a highly configurable Web Part and, as such, can be used as an ASP.NET control. You can use each property of the Search Box Web Part as an attribute on the Search Box Web control.

To specify a style for the search box, such as a background color, a background image, width, or a font color, as shown in Figure 2, use only the CSS. That is, you don't need to modify the master page or write a custom control.

Figure 2. Example of a customized search box

Example of a customized Search box

Use the following code to add the CSS to CustomCss.css. In this example, create a search button image that is 24 x 22 pixels. This image is used in the .s4-search and .ms-sbgo classes.

/* Navigation list */
.s4-tn{
background-color:#00557B;
padding:0px; margin:0px;
}
/* Global navigation */
.s4-tn li.static > .menu-item{
color:#fff; 
white-space:nowrap;
border:1px solid transparent;
padding:4px 10px;
line-height:21px;
height:24px;
}
/* Hover */
.s4-tn li.static > a:hover{
background:url("/_layouts/Images/selbg.png") repeat-x left top;
background-color:#0087C1;
color:#fff;
text-decoration:none;
}
/* Selected */
.s4-toplinks .s4-tn a.selected{
background:url("/_layouts/images/selbg.png") repeat-x left top;
background-color:#0087C1;
color:#fff;
text-decoration:none;
border:1px transparent solid;
padding-right:10px;
padding-left:10px;
margin:0px;
}
.s4-search input.ms-sbplain{
height:12px; 
padding:4px; padding-right:0px;
margin:4px; margin-right:0px;
background-color:#D8E5F3;
border:1px #8BA0BC solid!important; 
color:#333; 
font-size:11px; 
}
.s4-search .ms-sbgo{
padding-top:5px; padding:0;
margin:0; 
}
.s4-search .ms-sbgo a{
background-image:url('/Style Library/MSDN/Images/GoSearching.png'); 
background-repeat:no-repeat;
width:27px; height:22px; 
display:block; 
}
.ms-sbscopes, .s4-search .srch-gosearchimg{
display:none; 

If you want to set a value for the search box, you can use jQuery. Insert a reference to the latest version of jQuery in the header section of your customized master page, and then insert the following reference just below your reference to CustomCss.css.

<script type="text/javascript" src="/Style Library/Jquery/jquery-1.4.2.min.js"></script>

Insert the following script just above the last header tag on the master page.

<script type="text/javascript">
$(document).ready(function(){
 $('.ms-sbplain').val('Search..');
 $(".ms-sbplain").focus(function() {
   $(this).val('')
 });  
});
</script> 

Because the search box can be a very important tool to use to find information, you might want to make it more visible on the page by increasing its height and width, and by using a larger font; the following CSS makes all of this easy to do. This example also uses a larger icon for the search box, as shown in Figure 3.

Figure 3. Search box with a larger search icon

Search box with a larger search icon

Insert the following CSS classes in CustomCss.css.

/* Navigation list */
.s4-tn{
background-color:#00557B;
padding:0px; margin:0px;
}
/* Global navigation */
.s4-tn li.static > .menu-item{
color:#fff; 
white-space:nowrap;
border:1px solid transparent;
padding:4px 10px;
line-height:23px;
height:26px;
}
/* Hover */
.s4-tn li.static > a:hover{
background:url("/_layouts/Images/selbg.png") repeat-x left top;
background-color:#0087C1;
color:#fff;
text-decoration:none;
}
/* Selected */
.s4-toplinks .s4-tn a.selected{
background:url("/_layouts/images/selbg.png") repeat-x left top;
background-color:#0087C1;
color:#fff;
text-decoration:none;
border:1px transparent solid;
padding-right:10px;
padding-left:10px;
margin:0px;
}
/* ---------------------- SEARCH BOX ------------------------ */
.s4-search input.ms-sbplain{
height:20px; 
width:250px!important;
padding-left:4px; 
padding-right:0px; padding-top:5px!important; padding-bottom:5px!important;
margin:4px; margin-right:0px; margin-top:0px!important; margin-bottom:5px!important;
line-height:18px!important;
background-color:#D8E5F3;
border:1px #8BA0BC solid!important; 
color:#333; 
font-size:14px; 
}
.s4-search .ms-sbgo{
padding-top:5px; padding:0px; margin:0; 
}
.s4-search .ms-sbgo a{
background-image:url('/Style Library/MSDN/Images/Go8.png'); 
background-repeat:no-repeat;
width:32px; height:32px; 
margin-right:5px; margin-bottom:5px;
display:block; 
}
.s4-search .ms-sbgo a:hover{
background-image:url('/Style Library/MSDN/Images/Go8Hover.png'); 
}
.ms-sbscopes, .s4-search .srch-gosearchimg{
display:none; 
} 

How to Extend the Search Box with a Pop-Up Keyboard

A virtual keyboard can be a useful way to specify the characters that you want, without the limitations of the language-specific keys on your physical keyboard. For example, you might want to use a language that is not based on the Latin alphabet. In other scenarios, you could use a pop-up keyboard to input secure fields on a bank's logon page, to reduce keystroke logging, or to create a control in a form.

Figure 4. Pop-up keyboard

Pop-up keyboard

If you want to extend the search box with a pop-up keyboard that takes input from the mouse, use jQuery. The example in this section use a jQuery plug-in called Keypad that is customized slightly to fit into the search box in SharePoint.

Insert a reference to the latest jQuery version in the header section of the master page, and just below that, insert the following reference to the Keypad plug-in.

<script type="text/javascript" src="/Style Library/MSDN/jquery.keypad.js"></script> 

Insert the following script just above the ending header tag in the master page. This example also uses an icon (32 x 32 pixels) for the keyboard.

<script type="text/javascript">
// jQuery keypad
$(document).ready(function(){
$('.ms-sbplain').keypad({showOn: 'button', 
  keypadOnly: false, layout: $.keypad.qwertyLayout, buttonImage: '/Style Library/MSDN/Images/keyboard.png', prompt: ''
  }); 
});
</script>

Insert the following CSS classes in CustomCss.css. If you want to reuse the preceding example, make sure that you delete the classes first.

/* Navigation list */
.s4-tn{
background-color:#00557B;
padding:0px; margin:0px;
}
/* Global navigation */
.s4-tn li.static > .menu-item{
color:#fff; 
white-space:nowrap;
border:1px solid transparent;
padding:4px 10px;
line-height:23px;
height:26px;
}
/* Hover */
.s4-tn li.static > a:hover{
background:url("/_layouts/Images/selbg.png") repeat-x left top;
background-color:#0087C1;
color:#fff;
text-decoration:none;
}
/* Selected */
.s4-toplinks .s4-tn a.selected{
background:url("/_layouts/images/selbg.png") repeat-x left top;
background-color:#0087C1;
color:#fff;
text-decoration:none;
border:1px transparent solid;
padding-right:10px;
padding-left:10px;
margin:0px;
}
.s4-search input.ms-sbplain{
height:20px; 
width:250px!important;
padding-left:40px; padding-right:0px; padding-top:5px!important; padding-bottom:5px!important;
margin:4px; margin-right:0px; margin-top:0px!important; margin-bottom:5px!important;
line-height:18px!important;
background-color:#D8E5F3;
border:1px #8BA0BC solid!important; 
color:#333; 
font-size:14px; 
}
.s4-search .ms-sbgo{
padding-top:5px; padding:0px; margin:0; 
}
.s4-search .ms-sbgo a{
background-image:url('/Style Library/MSDN/Images/Go8.png'); 
background-repeat:no-repeat;
width:32px; height:32px; 
margin-right:5px; margin-bottom:5px;
display:block; 
}
.s4-search .ms-sbgo a:hover{
background-image:url('/Style Library/MSDN/Images/Go8Hover.png'); 
}
.ms-sbscopes, .s4-search .srch-gosearchimg{
display:none; 
}
/* - Classes for the keyboard - */
.keypad-popup {
background-color:#D8E5F3;
margin-top:2px;
border:1px #888 solid
}
.keypad-trigger {
width:43px;height:39px;
padding: 0px; border:0px;
background-color:transparent; 
position:absolute; display:table-cell;
}
img.keypad-trigger {
margin: 2px; vertical-align: middle;
}
#keypad-div {
display: none; z-index: 10;
margin: 0; padding: 0;
background-color: #fff;
color: #000; border: 1px solid #888;
font-family: Verdana;
font-size: 12px;
}
.keypad-keyentry {
display: none;
}
.keypad-inline {
background-color: #ccc;
border: 1px solid #888;
}
.keypad-disabled {
position: absolute; z-index: 100;
background-color: #fff; 
filter: alpha(opacity=50);
}
.keypad-rtl {
direction: rtl;
}
.keypad-prompt {
clear: both; width: 100%; text-align: center;
}
.keypad-row {
clear: both;
}
.keypad-space {
float: left; margin: 2px; width: 24px;
}
* html .keypad-space { /* IE6 */
margin: 0px; width: 28px;
}
.keypad-half-space {
float: left; margin: 1px; width: 12px;
}
* html .keypad-half-space { /* IE6 */
margin: 0px; width: 14px;
}
.keypad-key {
font-family: Tahoma;
font-size:10px;
float: left; margin: 2px;
padding: 0px; width: 24px;
background-color: #f7f7f7;
text-align: center;
cursor: pointer;
}
.keypad-key[disabled] {
border: 2px outset;
}
.keypad-key-down {
}
.keypad-spacebar {
width: 164px;
}
.keypad-clear, .keypad-back, .keypad-close, .keypad-shift {
width: 52px; color: #333;
font-weight: normal;
background-color:#E9E9E9
}
.keypad-cover {
display: none;
display: block;
position: absolute;
z-index: -1; filter: mask();
top: -4px; left: -4px;
width: 125px; height: 200px ;}

How to Customize the Scoped Search Box with a Custom Control

By using CSS or, if needed, jQuery, you can substantially modify the look and feel of the search box. However, scenarios might occur in which you need to change some of the attributes that come with the control. For example, to display the control's drop-down list, replace the delegate control in the master page with a custom control.

To use a custom control, you must register the SPSWC control tag in the master page. Add the appropriate register directive for the SPSWC control tag prefix at the top of the master page, in the same pattern as the other register directives.

<%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" 
        Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, 
        PublicKeyToken=71e9bce111e9429c" %>

Replace the content placeholder and its delegate control with the following web control. Place it where you want it to be displayed.

<SPSWC:SearchBoxEx id="SearchBox" runat="server" 
    GoImageUrl="/_layouts/images/gosearch.gif" 
    GoImageUrlRTL="/_layouts/images/gosearch.gif" 
    DropdownModeEx=ShowDD 
    DropdownWidth="120"
    UseSiteDefaults="true" 
    QueryPromptString="Keyword(s)"
    FrameType="None" 
    WebPart="true" __WebPartId="{551E15C2-FF48-4670-BC26-FA1BDD992F74}"
/>

Place the unused placeholder where the delegate control was included; for example, at the end of the master page. Wrap the placeholder into a DIV tag that you set as hidden to ensure that no page layout can override the placeholder. You can also use an ASP panel and set it to false; the content placeholder wrapped into this panel is hidden.

<div style="visibility:hidden"> <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server"> </asp:ContentPlaceHolder></div>

Alternatively, you can use SharePoint Designer 2010 to prepare the control and then use Microsoft Visual Studio to customize and deploy the default SharePoint search control.

Conclusion

Branding enables companies to establish rapport and relationships with customers by making it easy for customers to identify with the products or services that they prefer. Branding helps build expectations around products that customers associate with a given company. Part of branding a company site is to customize the navigation around the site to ensure a positive user experience on the site. By using SharePoint, you can create a consistent look and feel that you can easily update across all pages. You can also customize a search box so the customers can easily search your site.

About the Author

Christian Stahl has been working as a consultant, trainer and speaker for Microsoft SharePoint Technologies since 2003 and specializes in SharePoint branding and front end developing. Aside from being a SharePoint Server MVP, he is also a Microsoft Certified Trainer (MCT). Christian is co-author of ‘Beginning SharePoint 2010 Administration’ published by Wrox, blogs, and runs the community SharePoint Designers. You can find Christian on Twitter as @cstahl.

The following were tech editors on Microsoft SharePoint 2010 articles from Wrox:

  • Matt Ranlett is a SQL Server MVP who has been a fixture of the Atlanta .NET developer community for many years. A founding member of the Atlanta Dot Net Regular Guys, Matt has formed and leads several area user groups. Despite spending dozens of hours after work on local and national community activities, such as the SharePoint 1, 2, 3! series, organizing three Atlanta Code Camps, working on the INETA board of directors as the vice president of technology, and appearing in several podcasts such as .Net Rocks and the ASP.NET Podcast, Matt recently found the time to get married to a wonderful woman named Kim, whom he helps to raise three monstrous dogs. Matt currently works as a senior consultant with Intellinet and is part of the team committed to helping people succeed by delivering innovative solutions that create business value.

  • Jake Dan Attis. When it comes to patterns, practices, and governance with respect to SharePoint development, look no further than Jake Dan Attis. A transplant to the Atlanta area from Moncton, Canada, Dan has a degree in Applied Mathematics, but is 100% hardcore SharePoint developer. You can usually find Dan attending, speaking at, and organizing community events in the Atlanta area, including code camps, SharePoint Saturday, and the Atlanta SharePoint User Group. When he's not working in Visual Studio, Dan enjoys spending time with his daughter Lily, watching hockey and football, and sampling beers of the world.

  • Kevin Dostalek has over 15 years of experience in the IT industry and over 10 years managing large IT projects and IT personnel. He has led projects for companies of all sizes and has participated in various roles including Developer, Architect, Business Analyst, Technical Lead, Development Manager, Project Manager, Program Manager, and Mentor/Coach. In addition to these roles, Kevin also managed a Solution Delivery department as a Vice President for a mid-sized MS Gold Partner from 2005 through 2008 and later also served as a Vice President of Innovation and Education. In early 2010 Kevin formed Kick Studios as a company providing consulting, development, and training services in the specialized areas of SharePoint and Social Computing. Since then he has also appeared as a speaker at numerous user group, summit, and conference type events across the country. You can find out more about Kevin on his blog, The Kickboard.

  • Larry Riemann has over 17 years of experience architecting and creating business applications for some of the world’s largest companies. Larry is an independent consultant who owns Indigo Integrations and does SharePoint consulting exclusively through SharePoint911. He is an author, writes articles for publication and occasionally speaks at conferences. For the last several years he has been focused on SharePoint, creating and extending functionality where SharePoint leaves off. In addition to working with SharePoint, Larry is an accomplished .Net Architect and has extensive expertise in systems integration, enterprise architecture and high availability solutions. You can find him on his blog.

  • Sundararajan Narasiman is a Technical Architect with Content Management & Portals Group of Cognizant Technology Solutions, Chennai, with more than 10 years of Industry Experience. Sundararajan is primarily into the Architecture & Technology Consulting on SharePoint 2010 Server stack and Mainstream .NET 3.5 developments. He has passion for programming and also has interest for Extreme Programming & TDD.

Additional Resources

For more information, see the following resources: