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:

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

<style type="text/css">

    @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:

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #000000; font-weight: bold;} .geshifilter .kw2 {color: #993333;} .geshifilter .co1 {color: #a1a100;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #933;} .geshifilter .re0 {color: #cc00cc;} .geshifilter .re1 {color: #6666ff;} .geshifilter .re2 {color: #3333ff;} .geshifilter .re3 {color: #933;} .geshifilter .re4 {color: #933;}

.noir .dijitButton { ... }

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:

<body class=tundra>

...

        <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:

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #000000; font-weight: bold;} .geshifilter .kw2 {color: #993333;} .geshifilter .co1 {color: #a1a100;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #933;} .geshifilter .re0 {color: #cc00cc;} .geshifilter .re1 {color: #6666ff;} .geshifilter .re2 {color: #3333ff;} .geshifilter .re3 {color: #933;} .geshifilter .re4 {color: #933;}

.yellowForm .dijitButton, .yellowForm .dijitInputField { background-color: yellow; }

 .blueForm .dijitButton, .blueForm .dijitInputField { background-color: blue; }

Then you would reference the override class in a similar way to above:

<div dojoType="dijit.layout.TabContainer">

        <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