1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    5
    Vote Rating
    0
    quickfire55 is on a distinguished road

      0  

    Default Answered: Theming Sencha Touch - Compass & SASS Required?

    Answered: Theming Sencha Touch - Compass & SASS Required?


    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?
    Last edited by jayrobinson; 11 Aug 2011 at 11:31 AM. Reason: Changed SSAS to SASS for SEO purposes.

  2. 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

  3. #2
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    New Jersey, USA
    Posts
    130
    Vote Rating
    0
    Answers
    4
    jjerome is on a distinguished road

      0  

    Default


    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

  4. #3
    Sencha User davidkaneda's Avatar
    Join Date
    Jan 2010
    Location
    Bay Area, CA
    Posts
    147
    Vote Rating
    0
    davidkaneda is on a distinguished road

      0  

    Default


    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

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    5
    Vote Rating
    0
    quickfire55 is on a distinguished road

      0  

    Default


    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?

  6. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    5
    Vote Rating
    0
    quickfire55 is on a distinguished road

      0  

    Default


    I figured this out.

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

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

  7. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    19
    Vote Rating
    0
    Answers
    1
    djaytwt is on a distinguished road

      0  

    Default


    "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