I finally figured out where the CSS definitions were coming from when I make a new WRTKit project in Aptana: WRTKit/Resources/UI.css. What I can't seem to find is the "best practices" way to override these CSS defintions. I don't really want my widgets to look just like the Nokia default ones, but I'm running into some issues with being able to assign IDs and classes to elements when I create all of the visual elements via the toolkit calls.
So is it appropriate to edit hte UI.css file? (I bet not). Is it appropriate to override it in my widget-specific CSS file? Or is it better to delete or bypass it, and start from scratch, in my widget's own CSS file?
Also, are there any guidelines detecting and tapping into a device's current theme to make the widget conform to the theme?
this is a good question! My personal advice, being that file really project-specific, is to directly edit it without worrying too much.. Of course, if there are any better solutions, I'd be glad to know them as well
I used my own css file with the same class, tag and id selector names as those in the UI.css that I needed to override. Make sure your custom .css loads after the WRTKit files and the browser will use the cascade rules to override the UI.css.
If you want different styles for controls of the same type (e.g.: you want 2 Labels with 2 different styles), or just change the default class names, you could also try to play with Control setClassName(element, className) method.