0

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)'
}
don
  • 4,113
  • 13
  • 45
  • 70

1 Answers1

1

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.

Chris Barber
  • 456
  • 2
  • 8
  • This is really bad news... They should definitely add a way to give an id or a custom attribute, if not custom css, to UI elements... – don Jan 20 '16 at 01:53
  • The DOM is a browser API and Titanium doesn't have a DOM. When we set out to build Titanium Mobile Web, there wasn't a need or desire to expose the underlying DOM to a Titanium app. If we exposed the DOM to the Titanium app, then developers would inevitably write code that won't work with iOS, Android, and Windows. – Chris Barber Jan 20 '16 at 08:00
  • Well I might be missing something as I'm surely not a pro, but I was thinking that we could have a way to assign some kind of tag, class or really anything so that we can then use it to better style a custom CSS to improve the UI in the browser. Some of the default UI elements of titanium are really poor and, more important, they do not necessarily reflect the style of each app – don Jan 20 '16 at 09:10
  • I started down the road of adding support for themes. Much of the style information is in the global common.css instead of in the theme specific css file. One of my top 3 goals was to make Titanium Mobile Web "sexy" for lack of a better term. Theme support, animations, inertia scrolling, etc. The kind of thing we're seeing in Material Design. So, I agree that it doesn't look very good out of the box. Part of the problem is virtually every app we saw used actual custom images for buttons, so the default colors didn't matter. – Chris Barber Jan 21 '16 at 10:34
  • 1
    We do have classes on many of the UI elements. Ti.UI.Button for example has a class "TiUIButton", but that would affect all buttons. However, there is something you can do... every Titanium Mobile Web UI element has a undocumented property called "domNode". You could just do `mybutton.domNode.setAttribute('id', 'foo')` or `mybutton.domNode.classList.add('bar')`. This obviously would bork on iOS/Android. Another pro tip, if you no longer need a UI element, call the undocumented `destroy()` method on it: `mybutton.destroy()`. iOS/Android have hooks into GC to clean it up, Ti Mobile Web does not. – Chris Barber Jan 21 '16 at 10:43
  • That is exactly what I was looking for, I couldn't thank you more! Perhaps my question was not clear enough, but this should definitely be the accepted answer (which honors a lot more the great TitaniumSDK :-) ) – don Jan 21 '16 at 18:28