appceleratorappcelerator-titaniumtssappcelerator-alloy

Mobileweb assign custom css

Is it possible to assign custom css properties to UI elements through tss or other means?

I was trying to do something like this in app.tss:

".myView[platform=mobileweb]": {
    -webkit-box-shadow : '10px 10px 5px 0px rgba(0,0,0,0.75)',
    -moz-box-shadow : '10px 10px 5px 0px rgba(0,0,0,0.75)',
    box-shadow : '10px 10px 5px 0px rgba(0,0,0,0.75)'
}
Solution

  • Titanium Mobile Web doesn't really support this. DOM nodes don't have unique ids or class names that you can use to reference specific DOM nodes.

    It does, for example, apply a class each UI element, so you could add a box shadow to all buttons. Since Titanium UI elements are comprised of multiple DOM nodes, you'll have to figure out the exact DOM structure of the UI element you want to change using the browser's web/dom inspector.

    You won't be able to define your custom style using TSS. Instead you'll have to add it to the splash.css since that's the only place that arbitrary CSS is loaded.