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

21 thoughts on “Page elements to double check while rebranding SharePoint”

  1. Hi, thanks for these useful informations!Do you have a solution for the problem with the height of the webpart tool pane? i have customized a whole new masterpage, but i’m not able to configure any webpart, because the toolpanes height is too low. Can you help me with this problem?

  2. Um, is there actually a workaround or suggestion for any of these items your listing?? What do you do about double breadcrumbs? Are you suppose to add code in the sub page to update the master page breadcrumb and remove the breadcrumb from the subpage??

  3. Could you include a page on editing form fields please? The List Form Fields seem to have something like ms-input for dates. I’d love some details on options for customizing their format and width. Thank you.

  4. Looking for a CSS style and can’t find it. How do I chagne s hyperlink syle in a Wiki? “ms-wikilink”Thanks so much

  5. Hi Heather,I’ve been using your CSS reference for MOSS 2007 Awesome!After spending considerable time trying to find this I thought it might be worth mentioning…When trying to change the “My Links” and the “Welcome X” css you need to look for the following in the core.css:.ms-SPLink{font-family:verdana;font-size:12pt;color:#ffffff;}.ms-SPLink A:visited{color:#ffffff;text-decoration:none;}.ms-SPLink A:link{color:#ffffff;text-decoration:none;}Hope this saves someone else the time hunting for it!Kieran

  6. Does anyone know how to quickly change the menudark.gif arrow in the Welcome Menu to the whitearrow.gif that is used in the Sites Actions menu. Any help with this is appreciated.Thanks.BryceASHP

  7. It was hell for me!…. in IE7 color was white but in IE7 gray, but i solve this problemif you want to change welcome menu coror use “!important” after define color in css.ms-SPLink A:link,.ms-SPLink A:visited{ color:#FFFFFF !important;}

  8. Does anybody know how to change the rollover colour for the text on the list toolbar. It seems on every theme this is default to black, but I can’t find it anyway on the CSS style sheet.

  9. Hello HeatherIt seems as I am not the only one struggeling with Sharepoint CSS design somtimes.I’m trying to fix an issue on my Sharepoint branding:The globallinks (“Welcome xy”, i.e.) are changed in color to white by the following class:.ms-SPLink A:link,.ms-SPLink A:visited{ color:#FFFFFF; text-decoration:none;}This works (and I haven’t found any other way to do it by now), however the Page Editing Toolbar takes the white color as well.You mention that with a red flag, but what can I do now?How is it possible to have the globallinks in one color while the Page Editing Toolbar remains the same?tiaAlexander

  10. I’m hoping you can help find something? I ‘ve inadvertantly changed the text in ListFormWebPart for the Calendar (DispForm.aspx) to white and I cannot figure out where to change it to a visible color… Any suggestions would be very helpful. By the way, I use your guides constantly and they have been an invaluable time saver!! Thanks again!

  11. Currently being restricted to WSS 3 and not MOSS (getting it soon maybe…), I struggled hard to solve my skinning issues with _layouts pages. I tried a different approach that may seem strange but worked for me. I copied the Layouts folder and used only the admin pages I needed to recreate the functions while attaching them to the default.master page and a custom css file. The result is a page I have complete control over the look/feel and does only what I need it to do. This also allows me to individually create different master pages for different departments always with the designed look/feel. Yes, it takes a little more effort, but it was worth it for me as I learned quite a bit!

  12. Hi Heather,thanks for a great blog! Just like ppenn I have problems with the height of the web part tool pane and I haven’t been able to solve it. Is there a solution to this at all?

  13. How hard would it be to create a set of Custom Buttons for the quick launch and how hard would it be to maintain these?

Comments are closed.