UX & IA Design Thinking

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

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

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

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

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