Overriding and Combining Themes
Using multiple themes
Dijit includes Noir and Soria themes as well as Tundra. You will be able to include additional CSS files into your document, like:
@import "http://o.aolcdn.com/dojo/0.9.0/dijit/themes/noir/noir.css";
@import "http://o.aolcdn.com/dojo/0.9.0/dojo/resources/dojo.css"
</style>
noir.css will define rules like:
so it won't conflict with tundra.css.
To have different sections of your document that are different themes, you just change the class of each section. For example, to make the main document tundra theme, but then have sections that are noir and soria theme, do:
...
<div dojoType="dijit.layout.TabContainer">
<div dojoType="dijit.layout.ContentPane" label="Tab1" class="noir">
<input dojoType="dijit.form.TextBox">
<button dojoType="dijit.form.Button">Noir Button</button>
...
</div>
<div dojoType="dijit.layout.ContentPane" label="Tab2" class="soria">
<input dojoType="dijit.form.TextBox">
<button dojoType="dijit.form.Button">Soria Button</button>
...
</div>
</div>
...
</body>
All the widgets in the first tab will have the Noir theme and all the widgets in the second tab will have the Soria theme.
Overriding a theme
You can also define a variation on a theme (much like Handel). Let's say that you like the tundra theme but for each tab above, just want to change the background color of the form widgets. You would define yellowForm and blueForm to just change the background color:
.blueForm .dijitButton, .blueForm .dijitInputField { background-color: blue; }
Then you would reference the override class in a similar way to above:
<div dojoType="dijit.layout.ContentPane" label="Tab1" class="yellowForm">
<input dojoType="dijit.form.TextBox">
<button dojoType="dijit.form.Button">Yellow Button</button>
...
</div>
<div dojoType="dijit.layout.ContentPane" label="Tab2" class="blueForm">
<input dojoType="dijit.form.TextBox">
<button dojoType="dijit.form.Button">Blue Button</button>
...
</div>
</div>
The two tabs would then be tundra theme except for the background color on form fields
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post
Overriding does not work
The sample given here looks absolutely awful with Dojo 0.9. Firefox displays the TextBox nicely, but the Buttons only have a small line that turns yellow when you move the mouse over it. IE screws it up completely.
I have experimented myself with customizing Buttons and I have had lots of problems.
Well, it does, but...
the buttons weren't looking proper because the label was omitted. Fixed now.
If you still have trouble with customizing buttons, stop by the forums and drop a line.
Change the class programmatically
How to change the class programmatically when creating a widget like a TitlePane??
I think you suppose to do it
I think you suppose to do it like this, but I havent had any luck :(
new dijit.form.TextBox(
{
class:"nameofyourcssclass"
},
dojo.byId("nameofyourinputelement"));
API Reference:
http://api.dojotoolkit.org/jsdoc/dijit/HEAD/dijit._Widget