Results 1 to 2 of 2

Thread: Custom UI Compass Compile Warnings with Docs Example (Theme image not found).

  1. #1
    Sencha User Izhaki's Avatar
    Join Date
    Apr 2009
    Location
    London
    Posts
    118
    Answers
    7

    Default Custom UI Compass Compile Warnings with Docs Example (Theme image not found).

    ExtJS 4.1;

    I've followed this docs guide on theming, and managed to compile my css successfully.

    However, when I try to add the custom UI as described in the docs, I get the following errors (I'm only showing 2 out of about 18):

    Code:
    WARNING: @theme-background-image: Theme image not found: ../../extjs/resources/themes/images/default/panel/panel-bubble-corners.gif
             on line 18 of /Library/WebServer/Documents/v4/extjs/resources/themes/stylesheets/ext4/default/mixins/_theme-background-image.scss
             from line 391 of /Library/WebServer/Documents/v4/extjs/resources/themes/stylesheets/ext4/default/widgets/_panel.scss
             from line 64 of /Library/WebServer/Documents/v4/resources/sass/my-ext-theme.scss
    
    
    WARNING: @theme-background-image: Theme image not found: ../../extjs/resources/themes/images/default/panel/panel-bubble-sides.gif
             on line 18 of /Library/WebServer/Documents/v4/extjs/resources/themes/stylesheets/ext4/default/mixins/_theme-background-image.scss
             from line 391 of /Library/WebServer/Documents/v4/extjs/resources/themes/stylesheets/ext4/default/widgets/_panel.scss
             from line 64 of /Library/WebServer/Documents/v4/resources/sass/my-ext-theme.scss
    
    ...
    It seems that compass is looking for an image with the name panel-bubble-corners.gif, although clearly such won't exist.

    What am I doing wrong?

    My my-ext-theme.scss:

    Code:
    // Unless you want to include all components, you must set $include-default to false
    // IF you set this to true, you can also remove lines 10 to 38 of this file
    $include-default: false;
    
    
    // Insert your custom variables here.
    // $base-color: #aa0000;
    
    
    @import 'ext4/default/all';
    
    
    // You may remove any of the following modules that you
    // do not use in order to create a smaller css file.
    @include extjs-boundlist;
    @include extjs-button;
    @include extjs-btn-group;
    @include extjs-datepicker;
    @include extjs-colorpicker;
    @include extjs-menu;
    @include extjs-grid;
    @include extjs-form;
        @include extjs-form-field;
        @include extjs-form-fieldset;
        @include extjs-form-file;
        @include extjs-form-checkboxfield;
        @include extjs-form-checkboxgroup;
        @include extjs-form-triggerfield;
        @include extjs-form-htmleditor;
    @include extjs-panel;
    @include extjs-qtip;
    @include extjs-slider;
    @include extjs-progress;
    @include extjs-toolbar;
    @include extjs-window;
    @include extjs-messagebox;
    @include extjs-tabbar;
    @include extjs-tab;
    @include extjs-tree;
    @include extjs-drawcomponent;
    @include extjs-viewport;
    
    
    // This line changes the location of your images when creating UIs to be relative instead of within the ExtJS directory.
    // You MUST set this to true/string value if you are creating new UIs + supporting legacy browsers.
    // This only applies to new UIs. It does not apply to default component images (i.e. when changing $base-color)
    // The value can either be true, in which case the image path will be "../images/"
    // or a string, of where the path is
    $relative-image-path-for-uis: true; // defaults to "../images/" when true
    
    
    @include extjs-panel-ui(
        'bubble',
    
        $ui-header-font-size: 12px,
        $ui-header-font-weight: bold,
        $ui-header-color: #0D2A59,
        $ui-header-background-color: #fff,
        $ui-header-background-gradient: null,
    
        $ui-border-color: #fff,
        $ui-border-radius: 4px,
        $ui-body-background-color: #fff,
        $ui-body-font-size: 14px
    );

  2. #2
    Sencha User Izhaki's Avatar
    Join Date
    Apr 2009
    Location
    London
    Posts
    118
    Answers
    7

    Default

    OK, I had to patch utils.rb and create manifest.js (as described in this thread).

    But I still get these errors:

    Code:
    WARNING: @theme-background-image: Theme image not found: ../images/panel-header/panel-header-bubble-collapsed-top-corners.gif
             on line 18 of /Library/WebServer/Documents/v4/extjs/resources/themes/stylesheets/ext4/default/mixins/_theme-background-image.scss
             from line 472 of /Library/WebServer/Documents/v4/extjs/resources/themes/stylesheets/ext4/default/widgets/_panel.scss
             from line 64 of /Library/WebServer/Documents/v4/resources/sass/my-ext-theme.scss

Posting Permissions

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