Results 1 to 10 of 10

Thread: Theme image not found when building custom theme UI

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290

    Default Theme image not found when building custom theme UI

    I'm trying to build a custom UI for a tab panel and I'm running into a problem with the theme generation. I believe that I've followed the instructions on themeing in the documentation.

    I started by generating my custom theme using Sencha Cmd. I want to build a custom UI for a tab-panel, so I created a file called Panel.scss in my <theme>/sass/src/tab directory. The contents of that file are:

    Code:
    @include extjs-tab-panel-ui(
        $ui: 'maintabset',
    
        $ui-bar-background-color: #074e7c
    );
    I reference the UI as follows:

    Code:
          xtype: 'tabpanel',
    
          region: 'center',
    
          collapsible: false,
    
          ui: 'maintabset',
    
          items: ...
    When I run sencha app build, I get a handful of warnings like this:

    Code:
    WARNING: @theme-background-image: Theme image not found: images/tab-bar/maintabset-scroll-bottom-left-gif on line 21 of .....production/../../../packages/ext-theme-base/sass/etc/mixins/theme-background-image.scss
    ...
    When I run my application, there is no difference in styling on the tab bar.

    What am I doing wrong?

    Thanks.


    @include extjs-tab-panel-ui(
    $ui: 'maintabset',
    $ui-bar-background-color: #074e7c
    );

  2. #2
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    5

    Default

    I'm having the same issue with a custom extjs-tab-bar-ui.

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Location
    Arvada, CO
    Posts
    404

    Default

    Have y'all figured this one out? I thought copying workspace/ext/packages/* to the workspace/packages dir would do the trick, but it doesn't look like it.

  4. #4
    Sencha Premium Member eknight's Avatar
    Join Date
    Oct 2013
    Posts
    32

    Default My tab-panel ui works

    Make sure you are saving your scss file in the right location:

    your-theme/sass/src/tab/Panel.scss

    Code:
    @include extjs-tab-panel-ui(
    $ui: maintabset, $ui-tab-background-color: #f00
    );
    List of paramaters available for styling here:
    http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tab.Panel-css_mixin-extjs-tab-panel-ui

    Also, the only difference with mine is I am not using the xtype: 'tabpanel'. Without any xtype declaration, the default displays my ui: 'maintabset' correctly.

    The warnings when running Sencha CMD aren't being caused by this; I'm currently trying to track down their root cause.

  5. #5
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,296

    Default

    So what is the solution for "WARNING: @theme-background-image: Theme image not found", I found over 5 threads in the forum and they are all dead without any solution of any kind.

  6. #6
    Sencha User
    Join Date
    Sep 2014
    Posts
    19

    Default

    You need copy the default theme images to the custom theme folder.

    So: yourWorkspace/ext/packages/ext-theme-neptune (or your def theme)/resources - from here copy the images folder

    TO: yourWorkspace/packages/yourcustomThemeFolder/resources - here! After that it will be build well!

  7. #7
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290

    Default

    Quote Originally Posted by Zimi View Post
    You need copy the default theme images to the custom theme folder.

    So: yourWorkspace/ext/packages/ext-theme-neptune (or your def theme)/resources - from here copy the images folder

    TO: yourWorkspace/packages/yourcustomThemeFolder/resources - here! After that it will be build well!
    Thanks for that tip. I'm in the process of doing some other things with my app but when I get back to working with my theme I'll certainly give that a try to see if it clears things up.

    Jim

  8. #8

    Default

    I landed here looking into the same issue and the solution above sort of works. It seemed like since in my scss files I was declaring a value for the ui property other than default, it was assuming my image files were named accordingly. You can copy the images to your current package as described above but if you tag anything other than default as the value of the $ui property cmd is going to expect your image files are named to match.

    For example:
    Code:
    @include extjs-panel-ui (    
        $ui:'my-custom-ui-name',
    needs to be:
    Code:
    @include extjs-panel-ui (    
        $ui:'default',
    or your image files need to be supplemented, so "default-arrow.png" would need an accompanying my-custom-ui-name-arrow.png" file.

  9. #9
    Sencha User
    Join Date
    Jun 2014
    Location
    Sweden
    Posts
    12

    Default

    I solved this issue the same way as cchapman describes. Your UI is named 'maintabset', so you will need to copy the images that you receive warnings for into your own theme and rename them, changing the word 'default' into 'maintabset'. Or name the UI 'default' as cchapman suggests.

  10. #10
    Sencha User
    Join Date
    Mar 2011
    Location
    Arvada, CO
    Posts
    404

    Default

    If you don't care to copy the images, put the @include inside of the Ext sass directory. e.g. my package's sass dir is split between the package and Ext...

    sass > src
    - Ext
    - MyPackage

    Previously, my @include was inside of a file in MyPackage, but to get rid of the warning, I simply put it inside of the respective Ext dir. Because I'm using @include extjs-tab-panel-ui, I put it inside of sass > src > Ext > tab > Panel.scss.

Tags for this Thread

Posting Permissions

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