Home | Dojo Cookies

Posted in Dojo Cookies

Overriding themes

Dojo comes with awesome themes, all ready to be used out of the box.
Unfortunately sometimes it happens that you want to change one little thing, say the font size of your accordion pane.

Here is how you’d do it:

Hello
Hello Again
Yep

All you need to do is to make a more specific selector which causes the new rule to take precedence over the dijit default rule. Lets call it .new:

<style type="text/css">
.new .dijitAccordionText {
    font-size: 23px;
}
.new .dijitAccordionTitle .dijitAccordionArrow {
    background:transparent url("images/left.gif") no-repeat scroll 0%;
}
.new .dijitAccordionTitle-selected .dijitAccordionArrow {
    background:transparent url("images/down.gif") no-repeat scroll 0%;
}
</style>

Now we’ll add the class to the dijits we would like to change and voilà:

<div class="new" id="accordeon" dojoType="dijit.layout.AccordionContainer">
	<div dojoType="dijit.layout.AccordionPane" selected="true" title="Pane 1">Hello</div>
	<div dojoType="dijit.layout.AccordionPane" title="Pane 2">Hello Again</div>
	<div dojoType="dijit.layout.AccordionPane" title="Pane 3">Yep</div>
</div>
Hello
Hello Again
Yep

To find out what css classes you can use, either take a look at the default theme CSS files or use Firebug which can be of great help.

Tags:

« Mucking Dijit