Results 1 to 4 of 4

Thread: Components look awkward on a custom theme

  1. #1

    Default Components look awkward on a custom theme

    I was creating a custom theme for Sencha Touch as described on this blog post: http://www.sencha.com/blog/an-introd...g-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:

    Code:
    $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?

  2. #2
    Sencha User psenough's Avatar
    Join Date
    Apr 2011
    Location
    Finland
    Posts
    24

    Default

    i've ran into the same issue and doubt
    no clue how to set it back yet

  3. #3

    Default

    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.
    Code:
    @import 'sencha-touch/default/all';
    In my case it had to change to
    Code:
    @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.

  4. #4
    Sencha User
    Join Date
    Jul 2010
    Location
    Switzerland
    Posts
    78

    Default

    Alternatively, check if you have a line similar to this in your config.rb

    Code:
    # 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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •