[Edit: This was written for 0.3. I will update shortly with correct procedure under 0.4.1]

Speaking of dojo.widget.TabContainer being easier to customize, how do you customize dojo.widget.TabContainer?

There’s no need to fiddle with Javascript. A minor catch aside, it’s all straightforward CSS.

Take a look at its default CSS:

/* snip */
.dojoTab {
position : relative;
float : left;
padding-left : 9px;
border-bottom : 1px solid #6290d2;
background : url(images/tab_left.gif) no-repeat left top;
cursor: pointer;
white-space: nowrap;
z-index: 3;
}
/* snip */
.dojoTab div {
display : block;
padding : 4px 15px 4px 6px;
background : url(images/tab_top_right.gif) no-repeat right top;
color : #333;
font-size : 90%;
}
/* snip */

Well, that’s that. You just need to find tab_left.gif and tab_top_right.gif, copy them to your images/ directory, and tweak them to your liking. Once done, add code to your CSS that looks like this:

body .dojoTabPaneTab {
background: url(../images/tab_left.gif) no-repeat left top;
}
body .dojoTabPaneTab span {
background : url(../images/tab_top_right.gif) no-repeat right top;
}


The two catches are:

1. I’ve added a body for a reason. It has to be more specific than the widget CSS, or the widget CSS will override it.
2. Image paths in CSS files have to relative to the CSS file.

Oh, and if you think your CSS is being mysterious overridden in the greater cascade of stylesheets, you can stick in an !important thusly:

color:#000000 !important;

That forces the rule to win out over conflicting rules. It’s not a good practice, but it’s standards-compliant and helpful for debugging.