Skinning Dojo to coporate identity

Question

Does somone knows good ressources about customizing the Dojo Dijit Themes ? Or has expierence with it?

We are planning to change them to our coporate identity and i have no idea how much time does this can cost.

Answer 1

See here : http://docs.dojocampus.org/dijit-themes

What version of dojo do you use? The new 1.5 release (still a release candidate at the moment), has a new theme called 'claro' that now uses gradient images in the css so skinning should be much easier as all you will have to do is override dijit colours rather than having to create gradient images.

See here : http://docs.dojocampus.org/releasenotes/1.5

Answer 2

I have skinned lots of dijits. It's pretty straightforward.

You have two options. Either copy the theme folder and tweak or use a default theme and season to taste by overriding the CSS.

I prefer the second option. Just include a CSS file on each page you use dijits, containing rules to tweak the dijits to your preference. The easiest way to do this is to examine the rendered dijit in Firebug and copy the css. As long as your stylesheet comes later, you'll override, but you may wish to give the changes greater specificity just to be sure.

So, say I have a button I want to change the colour of. Looking in Firebug, I see the rule which applies the background is this (tundra.css line 1970):

.tundra .dijitButtonNode {
 background:url("images/buttonEnabled.png") repeat-x scroll left bottom #FFFFFF;
 border-color:#C0C0C0 #C0C0C0 #9B9B9B;
 border-style:solid;
  border-width:1px;
 padding:0.1em 0.2em 0.2em;
}

In the my_dijit_theme.css file I put:

body.tundra .dijitButtonNode { /* added "body" to increase specificity */
 background:url("/my_images_folder/my_dijit_theme/my_buttonEnabled.png");
}

IRL, you would also change the borders to match, etc. but this shows how easy it can be.