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