Page Editing and the Ribbon
Adding styles to the ribbon to help content authors create
consistent content
Adding your own buttons to the ribbon
Using SharePoint dialogs to open new pages
Working with the status bar and notifi cation area
One of the most notable enhancements to the user interface (UI) of SharePoint 2010 is the
addition of a ribbon directly inside the browser. The ribbon acts much the same way that it
does in other Microsoft Of ce applications: It enables users to modify the settings and styles
of the currently rendered page (among other things).
A part of any designer’s role is to ensure that the content of a website fi ts the branding struc-
ture established for the entire site. Therefore, when a rich text editor is used in SharePoint, the
fonts and colors should match the rest of the site. An easy way to do ad-hoc styling is by using
the ribbon.
Furthermore, because the ribbon is part of the UI, you may be asked to enhance the ribbon to
provide more of the functionality users need to perform their jobs. That’s why it is important
to at least understand the basics of how to add functionality to the ribbon and ensure that the
functionality looks good and is consistent with the rest of the site.
This chapter will help you accomplish both of these goals by showing you how to use the rib-
bon to directly modify page content and enhance the ribbon to add the functionality needed
by your users.
584644c12.indd 349584644c12.indd 349 10/27/10 11:44:52 AM10/27/10 11:44:52 AM
One of the primary concerns of any branding project is to ensure that everything, across all pages of
a site, looks consistent. Most of this book focuses on things that are done at the code level or under
the hood: Master pages, themes, and CSS control much of the look and feel of every page.
However, one thing that those tools do not necessarily control is the content components of each
page. In Chapter 5, you learned about basic page editing using the ribbon. While this is certainly a
powerful feature in SharePoint 2010, the edited content may or may not have the same look and feel
as the rest of the site. This is because the edited page content, while inheriting whichever CSS rules
have been applied to the applicable HTML elements, can still be styled in any way imaginable using
the rich text editor.
How can brand consistency be enforced when SharePoint provides so many options for content
authors to create anything they want? One option is that you could institute a policy that says con-
tent authors stick to very speci c style guidelines as they create content. However, policy can be
diffi cult to enforce as a site grows in size. The ribbon has a cool feature that can help you enforce
speci c styles; by adding CSS that the ribbon knows how to load, you can actually inject your own
styles for content authors to always have at their disposal.
Adding Custom Styles to the Ribbon
SharePoint 2010 allows you to easily inject pre-built options into several of the areas of the Format
Text tab in the ribbon. In this chapter, you will learn about adding styles to the following areas of
the ribbon:
Font Face
Font Size
Highlight Color
Font Color
Markup Styles
Each of these items is described in Chapter 5, but you can refer to Figure 12-1 to see where each is
located in the ribbon.
The following sections describe how to add styles for each of these areas. For each of them, you can
add items simply by adding speci c CSS classes to your SharePoint site. This can be done by adding
a CSS fi le to the Style Library and applying it to SharePoint as either alternate CSS or from a master
page, as follows:
<SharePoint:CssRegistration name=”/Style Library/RichTextAdditions.css”
After=”corev4.css” runat=”server”/>
584644c12.indd 350584644c12.indd 350 10/27/10 11:44:53 AM10/27/10 11:44:53 AM

Get Professional SharePoint® 2010 Branding and User Interface Design now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.