UX & IA Design Thinking

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 within th

My original article used CSS to hide the first navigation tab, but if you want to make the change via the master page navigation control there are some simple changes that you will need to make. I originally thought by just changing the “ShowStartingNode” property it would simply hide the first node but by default it has it already set to false: ShowStartingNode=" False " so the approach below is what worked for me. Here is the base top navigation control: <SharePoint:AspMenu   ID="TopNavigationMenuV4"   Runat="server"   EnableViewState="false"   DataSourceID="topSiteMap"   AccessKey="<%$Resources:wss,navigation_accesskey%>"   UseSimpleRendering="true"   UseSeparateCss="false"   Orientation="Horizontal"   StaticDisplayLevels="2"   MaximumDynamicDisplayLevels="1"   SkipLinkText=""   CssClass="s4-tn"/>

If you have ever added custom elements to your master page above or below the standard DIV tags you will notice that they start appearing in the SharePoint 2010 Modal windows when you don’t want them to. The simple fix is to use the class “s4-notdlg” on your custom element to hide it when viewing the modal pop up windows. To give you a better idea of what I am talking about I added in a simple DIV tag right above the s4-ribbon row DIV: The inline CSS below is just to make it stand out. <div class="my-customdiv">Here is my custom header</div> <style> .my-customdiv{     background-color: #009;     border-bottom: 4px #FFF solid;     text-align: center;     color: #FFF;     font-size: 10pt;     font-weight: bold;     padding: 10px;     height: 30px; } </style> Here is what the site looks like with the custom header applied: If I create a new list item or upload a document, the Modal Window shows my custom

Update 11/4/2010: I found that by using the default SiteMapProviders="SPContentMapProvider" in the original post it was throwing errors when creating a publishing page. So I have updated my approach below to utilize how breadcrumbs were done in MOSS 2007. Basically you should simply replace the existing PlaceHolderTitleBreadcrumb placeholder with the following: <div class="custom-breadcrumb">     <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">         <asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" runat="server"/>     </asp:ContentPlaceHolder>    </div> I have updated the post below to reflect the above changes. I have received a lot of feedback about the OOTB breadcrumb control for SharePoint 2010 not being useful and hard to find. People would ask me: Where did the standard breadcrumb go? I know it was there

I created a blog post on this for SharePoint 2007 HERE : But SharePoint 2010 is a bit more complex. Since it uses UL’s and Li’s for it’s navigation it is a bit harder to hide just one element. You will notice that the Home tab actually is the first node and then has a child UL which represents the rest of the navigation Items. So the approach is to hide the first <li> <a> (display: none) and then simply just use (display:block ) to show the hidden <ul> <li> <a> tags. Here is the CSS you could use to hide just the first node (home) tab in a SharePoint 2010 application: .s4-tn li.static > a{ display: none !important; } .s4-tn li.static > ul a{ display: block !important; } Enjoy!

To continue the conversation with the modal pop up window, I was asked the following great question: “ What if your list has different content types, each having their own form? Is there a way to make this pop-up specific to the form of a certain content type?” The answer is yes it is quite easy to link the pop-up modal window to a unique content type: You would use the same approach but you would add in the Content Type ID to the end of the URL string: <a onclick="javascript:NewItem2(event, &quot;http:// sitename /_layouts/listform.aspx?PageType=8&amp;ListId={ 49E3BDCF-9C06-413D-A7B8-413F2E8F6B0D }&amp; ContentTypeId=0x01005C9243AA25668B4CAACB42C41B0D360600052ECA5C1544864D9F9B7BF90A874A4F&amp; RootFolder=&quot;); javascript:return false;" href="/_layouts/listform.aspx?PageType=8&amp;ListId={ 49E3BDCF-9C06-413D-A7B8-413F2E8F6B0D }&amp; ContentTypeId=0x01005C9243AA25668B4CAACB42C41B0D360600052ECA5C1544864D9F9B7BF90A874A4F&

So in my last post I simply wanted to show an input form in a SharePoint 2010 modal window. This got my creative juices flowing and I wanted to experiment a little. I found out that you can easily display anything in the Modal window that you wanted. Web Site: Bing <a onclick="javascript:NewItem2(event, &quot; http://www.bing.com&quot;); javascript:return false;" href=" http://www.bing.com/" target="_self">Show Bing In Modal Window</a> Image <a onclick="javascript:NewItem2(event, &quot; http://sitename/Images/image.png&quot;); javascript:return false;" href="/images/image.png/" target="_self">Show Image</a> Video/Games This does not really work since most video’s open up in a separate application like Window Media Player and not within the browser. However you can use things like flash .swf files to show in the modal window. <a onclick="javasc

I was asked by a client recently if there was a way to create a hyperlink to a New Item Form anywhere within a site but still get the rich experience of the Modal pop-up window that grays out the background. (Note this is for SharePoint 2010 Only…) I basically took the code directly from the “Add new item” and the “Add Document” link within the list view. What this allows you to do is simply add in the following code to any content editor web part, Master page, or Page Layout in any site collection and display the form to be filled out. The user will get the nice experience of the modal window and not have to navigate away from their current page. This could be used for example a feedback form that is included in the master page so whenever someone wants to give feedback it is always going back to a central list. The only that is required for you to know is the List ID and the site name. Full Code For a List Item: <a onclick="javascript:NewItem2(event, &quot

I was recently asked: " How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010 . If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source. <Style> body #s4-leftpanel { display: none; } .s4-ca { margin-left: 0px; } </style> Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

I created a blog post about 2 years ago on how to create a centered fixed width design for SharePoint 2007 . Well now with a little help from a few other posts ( The SharePoint Muse , Elumenotion , Styled Point ) we can create a SharePoint 2010 fixed with centered design. Now this does come with some drawbacks. By default the ribbon is intended to stay static and always be visible to the contributors on the top of the page. However due to the complexity of fixing a site’s width. The ribbon will need to scroll with the body of the page to avoid a vertical scroll in the middle of your page once it is centered… The trick to get this to work is to do the following: Open up your master Page and remove scroll="no" from the body. If you do not do this there will be no scroll bars on long pop up modal windows In the Master Page search for “s4-workspace” remove this whole DIV tag and its close Div tag at the bottom of the master page. This ID is

To convert the large social buttons to smaller ones you simply have to modify the following: Within your custom Master Page search for: “ GlobalSiteLink3 ” Simply Add “ -mini ” to the control ID Original Large Control: <SharePoint:DelegateControl ControlId=" GlobalSiteLink3 " Scope="Farm" runat="server"/> New Small Control ID: <SharePoint:DelegateControl ControlId=" GlobalSiteLink3 -mini " Scope="Farm" runat="server"/> If you want to make the small buttons horizontal versus vertical simply add the following to your custom CSS: .ms-mini-socialNotif-Container{     white-space: nowrap; } Enjoy!

I have been working with the State of Illinois to get their public .gov SharePoint 2007 site up and running. http://www.illinois.gov . The site has undergone a major UI and Usability overhaul and is now live! This site is built for all users. Accessibility has been a huge focus. We plan on adding some additional features that will really make this a top 10 State Government Website. During the process we reviewed some of last years top ranked state government websites: Center for Digital Government Ranking site. 1st Place: Utah 2nd Place: California 3rd Place: Arkansas (SharePoint) 4th Place: Maine 5th Place: Colorado Others: West Virginia (SharePoint) Maryland (SharePoint) The Governors site is in the process to be upgraded as well.

I have been asked quite a few times if the SharePoint 2007 two tier global navigation will work with SharePoint 2010. The answer is yes with a few slight modifications. The approach stays the same: Master Page points to web.config > web.config points to .sitmap file > Page Renders custom navigation control. The difference between 2007 and 2010 of course is that you want to add the custom site map provider to the new 2010 web.config file. Search for the following in the web.config file: “ sitemap ”. within the last row add the following: <add name=" DEMOGlobalNavSiteMapProvider " siteMapFile="/ _layouts/1033/styles/demo/DemoGlobalNav.sitemap " type="Microsoft.SharePoint.Navigation.SPXmlContentMapProvider, Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" /> You will notice that I placed my custom sitemap file in the style folder within the layouts directory. There is also some slight changes to ho

I was recently on a project where there was a requirement to have many items in the main navigation. There was not an option to consolidate these into smaller groups. The idea was to move the search box up into the top ribbon bar. This would allow for more horizontal space for the navigation items. However in my attempt to move the search I found a little gotcha. I selected the search control in SharePoint Designer and moved it right above the welcome navigation control code. Wrapped the control in a div tag and temporarily added an inline style of float left. <div style="float: left;">    <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">       <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" Version="4"/>    </asp:ContentPlaceHolder> </div> I saved the master page and then checked out what it looked like. The search

I created a post about a year ago about Using Visio for SharePoint Wireframes . So now that 2010 has been released I got busy building the next generation Visio Wireframe Toolkit for SharePoint 2010. It is currently around ~40 pages that range from Wiki, team site, meeting workspaces, search, my sites, and application pages. All the text, navigation, web parts, and images are editable and can be added, moved, edited or deleted. In this version I made sure that the correct colors, fonts, and web part placements were true to the application. On most of the templates I have included some basic information about the page layout, web parts on the page, and libraries/lists included. Here are some samples: Team Site Contacts Web Database My Profile Silverlight Organization Viewer I wish I could share it with everyone but my hands are tied and I cannot. It is an EMC Consulting artifact and I am writing this blog post to mainly get the word out that Visio is st

I have been searching for a simple tab web part for SharePoint but mostly came up empty handed… I was looking for something that a user can easily drag and drop a web part onto a specific tab within the page. There are quite a few free tab web parts out there but most of them were not just quite what I wanted. I checked out the following Tab web part solutions. Easy Tabs : From Path To SharePoint Pro: The tabs automatically take the name of the web part. Con: There is no option to add more than one web part per tab, and the User Interface is not that intuitive. Zone Tabs : From MSDN Pro: You have a lot of options for tab customization Con: It’s a web part that you have to install on the server. From what I remember it’s not that easy to re-arrange the web parts on the page. I finally found this article from Bits Of SharePoint Site : http://www.bitsofsharepoint.com/ExamplePoint/Site/TabPage.aspx His code was exactly what I needed. All