1. #1
    Ext JS Premium Member oaugustus's Avatar
    Join Date
    May 2007
    Location
    Belo Horizonte, Brazil
    Posts
    66
    Vote Rating
    2
    oaugustus is on a distinguished road

      0  

    Default When to build a new button UI theme: @theme-background-image: Theme image not found

    When to build a new button UI theme: @theme-background-image: Theme image not found


    Hi,
    I have created a new theme, like the Theming documentation. In this theme I have created a new button ui
    like this:

    PHP Code:
    $warning-button-background-color#faa732 !default;
    $warning-button-background-color-overmix(#000, $warning-button-background-color, 8%) !default;
    $warning-button-background-color-focus$warning-button-background-color-over;
    $warning-button-background-color-pressedmix(#000, $warning-button-background-color, 25%) !default;
    $warning-button-background-color-disabled$warning-button-background-color !default;


    $warning-button-border-colorrgba(0000.1rgba(0000.1rgba(0000.25) !default;


    $warning-font-family"Helvetica Neue"HelveticaArialsans-serif;


    @include 
    extjs-button-ui(
      
    $ui'warning-small',


      
    $border-radius4px,
      
    $border-width1px,


      
    $border-color$warning-button-border-color,
      
    $border-color-over$warning-button-border-color,
      
    $border-color-focus$warning-button-border-color,
      
    $border-color-pressed$warning-button-border-color,
      
    $border-color-disabled$warning-button-border-color,


      
    $padding$button-small-padding,
      
    $text-padding$button-small-text-padding,


      
    $background-color$warning-button-background-color,
      
    $background-color-over$warning-button-background-color-over,
      
    $background-color-focus$warning-button-background-color-focus,
      
    $background-color-pressed$warning-button-background-color-pressed,
      
    $background-color-disabled$warning-button-background-color-disabled,


      
    $background-gradient$button-default-background-gradient,
      
    $background-gradient-over$button-default-background-gradient-over,
      
    $background-gradient-focus$button-default-background-gradient-focus,
      
    $background-gradient-pressed$button-default-background-gradient-pressed,
      
    $background-gradient-disabled$button-default-background-gradient-disabled,


      
    $color$button-default-color,
      
    $color-over$button-default-color-over,
      
    $color-focus$button-default-color-focus,
      
    $color-pressed$button-default-color-pressed,
      
    $color-disabled$button-default-color-disabled,


      
    $font-size$button-small-font-size,
      
    $font-size-over$button-small-font-size-over,
      
    $font-size-focus$button-small-font-size-focus,
      
    $font-size-pressed$button-small-font-size-pressed,
      
    $font-size-disabled$button-small-font-size-disabled,


      
    $font-weight$button-small-font-weight,
      
    $font-weight-over$button-small-font-weight-over,
      
    $font-weight-focus$button-small-font-weight-focus,
      
    $font-weight-pressed$button-small-font-weight-pressed,
      
    $font-weight-disabled$button-small-font-weight-disabled,


      
    $font-family$warning-font-family,
      
    $font-family-over$warning-font-family,
      
    $font-family-focus$warning-font-family,
      
    $font-family-pressed$warning-font-family,
      
    $font-family-disabled$warning-font-family,


      
    $icon-size$button-small-icon-size,
      
    $glyph-color$button-toolbar-glyph-color,
      
    $glyph-opacity$button-toolbar-glyph-opacity,
      
    $arrow-width$button-small-arrow-width,
      
    $arrow-height$button-small-arrow-height,
      
    $split-width$button-small-split-width,
      
    $split-height$button-small-split-height,




      
    $opacity-disabled$button-opacity-disabled,
      
    $inner-opacity-disabled$button-inner-opacity-disabled
    ); 
    Then, when to build the theme with "sencha app build", this is the warning message: @theme-background-image: Theme image not found: images/button/warning-large-s-arrow-rtl.png. Then in my button the menu split at button don't appear.

    Anybody, know how to solve this problem?
    Otávio Augusto Rodrigues Fernandes
    Net On - Soluções Tecnológicas Ltda
    Desenvolvimento e Consultoria em ExtJS
    www.neton.com.br
    otavio@neton.com.br
    (31) 3075-7868

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I'm just going to ask the obvious, does the file exist?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member oaugustus's Avatar
    Join Date
    May 2007
    Location
    Belo Horizonte, Brazil
    Posts
    66
    Vote Rating
    2
    oaugustus is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    I'm just going to ask the obvious, does the file exist?
    Well, I'm only creating a custom UI theme for a button, in the Theming Docs there is nothing reference that I need create the button images and rename it to theming a single button. Then how I do to theming a button?
    Otávio Augusto Rodrigues Fernandes
    Net On - Soluções Tecnológicas Ltda
    Desenvolvimento e Consultoria em ExtJS
    www.neton.com.br
    otavio@neton.com.br
    (31) 3075-7868

  4. #4
    Sencha User
    Join Date
    Oct 2013
    Posts
    21
    Vote Rating
    11
    m.dostal will become famous soon enough

      1  

    Default


    Please, can somebody write down simple and clear step-by-step guide of how to create new custom button UI. I have followed many guides, here in forums or else where, but none of them works, because they are not complete or not up-to-date. I'm not SASS or Compass expert, I can understand CSS, so please guide me the right way. It would be also helpful to update the official guide on Theming Ext JS, using the last released versions of Ext JS SDK and Sencha CMD. Thanks.

Thread Participants: 2