View Full Version : Components look awkward on a custom theme

27 May 2011, 5:44 AM
I was creating a custom theme for Sencha Touch as described on this blog post: http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch

However, some components look awkward on my custom theme while they look fine on the default theme as seen in the screenshots below.

This is how they look on the default theme:

And this is how they look on my custom theme:

This is my application.scss:

$base-color: #09485A;
$base-gradient: 'glossy';

@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-toolbar-forms;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-loading-spinner;

I am generating the theme using "compass compile". I am using Sencha Touch 1.1.0 and viewing on Google Chrome 11.0.696.68.

Am I doing something wrong or is this a bug?

31 May 2011, 12:52 AM
i've ran into the same issue and doubt :)
no clue how to set it back yet :)

25 Aug 2011, 10:02 PM
I had a similar issue initially.
Once I'd updated this path so it was correct from my sass file, and then recompiled it was fine.

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

In my case it had to change to

@import '../../lib/touch/resources/themes/stylesheets/sencha-touch/default/all'

But it all depends on where your sass file sits in relation.
Hope that helps.

26 Aug 2011, 4:45 AM
Alternatively, check if you have a line similar to this in your config.rb

# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', 'lib', 'touch', 'resources', 'themes')

Make sure that the path fits your setup. Then the original @import statement will work just fine.
This is also mentioned in the introduction to theming by the way.