UX & IA Design Thinking

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!