Matt Berseth

As a user, I am a fan of dashboard pages.  Many data centric web applications have these as landing pages (I know the one I am currently building does).  These pages usually display a high-level summary of the data the application is managing for the user.  A few weeks ago when I was playing around with some Google Analytic style skins I tried combining the AjaxControlToolkit's TabContainer control with a simple ListView rendered data table to see if I could mimic some of the dashboard controls that google uses.  I thought it turned out pretty well so I figured I would write a quick post ... For my example app I created a Sales Dashboard control that displays sales figures for all of the sales people in some fictional company.  The dashboard has three different tabs, each provides a different view of the same data.  For my example, the only...

I created a new theme for the AjaxControlToolkit's TabContainer  control and I was going to write a post discussing how I did it.  But as I was creating the post I realized that I have really written about all of the details before (see my TabContainer Archive page).  So instead of repeating myself, I decided I would instead put together a post that catalogs the Tab themes I have created so far and pull of them together into a single demo site that showcases each of these themes.  I plan on adding to the gallery as well as this post as new themes are added.  If I like how it works I might create similar pages for some of my favorite ListView and GridView themes as well.   Live Demo (IE6, IE7, FF and Opera) | Download   Google Analytics Theme Opera Theme LinkedIn Blue Theme LinkedIn Gray Theme Gray Theme...

Here are three quick tips you might find useful when using the Toolkit's Tab control.  I included demo's for all three tips so you can get a feel for how it looks and behaves. Live Demo (IE6, IE7, FF, Opera) | Download   #1: How To Change the Selected Tab When the Tab Header is MousedOver By default the tab control will switch the selected tab when a different tabs' header is clicked.  Depending upon the content you are displaying, you might find it useful to change the selected tab as the user mouses over a different tab.  I saw an example of this on designflavr.com.  This site has a tab control that displays the categories and tags and some other miscellaneous links.  These items are collected into a tab control that has been placed in the right hand sidebar.  You can get this mouseover style navigation by adding only...

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 ... Five AjaxControlToolkit Tab Themes created from DynamicDrive.com Dev.Opera.com Style TabContainer Theme JQuery TabContainer Theme with Tab Transition Animations Using CSS Image Sprites with the XP Themed TabContainer More Sample AjaxControlToolkit TabContainer Themes ... Creating a YUI TabView Style Theme for the AjaxControlToolkit's TabContainer Control 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) 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...

I found a few images on dynamicdrive.com and thought they would make a nice theme for the AjaxControlToolkit's Tab control.  Check out the live demo page to see if it is something you can use.  If it is - help yourself to the download. Live Demo (IE6, IE7 and FF) | Download If you haven't worked with theming the Tab control before, here are a few links ... Creating a YUI TabView Style Theme for the AjaxControlToolkit's TabContainer Control More Sample AjaxControlToolkit TabContainer Themes ... Using CSS Image Sprites with the XP Themed TabContainer JQuery TabContainer Theme with Tab Transition Animations Dev.Opera.com Style TabContainer Theme Below are the style rules I used for these tabs.  And here are the rules for the red tab.  The rules for all of the other colored tabs are exactly the same, only the background image url changes. That's it.  Enjoy!...

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

A few posts back I described a technique you could use to add Animation effects to your ModalPopup controls.  A similar technique can be used to implement a JQuery style fade animation that runs as the user navigates between selected tabs.  While the technique I used is very similar to the one I blogged about before, I thought I would pass along the stylesheet for the JQuery tab theme as well as a quick overview of how I implemented the transition. Live Demo (IE6, IE7, FF) | Download (Uses Toolkit Version 1.0.10920.0) JQuery Tab Theme Creating this JQuery theme wasn't too difficult.  I grabbed one of the stylesheets from a theme I had created before and tweaked the style attributes to what was required to look like the JQuery tabs.  My JQuery themed stylesheet is divided into 3 sections: common styles, styles for the inactive tabs and finally the styles for the active tab.  Just...

I recently blogged about how to create a YUI TabView theme for the AjaxControlToolkit's TabContainer control.  As a follow up to this entry, Peter Kassenaar asked the question: I just don't quite get how the CSS is able to extract the different (background) images from a single sprite.png file. I've googled for this, but that didn't help me much. Can you point us to a direction where this is further explained? This would give me the perfect opportunity to clean up my /images folder on the various themes of a project... In the YUI theme I created, I used a single sprite image and used CSS to pinpoint the location within the sprite for the background image of the tab panel header's.  Peter is asking how I did this.  To be honest, I just reverse engineered the CSS style attributes from Yahoo!'s demo site along with the exact same sprite image...

After working on a YUI TabView theme for the AjaxControlToolkit's TabContainer control, I thought it might be fun to create a few more TabContainer themes for some of the other tab-style controls that I have seen floating around the web.  I was especially curious in seeing what it would take to include images in each of the tab panel header's.        Below are the controls I was targeting, where on the Internet I found them, and a short description of what it took to create the corresponding theme.  If you are not familiar with how theming the TabContainer works, I recommend reading the documentation for the TabContainer control.  Download | Live Demo | View Stylesheet   Technorati Tab Theme I like Technorati's tab control because it simple, yet in my opinion it still has a nicer presentation than the default xp style TabContainer theme.  Here is a link to the page where I found this control. Notes: To use this theme, include a link to...

I was browsing the YUI documentation and I came across a very nice looking tab control.  I thought it would be interesting to create a similar styled theme for the AjaxControlToolkit's TabContainer control.  I don't mind the default XP-themed TabContainer, but I think the XP style tab's are getting a little bit dated.  I had not previously created a theme for a TabContainer, so I had no idea what to expect.  It turns out it was very easy to do.  Below are the steps I followed ... Live Demo | Download Code [Update 10/1/2007] : Updated CSS so it would work with IE6 Check out here for additional TabContainer theme Check out here for an XP without the roll-over flicker   Read the 'Tab Theming' Section of the TabContainer's Documentation Because I haven't created a custom theme for this control yet, I needed to do a little research before getting started.  I read through the paragraph on the toolkit's sample site that explains how...

I am currently working on a data-centric web application.  The page I most recently worked on allows the user to browse data from six different tables (a primary table, and five other tables that have 1-M relationships to the rows in the primary table).  A row from the primary table is displayed in a DetailsView.  Below the DetailsView is a TabContainer control with five tabs; each tab contains a GridView that displays the related rows in the other five tables.  Below is a screen shot of what the TabContainer portion of the page looks like.  Live Demo | Download Sample Site When I first developed the page, I bound the DetailsView and each of the GridViews to the corresponding DataSources like I usually do.  Everything worked great in our development environment.  The grids filled nicely and I could move around from tab to tab with no problems.  However, when we moved the page into our production environment loading the page was terribly slow.  In production, we have n-times more data and...