LeoTech

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

[Edit: Updated for 0.4.3]

dojo.widget.Button is slick and nifty, but the default blue doesn’t suit all sites. Unfortunately, it’s harder to customize than dojo.widget.TabContainer. The demo suggests creating a subclass, but that’s not to my taste — that mixes your code into the Dojo directory tree, whereas I prefer keeping thing loosely coupled. I favour a simpler way:

This assumes that your directory tree is:

• mysite
  • images
    • images/atomButton-l.gif
    • images/atomButton-r.gif
    • images/atomButton-c.gif
    • …
  • dojo
    • src
      • widget
        • Button.js

The first ../ takes you into src/, the second into dojo/, and the third into mysite/.

The path was handled differently before 0.4.3. You only needed one ../.

I copied all the soria gifs from dojo/src/widget/templates/images/ to my own images/ directory. I then applied Photoshop’s Image > Adjustments > Hue/Saturation filter with [x] Colorize, Hue of 192, and Saturation of 50. This got them to matching the background — itself Hue of 192 and Sat of 50. Finally, I put in the four lines of code above.