UX & IA Design Thinking

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

The OOTB search box in my opinion is hidden and misplaced. In most cases it gets in the way with the top navigation especially when you have a lot of items in it. The solution to this problem is to move the search box up to the left of the social tags and make it bigger with CSS and Images. Here is what the search box will look like: This design consists of two images one for the search box (searchbox.gif) and the other for the button (searchbutton.gif). Moving the Search Control: In your custom master page simply move the s4-searcharea div up into a new <td></td> before the social tags. The final code should look like this: Notice that I kept the div and the “s4-rp” class. This has the “float:right” attribute for the help icon. Putting it all together: I have placed all of the support files to create this large search box style into the following .zip file that you can download and apply to your development site. Source Files: Download...

I will be co-presenting at the SharePoint Conference in Baltimore, MD March 8th with my friend Chris Arella . Designing for SharePoint: Avoid the Pitfalls When: Tuesday, March 08, 2011 @ 1:45PM Speakers: Erik Swenson Session Details: Applying your creative design to the SharePoint platform can be incredibly challenging. The diverse functionality offered in SharePoint 2010 is daunting, to say the least, and trying to tame all of this power into a cohesive and polished design is incredibly overwhelming. If you’re ready to start designing in SharePoint, but you’re not quite sure where to start, we’ll set you down and point you in the right direction. Learn best practices for designing in SharePoint, and discover solutions to the common pitfalls that designers often encounter. This is going to be a great conference! For more information and to register go to: http://www.sharepointconference.org I hope to see you there!

I thought that I created this post before, but I guess it was either the SharePoint 2007 Logo , or the SharePoint 2010 Search Button . So here it is. Very much like the two examples above, if you simply want to change the site logo via CSS globally, or for a single site. Without having to go to the Site Actions > Site Settings > Title and description > adding in a URL to site logo. Then simply do the following: Copy your image anywhere users can access it Paste in the following CSS into your custom CSS file .s4-titlelogo{ background-image: url(/_layouts/images/ centraladmin_security_48x48.png ); background-position:left center; background-repeat: no-repeat; } .s4-titlelogo > a > img{ visibility: hidden; width: 48px; height: 48px; } Update the background image URL path above in red to where you uploaded the image Change the width and height above in Blue to match the image dimensions. Before: After:

To hide the “My Site” link in the SharePoint 2010 top navigation you can easily do this via CSS. Simply add the following to your custom CSS. . ms-globalnavicon { display: none; } Now when you click on Site Actions > Site Settings > Top Link Bar. You can customize those links all you want and not have to worry about the “My Links” getting in the way. Its redundant/repetitive to the My Newsfeed link anyways. So I am not really sure why it was in there for the first place…

If you have a requirement to add, edit, or delete the tabs within the my profile pages its actually quite easy.  The default tabs are: Overview URL: /my/person.aspx Organization URL: /my/OrganizationView.aspx Content URL: /my/personcontent.aspx Tags and Notes URL: /my/_layouts/thoughts.aspx Colleagues URL: /my/_layouts/MyContactLinks.aspx Memberships /my/_layouts/MyMemberships.aspx You can manage these tabs by navigating to the My Site Host http://sitename/my/ or the the my profile page http://sitename/my/Person.aspx . Click on Site Actions > Site Settings > Look and Feel > Quick Launch You will notice that all of the tabs are managed as quick launch links. This will allow you to easily add, edit, and delete tabs. If you want to customize the look of the tabs to be vertical or place it somewhere else on the page you simply have to modify the person.aspx page withi...