LinkedIn Style Themes for the AjaxControlToolkit Tab Container Control

Here are a couple more themes for the AjaxControlToolkit's Tab control based on the tabs found on LinkedIn.com.  Below the screen shots are a few bullet points discussing how I created them.  If tab theming is new for you - it might be helpful to check out these other samples as well ...

As usual, here are the links for the demo and download ...

Live Demo (IE6, IE7, FF, Opera 9.26)  | Download (.Net 3.5 and AJCT 3.5.11119.0)

image

Tab Header Images

Different images are used all three tab states: {Default, Hover, Active}.  Each tab is made up of 2 images, the left edge and the tab body plus the right edge.  Because a the three states are rolled into 2 images, no flicker occurs during a roll-over because the hover state images have already been loaded.  Here are the 2 images used for the blue themed tab. 

      

 

Shifting the Tab Header to the Right

The Toolkit's demo page for the Tab control has the tab header left aligned.  If you would rather have the header strip shifted slightly to the right (like I have done for this sample), it can easily be done with a stylesheet.  Just specify a left margin for the .ajax__tab_header class like I have done below.

image

Can I Apply Different Background Images to Different Headers?

The LinkedIn page has different header images applied to different tabs within the same container.  I was curious if something like this could be done with the Toolkit's Tabs control.  I wanted it to look something like this ... 

image

I was hoping the CssClass attribute on the TabPanel class could be used to accomplish this (highlighted in the screen shot below), but it looks like this attribute is never rendered.  So I guess the answer is No, not at this time (Someone please let me know if I am wrong). 

image

Ok, The Tab Headers Look Nice, What About the Tab Body?

I was thinking the same thing, having just a box around the content area of the tab doesn't always look so great.  So for this sample, I included some rounded corners to see if that helped spruce up the content area.  I think it does.

That's it.  Enjoy!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/106

Listed below are links to weblogs that reference LinkedIn Style Themes for the AjaxControlToolkit Tab Container Control:

» Matt Berseth: LinkedIn Style Themes for Tab Container Control from DotNetKicks.com
You've been kicked (a good thing) - Trackback from DotNetKicks.com [Read More]

» 【收藏】推荐系列:2008年第08期 总10期 from Jacky_Xu
总第10期推荐系列,总共有8篇文章,内容涉及ASP.NET3.5、Silverlight、ASP.NETMVCFramework、Spring.Net、Unity等。 1.TagCloud... [Read More]

Comments


@Jason

I noticed that this morning - I thought it was kindof ironic. Here I am copying their designs because I like them and they go and change it all around.

Not so sure I like their new designs. Well see, maybe it will grow on me.

Matt.

I thought it was a funny coincidence about the LinkedIn relaunch today too. Doesnt matter though -- I am sure I will be using your example here in some upcoming projects. Thanks for the article.

Posted by: Harry Oldman on March 5, 2008 12:00 AM

Hi Matt,
how can i implement this in an ASP.NET -Masterpage ?

could you please post this in an real world example ?

regards

Harry

Hi Matt,
I did implement different coloring for tabs with the current version of the ajaxcontroltoolkit. You can find an example of this here: http://forums.asp.net/p/1219990/2181712.aspx

It is just that the way you can achieve it is bad coding I think because I create a different css style for each tab.

Kind regards,
Wim

Cool Tabs thanks.

Posted by: Mahendra on June 13, 2008 12:00 AM

Hello

I have a very big issue with ComponentArt Menu. I am using ComponentArt Menu in master page. In one page I am using MSAjaxTabContainer but this TabContainer is not displaying while run time. I am getting following errors.

Sys.UI.DomEvent is null or not an object.
Sys.Application is null or not an object.
Sys.WebForms.PageRequestManager is null or not an object.

I have gone through many fourms and checked regarding that.

If I do with simple asp menu in master page instead of ComponentArt it works fine.

Please help me regarding that. Please................its very urgent...

Thanks in ADVANCE

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Mahendra wrote: Hello I have a very big issue with ComponentArt Menu. I am using ComponentArt Menu in master page. ...
  • Alquma wrote: Cool Tabs thanks. ...
  • Wim De Blende wrote: Hi Matt, I did implement different coloring for tabs with the current version of the ajaxcontroltoo...
  • Harry Oldman wrote: Hi Matt, how can i implement this in an ASP.NET -Masterpage ? could you please post this in an real...
  • Jason Kealey wrote: Did you notice that LinkedIn just had a redesign? <a href="http://www.techcrunch.com/2008/02/27/lin...
  • Matt Berseth wrote: @Jason I noticed that this morning - I thought it was kindof ironic. Here I am copying their desig...
  • Scott Isaacs wrote: I thought it was a funny coincidence about the LinkedIn relaunch today too. Doesnt matter though --...