Page elements to double check while rebranding SharePoint

Oh SharePoint. It can be wonderful, and it can irritate you to no end. Don’t get me wrong, I really do like this application, but I admit to some dark moments in my past screaming at the monitor at yet another bit of text
or color that has appeared looking like the “old SharePoint” in my new custom design.

One of the challenges of rebranding an existing application design is
catching every element and style used in the application. The following is a
checklist to help you in the wee hours of the night while you update the
SharePoint look and feel. This list is two fold, use it to make sure you have
branded everything, and to make sure your branding hasn’t made anything
disappear! Trust me, it can happen.  🙂

  1. Navigation
  2. Content Area
  3. Sites/Templates
  4. Calendar

Heather’s “Oh Crap I Missed That!” List

The What The Gotchas The Screenshot
Global Site Links, including the Welcome Menu, My Site, My Links and
the Help icon
Don’t forget those separate hover effects for the Welcome menu and
the My Links menu. And the separator bars between each navigation item.
Top Link Bar You are likely to do all of the on, off and hover states for the top
navigation, but don’t miss the drop down menus. They need a background,
border and a hover state as well.
Site Actions Don’t miss this essential menu for SharePoint content
editors and administrators.
Page Editing Toolbar This is optional, only content editors will see it, but it has the
possibility to look really ugly alongside your design depending on your
color palette. Plus, the toolbar has two views based on the edit state
of the page.

Changing text for other areas in the site can affect text in
the toolbar.  Double check “Page”, “Workflow”, and “Tools” text
after you create your site design to make sure the text is still
Quick Launch, a.k.a. Left Navigation The Quick Launch has several levels, including headers, nav items
and sub nav items.  Create a nested page structure and double check
your on, off and hover states for the various levels. Don’t just mouse
over the nav, click into the pages to make sure the on states work as
Tree View Tree View is not active on a SharePoint site by default, so it is
easy to forget about. Turn on Tree View in the Site Settings then look
at the various elements, including the background and on state for the
selected item.
Wiki Navigation The Wiki template also includes a ‘Recent Changes’ navigation that will not pick up any changes you make to the Tree View or Quick Launch.
Blog Navigation The Blog template uses a completely different left navigation that will not pick up any changes you make to the Tree View or Quick Launch.
Multiple Meeting Workspace Navigation If a user creates a meeting workspace for a recurring
meeting, special navigation shows up on the left side that lists the
meeting dates.
No image yet.
Breadcrumbs The epitome of the love/hate relationship. Watch out for breadcrumb formatting on home pages, sub pages and team sites under your MOSS sites.
Content Area
Web Parts This seems like a no-brainer, but don’t forget the toolbars that can
optionally show, and the “Add new…” links below the web part.
Web Part Tool Pane If you are feeling particularly adventuresome, you can rebrand the
Web Part Tool Pane.

Make sure you check the Web Part Tool Pane periodically
while designing your site. In some cases the height for the web part
tool pane can be reduced to something completely unusable, or the bottom
buttons can be hidden.
List Toolbar When you click into a list/library, this is the toolbar that shows
across the top. Watch out not only for the text, but the View menu to
the right.

Pagination info and arrows pop up in this bar.  Add some
items to your list and limit the item display to just a few to force the
pagination to show in the toolbar.
List Menubar Yet another toolbar for a web part, this one shows up when you
choose to add or edit an item.
List Form Text and background for the list field inputs.

After making text changes in your site, double check this form. Some changes can effect the text size of the labels to the left, usually resulting in a microscopic font size due to nesting issues and use of the EM font size.
Arrow Hovers They only show up when you mouse over the area, but all the little
arrows for column headers and pop up menus for web parts.

Search Center Some of the sites that may have been automatically created for you
have elements that need to be branded, such as the search tab options in
Search Center. These tabs have on, off and hover states.
Site Directory Same song as Search Center, watch out for the tabs in the Site
Directory and the Site buttons in the upper right. The tabs have on, off
and hover states.

Wiki The Wiki template uses buttons in the upper right,
similar to the Site Directory. Also check the ‘Recent Changes’
navigation as noted above in the Navigation section.
Meeting Workspace The meeting workspace templates use tabs for the multiple pages.

If you are only using a theme or alternate CSS file for
your branding changes, you should be fine. But if you are using a custom
master page, watch out for the multiple page meeting workspace. When the
site is created it uses a different master page (mwsdefault.master) that
includes a bunch of stuff that the other SharePoint master pages don’t.
If you change the master page file that the site uses, some of the
functionality will disappear.

Check out this post for more details
Calendar (Godspeed on this one)
Calendar Navigator This navigation tool pops up in the left navigation
when viewing a calendar. This navigator has two views, a month display
when looking at the calendar in the month view, and a day display when
looking at the calendar in the day or week view. There is an on, off and
hover state for the months/days.

Watch out for long days listed under “Today is”. If you
have limited the width for the area that contains this navigation
control, you are risking the control bumping past your width to fit long
days such as “Wednesday, November 31, 2007”.

Month View There is a laundry list of items in the month view:

  • Days of month
  • Days for other months
  • Active day on state
  • Hover state for mousing over other days
  • Static bits and pieces of the calendar display including
    background colors, borders and week bars
Day or Week View Separate from the month view, there is another list of
items to brand in the day or week view:

  • Business hour time slots
  • Outside of business hour time slots
  • Active day on state
  • Hover state for mousing over other days
  • Static bits including background colors and borders
Appointments Views for appointments and all day appointments in both
month, week and day views.

Dustin Miller and Heather Solomon from SharePoint Experts