Theming sencha touch list

Question

I want to change the color of the headers in a grouped list. For the moment I've got the default theme. I think I have to use something like "$list-header-bg-color" but :

• WHERE can I use it ? I tried to write something like :

  $list-header-bg-color = '#CCC'

directly at the end of the "sencha-touch.css" file but it doesn't work at all ... Somebody can explain me how does it works ? (with a little example please). Thanks in advance

Answer 1

First you need to install ruby

then install ruby gems

then install compass

then open your application *.scss file (should be in resources/sass/)

after the line

@import 'sencha-touch/default/all';

include your line

$list-header-bg-color = '#CCC'

Note that by default the value of this var is

$list-header-bg-color: transparentize(saturate($base-color, 10%), .25);

Maybe you can change the base-color to have a more "unified" look (depending on what you want to do ...)

then compile your scss file

compass compile

Now your theme should have been compiled to your app.css and your new color is good :)

For more detail check this article I wrote not long ago : sass-for-sencha-touch-2-windows-7

Answer 2

Sencha is using SASS for theming. So that line should go in the sencha-touch.scss file. Then you should compile that file with compass to get a css file. See this videos:

• http://vimeo.com/26506883

• http://vimeo.com/17879651

  • slides from presentation http://www.slideshare.net/senchainc/theming-sencha-touch
  • reference docs http://dev.sencha.com/deploy/touch/docs/theme/

Check this also http://www.sencha.com/blog/sencha-touch-theme-contest-winners-announced/