Wednesday, December 15, 2010

Change SharePoint 2010 Site Logo Via CSS

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:
image

After:
image

Wednesday, December 1, 2010

Hide SP2010 “My Site” link in top navigation

To hide the “My Site” link in the SharePoint 2010 top navigation you can easily do this via CSS.

image

Simply add the following to your custom CSS.

.ms-globalnavicon{
display: none;
}

image

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…

image

Thursday, November 18, 2010

Customize My Profile Tabs for SharePoint 2010

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

image

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

image

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 the My Site host Site collection.

Open up the site (http://sitename/my/) in SharePoint Designer 2010, and click on All Files.

image

Notice that 3 out of the 6 .aspx files are managed in SharePoint and the other three are stored on the server in the following location: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS

Check out the person.aspx file and edit in advanced mode.

The tabs on the profile page are actually a SharePoint:AspMenu menu control. Which has a horizontal orientation and a unique “s4-sn” css class to give it its unique look and feel.

<SharePoint:AspMenu
     ID="MySiteSubNavigationMenu"
     Runat="server"
     EnableViewState="false"
     DataSourceID="MySiteSubNavDS"
     AccessKey="<%$Resources:wss,navigation_accesskey%>"
     UseSimpleRendering="true"
     UseSeparateCss="false"
     Orientation="Horizontal"
     StaticDisplayLevels="1"
     MaximumDynamicDisplayLevels="0"
     PopOutImageUrl=""
     SkipLinkText=""
     CssClass="s4-sn">
  </SharePoint:AspMenu>
  <SPSWC:MySiteDataSource
     ShowStartingNode="False"
     SiteMapProvider="MySiteSubNavProvider"
     id="MySiteSubNavDS" 
     runat="server"/>

This control is placed on all 6 of the aspx pages to give the effect that a user is simply changing the content on the page by clicking on a different tab and not actually going to a different page.

The key is to keep that consistency throughout your custom profile pages so that the user does not get confused when navigating the tabs.

Thursday, November 4, 2010

Update: Hide First Tab in SP 2010 Navigation

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"/>
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
    <Template_Controls>
        <asp:SiteMapDataSource
          ShowStartingNode="False"
          SiteMapProvider="SPNavigationProvider"
          id="topSiteMap"
          runat="server"
          StartingNodeUrl="sid:1002"/>
    </Template_Controls>
</SharePoint:DelegateControl>

image

First off Remove the following:
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
    <Template_Controls>
        <asp:SiteMapDataSource
          ShowStartingNode="False"
          SiteMapProvider="SPNavigationProvider"
          id="topSiteMap"
          runat="server"
          StartingNodeUrl="sid:1002"/>
    </Template_Controls>
</SharePoint:DelegateControl>

And then make the following changes to the static, dynamic and site map provider:
<SharePoint:AspMenu
  ID="TopNavigationMenuV4"
  Runat="server"
  EnableViewState="false"
  DataSourceID="topSiteMap"
  AccessKey="<%$Resources:wss,navigation_accesskey%>"
  UseSimpleRendering="true"
  UseSeparateCss="false"
  Orientation="Horizontal"
  StaticDisplayLevels="1"
  MaximumDynamicDisplayLevels="2"
  SkipLinkText=""
  CssClass="s4-tn"/>
        <asp:SiteMapDataSource
          ShowStartingNode="False"
          SiteMapProvider="CombinedNavSiteMapProvider"
          id="topSiteMap"
          runat="server"/>

The result would look something like this:
image

Thanks to c_marius for the comment and jsalazar80016 for the approach.

Wednesday, November 3, 2010

Hide custom code within SP 2010 modal windows

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:
image

If I create a new list item or upload a document, the Modal Window shows my custom div above the input form. Not good…
image

To fix this you simply have to add the “s4-notdlg” CSS to the custom DIV tag to hide it from the modal window.

Example:
<div class="s4-notdlg my-customdiv">Here is my custom header</div>

Now the modal window will not show my custom DIV:
image

Tuesday, November 2, 2010

Convert Folder Breadcrumb to Traditional Style

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.
image
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 in SharePoint 2007… Well to find it in 2010 you have to look hard (Which in my opinion is not a good thing). To find it. look in the ribbon for that little folder icon with the green arrow that is next to the site actions…
image
If you click on it, it will display a pop up menu with a hierarchy from the top of that site collection.

So to get the 2007 breadcrumb look and feel back you have to do some simple configurations.

First open up your custom master page and search for: “PlaceHolderGlobalNavigation

image

Within this control there is another place holder called “PlaceHolderTitleBreadcrumb

Simply delete the “PlaceHolderGlobalNavigation” Code and add in the following simplified code right above the “s4-mainarea” DIV.

<div class="custom-breadcrumb">
    <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
        <asp:SiteMapPath SiteMapProvider="SPContentMapProvider" id="ContentMap" runat="server"/>
    </asp:ContentPlaceHolder>   
</div>

The result should look like this: A bunch of Span and <a> tags.
image

Now it is time to add in CSS to make it look more like a traditional breadcrumb. Add in the following CSS to your global CSS file or master page:

<style>
.custom-breadcrumb{
padding:5px 0px 5px 5px;
font-family: Arial sans-serif;
font-size:8pt;
font-weight: normal;
background-color: #EEE;
border-bottom: 1px #CCC solid;
}
</style>

The breadcrumb should now look something like this:

image

You can download the sample master page HERE with the updated code above to get you started.

Enjoy!

Sorry for the changes, but I am sure you will enjoy this better without the errors!

Thursday, September 16, 2010

Hide First Tab in SharePoint 2010 Navigation

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.

image

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;
}

image

Enjoy!

Monday, September 13, 2010

Modal Pop-Up for a Unique Content Type

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&amp;RootFolder="
target="_self">
Add a Unique Content Type Item</a>

To find the custom content type ID, simply click on the list settings, within the content type section right click on the custom content type and then click on properties. Within the Address URL, the ID is at the very end after the “ctype=”

Simply Replace the above blue ID with your own custom one. This will allow you to have links to custom content types within the same list and not have to worry about the default content type settings.

Thursday, September 9, 2010

Ways to extend the SharePoint Modal Window

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

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>

image

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="javascript:NewItem2(event, &quot;http://www.microsoft.com/games/gamesforwindows/games/madagascar2/Mad2_Final_ENU.swf&quot;);
javascript:return false;" href="http://www.microsoft.com/games/gamesforwindows/games/madagascar2/Mad2_Final_ENU.swf" target="_self">Flash Game</a>

image

So basically you can show basically anything that you have a link to and can be visible within a browser.

Enjoy, and let me know what creative things you have placed in your modal window…

How To: Create Hyperlink to Modal Pop-Up Form

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.

image

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;http://SiteName/_layouts/listform.aspx?PageType=8&amp;ListId={83747BB4-49C6-4181-B4A3-F8C6B611846D}&amp;RootFolder=&quot;);
javascript:return false;"
href="/_layouts/listform.aspx?PageType=8&amp;ListId={83747BB4-49C6-4181-B4A3-F8C6B611846D}&amp;RootFolder="
target="_self">
Submit Feedback</a>

Full Code for a Library Item:
<a href="http://SiteName/_layouts/Upload.aspx?List={94AC86A8-6774-4822-A197-A98542251678}&amp;
RootFolder=" onclick="javascript:NewItem2(event, &quot;http://SiteName/_layouts/Upload.aspx?List={94AC86A8-6774-4822-A197-A98542251678}&amp;RootFolder=&quot;);
javascript:return false;"
target="_self">
Upload a Document</a>

What you need to change:
URL: Change “SiteName” to your URL
List ID: Change the list ID to your custom list/library ID

  • To find out the list/library ID, simply navigate to the list/library you want to display and then click on list settings
  • Look at the end of the URL.
  • You will get something similar to this: %7B94AC86A8%2D6774%2D4822%2DA197%2DA98542251678%7D
  • Remove the first %7B and the last %7D
  • Then change all %2D’s to “-“
  • So the final would be 94AC86A8-6774-4822-A197-A98542251678

You could also add in an image right within the <a> tag and make a nice button for users to click on. Once you have customized the code you can now simply add the code to any page on the site and you will get the following results:

Site Collection 2 hyper linking to a list on Site Collection 1

image

Wednesday, August 18, 2010

How To: Hide Left Side Navigation on Home Page

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.

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

image

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.

Friday, August 6, 2010

SharePoint 2010 Centered Fixed Width Design

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:

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

image

  1. 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 tied to a JavaScript file that forces a full width on the page.
  2. Now Open up your CSS file and add the following:
    1. body{
      overflow:auto !important;
      }
      form 
      {
      width:980px;
      margin: auto;
      }
  3. Your Site Should look something like this:

image

If you wanted to add some background color and borders to enhance the centered design replace it with this:

body{
overflow:auto !important;
background-color: #21374c;
}
.s4-widecontentarea{
background-color: #FFF;
}
form
{
width:980px;
margin: auto;
}

The following is how it might look:

image

The last draw back to fixing the width of a SharePoint 2010 site is that the content is within a floating <DIV> tag and if the content gets very wide by either a fixed with image or a list with many columns displayed it will spill off the page. I have no fix for this at the moment but it is something to consider.

image

Enable Small Social Buttons in SharePoint 2010

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"/>
image

New Small Control ID:
<SharePoint:DelegateControl ControlId="GlobalSiteLink3-mini" Scope="Farm" runat="server"/>
imageIf 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;
}

image
Enjoy!

Tuesday, July 27, 2010

State of Illinois SharePoint Site Now Live!

I have been working with the State of Illinois to get their public .gov SharePoint 2007 site up and running. http://www.illinois.gov.

image

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.

Monday, July 26, 2010

SharePoint 2010 Two Tier Global Navigation

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 how your reference the navigation control in the 2010 master page. Here is the reference:

<!-- Start Custom Global Navigation -->
                    <div class="s4-lp s4-toplinks">
                                <asp:ContentPlaceHolder id="DemoGlobalNav" runat="server">
    <SharePoint:AspMenu
      ID="demoGlobalNavAspMenu"
      Runat="server"
      EnableViewState="false"
      DataSourceID="demoGlobalNavSiteMapDataSource"
      AccessKey="<%$Resources:wss,navigation_accesskey%>"
      UseSimpleRendering="true"
      UseSeparateCss="false"
      Orientation="Horizontal"
      StaticDisplayLevels="1"
      MaximumDynamicDisplayLevels="3"
      SkipLinkText=""
      CssClass="s4-tn"/>
    <SharePoint:DelegateControl runat="server" ControlId="CustomXmlContentMapProvide" Id="DemoGlobalNavDelegate">
        <Template_Controls>
            <asp:SiteMapDataSource
              ShowStartingNode="False"
              SiteMapProvider="demoGlobalNavSiteMapProvider"
              id="demoGlobalNavSiteMapDataSource"
              runat="server"/>
        </Template_Controls>
    </SharePoint:DelegateControl>
                        </asp:ContentPlaceHolder>
                    </div>

<!-- End Custom Global Navigation -->

I have placed an example of this custom two tier navigation for SharePoint 2010 in the following .zip file: Download it Here

Here is how it will look:
image

Post a comment and let me know what you think. Enjoy!

Friday, June 11, 2010

Issues with moving search into top ribbon bar

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.

image

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.

image

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>

image

I saved the master page and then checked out what it looked like. The search was moved up correctly but it was not until I used IE8 dev toolbar to check for compatibility in IE7.

image

As you can see below in IE7 the search, and welcome link/drop down is no where to be seen and the ribbon tabs got all squished.

image

After doing some testing in IE7 mode an inline style gets applied to the ms-cui-TabRowRight with “Display: none”

image

I am not 100% why this is, but if I try to put the search anywhere else in the ribbon it just does not show… So I guess this is more of a warning to the designers out there. If you are thinking about putting the search in the top ribbon bar in your design comps know that there might be some issues with browser compatibility.

So what I ended up doing is moving the search to the left of the Social Notification tags. Wrapped it in a <td> tag and called it a day. The client was happy with the results since they were still able to have their navigation items and the search moved to a different location.

image

image

Please comment on this post if you have seen this issue before or have found a fix. Thanks!

Tuesday, June 1, 2010

SharePoint 2010 IA Wireframe Toolkit

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.

SharePoint 2010 Toolkit

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
wiki

Contacts Web Database
ContactwebDatabase

My Profile Silverlight Organization Viewer
MyProfileOrganization

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 still my application of choice for creating Hi-End wireframes for SharePoint.

So if you are interested in having EMC Consulting help with your SharePoint deployment, Infrastructure, Storage (EMC Core), Branding, Governance, Taxonomy, Navigation, wireframes, or any other type of consulting please check out:

Here are some of our core services around SharePoint:

Contact your local EMC Consulting representative and let them know I sent you!

Sunday, April 18, 2010

SharePoint Tab Web Part JQuery, Java, and CSS

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.

  1. 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.
  2. 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 I had to do was make a few adjustments of the HTML and create my own tab styles. The process to get this to work is you simply edit the page layout in the source link below (Code is already included in header control) and change the name of the tabs to what ever you want. You can have as many tabs as you want but if you go over 8 you will need to add more web part zones.

<li><a href="#tab-1" class="selected"><span>Tab1</span></a></li>
<li><a href="#tab-2" ><span>Tab2</span></a></li>
<li><a href="#tab-3" ><span>Tab3</span></a></li>

Once you have your tabs specified, simply choose what design you want. I created a few example designs that will get you started. To change the designs simply remove the commented out referenced style sheet and comment out the one you don’t want. You can place the support files anywhere you want but the links in the page layout point to the 12 hive: /_layouts/1033/styles/tabstyles/

For inspiration, I looked around the web and found a few unique styles that I wanted to replicate, and I also came up with a few of my own. Please download the Source Files HERE and give it a try!

Design 1: MSN
msntab

Design 2: Yahoo
yahootab

Design 3: WebMD
webmdtab

Design 3a: WebMD Alt
webmdalttab

Design 4: Rounded Tabs 1
roundtab

Design 5: Rounded Tabs 2
round2tab

Drop me a comment if you found this useful!