UX & IA Design Thinking

Whoa, its been 3 months and no blog posts what gives??? Well I have been very very busy writing my SharePoint 2010 Branding and Customization book!!! I am sorry about no posts lately but I am very excited to say that I am halfway through the book. It has been many of long nights but I can see the light at the end of the tunnel. The book is schedule to be published and available around the early part of December of this year 2011. So that will be just in time to order one for a great stocking stuffer! Here is a simplified TOC from the book. Introduction to SharePoint 2010 Branding Overview of UX/Branding Process Gathering Branding Requirements Creating the Visual Design Development Environment Setup Building the Design Testing the Visual Build Tips and Tricks Tools and Resources CSS Reference Guide I want to thank everyone who has continued to follow my blog, and has posted such great comments and questions. I promise that once this book is...

Update: Quick fix at the bottom of this post. Here is a SharePoint 2010 Bug that needs to be fixed. If you have a custom design and you moved the site actions out and below the Ribbon Control, you will notice that when you go to change a publishing page layout via the ribbon the option is disabled. Here is what the SharePoint 2010 publishing site Ribbon Page Layout Chooser looks like when active: If you move the Site Action Control <SharePoint:SiteActions out and below the Ribbon Control <SharePoint:SPRibbon something similar to this: And then edit the page and try to change the publishing page layout you will notice that some of the ribbon buttons are now disabled. The key issue here is that the site actions control is removed from the SPRibbon control and placed BELOW it. If you move it out of the ribbon control and above it it seems to work fine. Thanks to my friend Chris Arella he was able to figure out why this was happening. A big thank you to Ju...

If you want to allow your users to view/update their personal Status on any page in SharePoint 2010 follow these simple steps. 1.) As with my previous post you need to add the following to the top of your custom master page right before the doctype: <%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 2.) In your custom master page search for “s4-trc-container-menu” and add in the following before the “Welcome” control: <SPSWC:ProfilePropertyLoader runat="server" /> <SPSWC:StatusNotesControl runat="server"/> <SPSWC:ProfilePropertyImage PropertyName="PictureUrl" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/> **Note that if you do not have the <SPSWC:ProfilePropertyLoader runat="server" /...

Here is a simple way to add in the logged in users profile picture right before or after the users name in the SharePoint 2010 ribbon. 1.) Add the following to the top of your custom master page right before the doctype: <%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 2.) Add in the following control right before the welcome text: <SPSWC:ProfilePropertyImage PropertyName="PictureUrl" style="float: left; height: 20px;" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/> A nice feature that you can customize is if you don’t want to show a placeholder image if a users has not uploaded a custom picture you can simply change ShowPlaceholder="true" to “false”. and it will only show a picture if someone has specified a cus...

So, I have gotten a lot of great feedback within the comments of my blog. I have heard from quite a few people that they either just been tasked with branding SharePoint and don’t know where to start. Or they have a basic idea about SharePoint, CSS and HTML but don’t know where or how to reference the custom CSS. This is a long post so hold on to your hat! Within this post I am going to focus this topic on SharePoint 2010 but the approach could be used either for 2007 or 2010. Step 1: The first thing that you have to consider is how the SharePoint site that you are branding is configured? Is it SharePoint 2007 or 2010? Is it WSS or Full SharePoint Server? Will Publishing be enabled? What site templates will be branded? Publishing Team Collaboration Meeting Workspaces Search Center My Sites Administration Pages “_layouts/” Other? Step 2: Be prepared and gather all design support files from your visual designer ...

My previous post did not include a style for the search scope drop down. Use the following to CSS to update the search scope from: To: Download updated files HERE How to implement: Upload the custom master page into the master page gallery Navigate to the following location on your server: “C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES” Create a folder called “LGSEARCH” and place the “lgsearch.css” and the two image files into this directory. Apply the “lgsearch.master” to your site.

If you would like to stylize your navigation drop downs in SharePoint 2010 here are the 4 main key classes to update your CSS. If you are looking for SharePoint 2007 styles see my previous blog post here . The OOTB Navigation Drop Down CSS: “COREV4.CSS” .s4-tn ul.dynamic{ /* [ReplaceColor(themeColor:"Light2")] */ background-color:white; /* [ReplaceColor(themeColor:"Dark2-Lighter")] */ border:1px solid #D9D9D9; } .s4-tn li.dynamic > .menu-item{ display:block; padding:3px 10px; white-space:nowrap; font-weight:normal; } a:link{ /* [ReplaceColor(themeColor:"Hyperlink")] */ color:#0072BC; text-decoration:none; } .s4-tn li.dynamic > a:hover{ font-weight:normal; /* [ReplaceColor(themeColor:"Light2-Lighter")] */ background-color:#D9D9D9; } Example (Not good design, but you get the point) /* Drop Down: Container Style */ .s4-tn ul.dynamic{ background-color:white; border:3p...