Overriding themes
by Nikolai Onken

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 Again

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%;

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>
Hello Again

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.


This entry was posted on Tuesday, February 26th, 2008 at 11:01 pm and is filed under Dojo Cookies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Overriding themes”

  1. emilya Says:

    It really seems simple but I can’t seem to be able to modify anything without breaking it. Specifically I need the content panes to autosize to accomodate content (no scrollbars). Would you have any idea how to do this? Has anyone done this in such a way so I can see an example? I appreciate any help whatsoever. Thank you in advance.


  2. dante Says:

    @emilya - what you are trying to do isn’t a supported feature technically. The AccordionContainer is a set size, and the panes are sized for you based on the remaining available height from the other Titles … It would be possible to hack in the behavior you desire, but would be slightly more complicated than comments would allow, though this might get you going in the right direction:

    dojo.subscribe(”myAccordionId-selectChild”, function(child){
    dojo.style(child.containerNode, {
    height: child.containerNode.clientHeight + “px”

    which is just done from the top of my head. the clientHeight is the key though, that’s the height of the content in the AccordionPane … adjusting the overall accordionContainer may be necessary as well.

  3. emilya Says:

    Thank you! I’ll try to explore that.

Leave a Reply

You must be logged in to post a comment.