1. #1
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    176
    Vote Rating
    7
    jhoweaa is on a distinguished road

      0  

    Default A Simple Themeing Question

    A Simple Themeing Question


    I'm just starting to play around with generating a theme for my Ext JS 4.1 (4.2) application. What I want to have as my theme is basically the gray theme, with some customizations. I managed to get this working by moving some image directories around, but when I upgraded to the latest Sencha Cmd (3.0.2) I see to only be able to get the 'default' (or 'theme') images (i.e. the blue ones). Can someone spell out the process by which I can create and use a custom theme in my application which is based on the gray theme?

    My initial attempt was to create an app.scss file which sort of looked like this:

    Code:
    $theme-name: 'gray';
    $base-color: #ccc;
    
    
    //panel
    $panel-header-background-gradient: color-stops(#F0F0F0, #D7D7D7);
    $panel-border-color: #D0D0D0;
    $panel-header-color: #333;
    
    ... etc, making some tweaks to some of the variables to suit our desired look ...
    
    @import 'compass';
    @import 'ext4/default/all';
    
    /* added some additional CSS styles here */
    When I do a compass compile (or a sencha cmd build), I get a new app.css file which does most of what I want, except for where the theme uses some image sprites. The images are all based on the bluish default 'theme' not the gray theme. What's the proper way to deal with this?

    I noticed after one of my 'builds' that the theme name was changed from "$theme-name: 'gray'" to "$theme-name: 'theme'". I had used the 'gray' name to pick up the gray images (at least that seemed to work).

    Still learning.

    Thanks!

    Jim

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    846
    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


    Did you follow the Cmd theme guide? http://docs.sencha.com/ext-js/4-1/#!.../command_theme It will have some changes as mentioned by Don but for 4.1.3 that guide worked pretty well for me: http://www.sencha.com/forum/showthre...s-in-Cmd-3.0.2
    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
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    176
    Vote Rating
    7
    jhoweaa is on a distinguished road

      0  

    Default


    I thought I was following the process described in the guide, but it's possible that I missed something. The problem I'm having is that it seems that no matter what I try I can't get rid of the 'default' images. When I run the build from sencha cmd, it seems that it is hardwired to always copy images from the 'default' theme which isn't what I want. However, it is entirely possible that I'm just doing something stupid.

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    176
    Vote Rating
    7
    jhoweaa is on a distinguished road

      0  

    Default


    I've gone over the documentation and there is still something which isn't clear to me. My application will only need one theme, so it doesn't seem like I should have to generate a second theme. However, the look I want for my application is based on the gray theme, not the blue 'default' theme. What is the recommended way to build a theme based on something other than the default?

    My biggest question concerns the way the images are dealt with. The build process always copies the Sencha images from the 'default' images directory, which means the blue images. If I want the gray, am I supposed to copy the gray images into my own 'resources/images' directory before building the theme? I could solve this problem by just copying the gray images into the 'default' directory, but that seems heavy handed.

    I guess my question could be rephrased, what is the proper way to customize an existing Sencha theme that isn't the default theme?

    Thanks!

  5. #5
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    227
    Vote Rating
    40
    Misiu has a spectacular aura about Misiu has a spectacular aura about

      0  

    Default


    +1 from me.
    I also would like to know how to remove default theme from my project and instead use gray theme or some custom build theme.
    It is possible with current version of CMD Tool (3.0.2.288)?

  6. #6
    Sencha User Izhaki's Avatar
    Join Date
    Apr 2009
    Location
    London
    Posts
    118
    Vote Rating
    13
    Izhaki will become famous soon enough

      0  

    Default


    +1

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2007
    Posts
    49
    Vote Rating
    0
    scottw is on a distinguished road

      0