Matt Berseth

While doing some research this afternoon I ended up on dev.opera.com.  Its a nice looking site.  The combination of colors, fonts, and images make browsing the sites content enjoyable.  I was especially impressed with the tabbed menu that sits at the top of the page.  The tabs are rounded, have rollover states and are very professional looking. 

So during some downtime this afternoon I created a new theme for the AjaxControlToolkit's TabContainer control using the same images and styles as dev.opera.com.  Because I have created a few themes before (jquery, yui and technorati), I was able to reuse the general structure of one of my previous stylesheet's and just plugged in my new images.  

Live Demo (IE6, IE7 and FF) | Download (.Net 2.0 and Toolkit Version 1.0.10920.0) 

Tab Header Images

This tab theme uses images to form the rounded corners.  The original images on dev.opera.com didn't have transparent background, so I used Paint.NET to set the background transparency (if you haven't used Paint.NET before, I highly recommend it).   

Stylesheet

After I modified the images, I plugged them into my stylesheet and tweaked a few other style elements.  Just like my previous post, I have separated my stylesheet into 3 logical groupings.  The first section contains general style rules, the second for inactive or non selected tab headers and the third for active tabs.  Here is a link to the stylesheet.

General Style Rules

Inactive Tab Header Style Rules

Active/Hover Tab Header Style Rules

That's it.  Enjoy!