Theming Sencha Touch - Compass & SASS Required?

[quickfire55]

I'm pretty new to Sencha Touch. From what I've played with, it's a great framework. I'm working on my first production site and I'm having some issues wrapping my mind around the theming. Are Compass & SASS really required to change the colors of the theme? It seems ludicrous to me that a simple color change would require so much work. I'm working on a Windows 7 machine and I don't know Compass, SASS, or Ruby.

Am I missing something?

UPDATE

I purchased the Compass.app and told it to watch my SenchaTouch\Resources\SASS folder and I got this error message: pastebin.com/gksz3kUf. For a newcomer to Sencha, Compass/SASS, and Ruby, how am I supposed to know where to go from there?

[jjerome]

You can take the other route by modifying the .css files that Sencha provides. Or make a new .css and copy the sencha.css content (to customize your own without overwriting Sencha's).

Look at your sencha touch folder (sencha-touch-1.1.0) -> resources -> css-debug
and pull out the sencha.css

Then just modify the hex/color values to get what you want. There is plenty of RGB/Hex color tables out on the internet too.

The debug version will help you navigate since the code is not all on one line.

Hope that helps a little

[davidkaneda]

Hi quickfire55,

First, from an official point of view, no — a custom theme is not required for the contest, but of course will help your chances. Also: As jjerome mentioned, you're totally welcome to adapt the theme just using CSS as you normally would. Sass just makes things much easier by using variables and some color theory magic.

That being said, I'm not quite sure what your error is, except it looks like it's not finding our themes folder. I would check your config.rb to see if the paths look correct. Have you read this? http://www.sencha.com/blog/an-introd...g-sencha-touch

Thanks,
Dave

[quickfire55]

Yes, I've read and re-read the tutorial. Here's the error I'm currently getting when trying to compile:

error Application.scss (Line 5: File to import not found or unreadable: c:\inetpub\wwwroot\SenchaTouch\resources\themes\stylesheets\sencha-touch\default\all.
Load paths:
C:/inetpub/wwwroot/SenchaTouch/resources/SCSS
C:/Users/jimmyh/Desktop/compass.app/lib/ruby/compass_0.11/compass-0.11.5/frameworks/blueprint/stylesheets
C:/Users/jimmyh/Desktop/compass.app/lib/ruby/compass_0.11/compass-0.11.5/frameworks/compass/stylesheets
C:/Users/jimmyh/Desktop/compass.app/lib/ruby/compass_extensions/compass-960-plugin-0.10.0/stylesheets
C:/Users/jimmyh/Desktop/compass.app/lib/ruby/compass_0.11/html5-boilerplate-1.0.0/stylesheets
C:/inetpub/wwwroot/SenchaTouch/resources/themes/stylesheets
Compass::SpriteImporter)

Any ideas?

[quickfire55]

I figured this out.

This line:
load File.join(dir, '..', 'themes')

Had to be changed to:
load File.join(dir, '..', 'themes','compass_init.rb')

[djaytwt]

"Look at your sencha touch folder (sencha-touch-1.1.0) -> resources -> css-debug
and pull out the sencha.css

Then just modify the hex/color values to get what you want. There is plenty of RGB/Hex color tables out on the internet too.
"
Hi Does this holds true for even Sencha touch chart ?? I want to change the text font , size, style , inside Pie chart ,I observed when i removed sencha touch full css, styling associated with legends, got off, but Pie was left unaffected