Im going to include the full (email) reply for completeness:
So there are a few ways to style:
1. Module.xml
Create a module.xml on the class path and reference the themes there:
<?xml version="1.0" encoding="utf-8" ?>
<module>
<resources>
<resource path="assets" prefix="assets" />
</resources>
<themes>
<global>
<style resource="assets/external1.css" />
</global>
<default>
<style resource="assets/external2.css" />
</default>
</themes>
</module>
• The node name is the name of the theme, global is a special one, it will always be applied regardless of the theme used.
• Also note that, for now, you might have to use “!important” in the css to make sure it works – im writing a new css engine (which is basically done) which doesn’t need this as it uses a “weighted include order”, but for you now you might need “!important”
2. Reference from XML
If you are using XML, you can import a style sheet from there:
<style source="/external3.css" />
• The path of the style sheet is relative to the XML that imports it
3. Style block
Its not external but you can also use styles between a style block in XML:
<style>
.button {
padding: 20px;
}
</style>
4. Inline style
Also not external but you can inline style:
<button text="Click Me!" onclick="this.text='Thanks!'" style="border-radius: 10px;" />
5. Via code:
Finally, not external, but you can do it in code too:
Toolkit.styleSheet.addRules(".button { background-color: yellow !important; }");
or
myButton.fontSize = 100;