Styling dijit.form.Button, the easy way!… with baseClass

As a follow up to my previous post, I’d like to add to my final comment about using the baseClass attr on dijit.form.Button to make styling nice and easy!

In the past, when trying to use the class attr to skin a dojo button, I’ve always came across problems, because they class you add ends up about 4 layers deep into the Dijit, thus making it hard to get a handle to the outer elements of it.
To get around this, I’ve adopted a method of ‘wrapping’ a button in a span with an appropriate class as follows:

<span class="roundBlueButton">
	<div dojoType="dijit.form.Button">Text</div>
</span>

Allowing CSS as follows:

span.roundBlueButton .dijitButton {
	//now let's style it!!
}

BUT, obviously that’s not ideal now is it?!
So digging around inside some dijit button demos, (search for Test_Button.html in the dijit code base) I found an example where the class “acmeButton” is added to some buttons, not using ‘class’, but by using the mythical ‘baseClass’ attribute. It seems that this attribute overrides the class on the outermost element of a dijit.form.Button and allows you to now, finally, get a handle on that button and unleash your creative side!

<div dojoType="dijit.form.Button" baseClass="tomButton">Text</div>
.tomButton {
	//now let's style it!!
}

Even better still, this seems to remove the dijitButton class rather than adding to it, meaning that your dijit Button, is now a nice, plain black bordered, white backgrounded button…basically a blank canvas!!

This custom class you have added, now get’s used in the button’s CSS mix in functions. So in the case of my tomButton class, you’ll find that your dijit gets supplemented with tomButtonHover, tomButtonActive and tomButtonFocused under the right circumstances. Thus allowing you to style hover over effects etc.. for troublesome browsers such as IE6, IE7, IE8, probably IE9 and then IE10, 11, 12 etc.. going forward!

So there you have it! An easy way to style a dijit Button! This ‘baseClass‘ attribute should be applicable to many different types of button!
So good luck and enjoy!!

As a final comment: I’ve found that in some cases you need to add ‘!important‘ tags to your CSS classes in order to ensure that they get applied. This seems to be required when trying to apply background images etc…