Tuesday, August 06, 2013

customize the format for dojo widgets

Recently I just started the POC on a small reporting tool based on dojo (The major effort is still at the server side - controller & model layer, which sends JSON objects to be presented in the frontend.)
After going through a few documentation on the dojotoolkit website, I still could not find the information how I can customize the look and feel of widget. Good thing about javascript library is that you can always see the code. -- after browsing the contents of the dijit/themes/claro subdirectories, it looks not so difficult for me to find out how to do the customization, because the dojo class names are quite intuitive.
For example, if I'd like to change the style of the accordion title, I can use the following selection in the css file (menuPanel is the container of the accordion in my html file):
#menuPanel .dijitAccordionTitle{
...
}
#menuPanel .dijitAccordionInnerContainerActive .dijitAccordionTitle, #menuPanel .dijitAccordionInnerContainerSelected .dijitAccordionTitle{
...
}
To change the title or tab label for tab container, the following can be used (centerPanel is something from my code, not part of dojo):
#centerPanel .dijitTabChecked {
...
}
#centerPanel .dijitTabContainerTop-tabs{
...
}
Things become easier if you dig a bit more :-)

No comments: