Last week, I stumbled upon this comment on Twitter:
“I have used and love easy tabs, but I do need pretty on my current engagement”
What? Not pretty, my Easy Tabs? Let me set the record straight.
First, let’s make sure we are on the same page. The current version of the Easy Tabs is v5, compatible with both SharePoint 2007 and SharePoint 2010. You can build your own here:
http://sp2010.pathtosharepoint.com/SharePoint-User-Toolkit/Pages/Easy-Tabs-v5.aspx
By default, the form offers two styles: one taken from SP 2007, and the other taken from SP 2010. Note that both options work on both SharePoint versions (for example, you can pick the SP 2007 style for your SP 2010 site).
You don’t like the colors? Well, talk to Microsoft! I did not invent the styles, I am reusing the default ones you get when you create a team site. The significant advantage here is that you don’t have any external dependency, just add the Web Part to a page and it ‘ll work.
If you want other colors, feel free to pick your own. Click on the “Modify colors” option, and you’ll be presented with a color picker, allowing you to choose your own background and font colors.
Not satisfied yet? Well, you can take it one step further. Look at the Easy Tabs code, and you’ll see that it is made of two independent parts: the stylesheet (style tag) and the tab builder (script tag). Modify the stylesheet as you please to get the final look. As an example, I have built this demo that has it all (rounded corners, hover effects, gradient):
http://sp2010.pathtosharepoint.com/Portfolio/Pages/Styled-Easy-Tabs.aspx
The purpose of the SharePoint User Toolkit is to open the door to advanced designs. Don’t see these tools as final products, but rather as a startpoint to build your own solutions. The beauty of such “User Managed Solutions” is that you have full control on them, and can tweak them to fit your specific needs. I took the Easy Tabs as example, but I could have chosen the image rotator, or other solutions from the toolkit.
If you are interested, I’ll start offering in a couple weeks a new series of online workshops, where I’ll show how to make the most of these tools. Feel free to contact me now if you have specific needs.
If you are a Web designer, or a SharePoint pro, looking for solutions for your customers, I have many other tools in my drawers. Come talk to me about your requirements, and let’s start a collaboration! We can also discuss this on LinkedIn, in the SharePoint User Managed Solutions group. And if you are in San Diego, or the Bay Area, I’ll be there in a couple weeks and we can meet in person.
Path to SharePoint... and Beyond! 
Absolutely agree with you here. I found your solution simple enough to be used immediately, yet extensible enough to modify it more towards my needs and wants.
I can say from personal experience that I have had a lot of fun taking some of your solutions and modifying them to use in slightly different ways.
I am not a programer, I understand enough about code to get into trouble. I have been able to look at the code for some of your solutions, and following your explanations begin to see how it all works. Then when I want to do something a little different I have a better understanding of how to go about it. That has been perhaps the most far reaching benefit of using your solutions, beyond simple color change options, which are very cool by the way. 🙂
Thank you for all the time and effort you put into not only creating the solutions, but for shareing, explaining how they work, and answering questions. It is appreciated.
Trudy Hutzler
I recently found your site, and have to say that you are a genius!
Adding some of your scripts to our site has made it far more user friendly and dynamic. I look forward to seeing what else you produce over the coming months.
A request if I may. Is it possible to use a calculated column to produce an ID field, based on the number of items returned in a view?
We have a list that has the overall ID field, and several filtered views. It would be nice to get a quick and easy reference as to how many items are in that view.
Thanks, and keep up the fantastic work!
Thanks Mark!
Calculated columns only know the current item. For aggregated values, you’ll need to use a different method, for example a looping workflow.
Look at what I’ve done… ;-P I knew the current version could be made *pretty*, so I had to say something, you know? Seeing your version that you created for this post is an excellent example. It’ looks just like it was built with jQuery. I definitely know that’s not the case because I always read your posts suggesting to build the solution in pure javascript.
Hands down, Easy Tabs is my favorite freebie out there on the internet. Many thanks for sharing!
Thanks Matt! That’s right, it all started with your comment (I mean, not the one in the post).
I use jQuery too, but this new trend of “cross-browser CSS3” is offering an excellent – and much lighter – alternative for styling.
Christophe, your solution has wowed so many of our clients that you have become a legend in our office. EasyTabs without customization (beyond the generous options you already provide) is certainly an attractive solution, but the real beauty lies in the flexibility of your soluton. Anyone who accuses EasyTabs of being un-pretty is short-sighted, inexperienced and just plain lazy.
Thanks Jessica, glad to hear my solutions are helpful!
The comment actually came from a person who knows her SharePoint stuff very well, that’s why it was really a wake up call for me. That’s the reality of SharePoint: it is such a rich platform that nobody can claim to master all the parts (well, sometimes we may be lazy too). This is even more the case today as Web design in general is going through major transformations.
I cannot publish all my solutions and their variations, but my objective for 2011 is to write more posts like this one, to better communicate on the power of these “User Managed Solutions”.
Jessica, if you have done some interesting customizations on the Easy Tabs, I’d love to see the screenshots! (and my blog is open to guest authors btw…).
Hi, i tried to use the styled easytabs with listsviewwebparts. i added following style to hide the 1px little space between tabs and content.
.s4-wpTopTable
{
border-top-width: 0px !important;
}
but dont get round corners for the content
Hannes, did you include the PIE.htc file from CSS3 PIE? This is what makes rounded corners work in Internet Explorer.
The stylesheet alone will create rounded corners in browsers like Firefox or Safari.
Hi Christophe, yes, of course. i get round corners for the tabs. everything works fine without the content corners.
in addition i cant get working the listsnapshot script. no errors or anything. the paths to the jquery js and the listview is correct but the content of the contentwebpart is empty. the green wheel is showing for few seconds but after that nothing.
in addition for the easytabs the mouseover hover effect isnt delayed it is instant. why ?
the path to the pie.htc etc are correct in the styletags
Hannes:
– did you include debugging for the list snapshot?
– the delayed hover effect only works in some browsers, see my demo page for details.
– rounded corners: do they work for you when you display my demo page? If so, what is different in your own implementation?
These tabs are great, but I was even more impressed with the CSS styling you used in your example. I got it to render in Google Chrome, Firefox, and IE 8 no problems.
Unfortunately, the content box under the tabs doesn’t render rounded corners in IE 9. Do you have any tips or can you point me in the right direction?
Sorry John, I don’t have an answer to this. IE 9 supports rounded corners natively, have you tried removing the pie code, or putting it between conditional comments so that it only applies to IE 8?