Heather Solomon's Blog

SharePoint 2007 Branding

Article Categories
Post Categories


  Jump to: Follow speheather on Twitter Follow Heather Solomon on Facebook
Heather's SharePoint 2010 Blog is located at blog.sharepointexperience.com
Loading

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
Navigation
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.

RED FLAG:
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 readable.


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 expected.
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.

RED FLAG:
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.

RED FLAG:
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.

RED FLAG:
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.



Sites/Templates
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.

RED FLAG:
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.

RED FLAG:
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.

posted on Friday, October 12, 2007 10:31 AM

Copyright © 2005-2011. Heather Solomon.
Site design by Heather Solomon. Yes it is dated and purple. If I changed it, no one would recognize it! Check out my new home at sharepointexperience.com.

Blog Stats:
Posts - 390
Stories - 39
Comments - 1795
Trackbacks - 183
Follow speheather on Twitter

Follow Heather Solomon on Facebook

Branding/UI/UX Courses for SharePoint taught by Heather Solomon

VIEW COURSE SCHEDULE