Results 1 to 6 of 6

Thread: How do I create a ExtJS 4.2 app custom theme based on the Codaxy Basic theme?

  1. #1
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4
    Vote Rating
    -10
      0  

    Default How do I create a ExtJS 4.2 app custom theme based on the Codaxy Basic theme?

    I have used Sencha Cmd to generate a workspace, app, package and custom theme.

    Rather than extend one of the standard ExtJS themes (Neptune, Gray, etc), I want my custom app theme to use the Codaxy Basic theme which my company purchased.

    But their theme does not seem to fully on par with the Neptune, Gray, etc. themes, so how do I customize my theme?

    Am I required to extend some theme when creating my custom theme, or can I simply just place sass and css files in the theme folders as necessary?

    Thanks much in advance.

  2. #2
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4
    Vote Rating
    -10
      0  

    Default

    The following is the folder structure of the Codaxy Basic theme. The css folder are files I will not use, as they are just if you want to apply their theme and never customize it.

    According to Codaxy, the sass folder contains files allowing you to customize their theme. Here is an example of one of their sass files:

    Code:
    $custom-panel-background-color:$custom-ui-base-color;
    $custom-panel-background-gradiant:color_stops(lighten($custom-panel-background-color,2),darken($custom-panel-background-color,1));
    $custom-panel-header-border-color:darken($custom-ui-base-color,5);
    $custom-panel-header-text-color:white;
    $custom-panel-header-highlight:rgba(white,0.1) 0 1px inset;
    $custom-panel-header-text-shadow:rgba(black,0.25) -1px -1px;
    CodaxyBasicThemeFolders1.png

    The themes folder seems to hold the most promise. But there are many sub-folders here. There are overrides:

    Code:
    @mixin accordion-override
    There are ui defined:

    Code:
    @mixin panel-ui
    And then there are many other files under the default folder. So I'm not sure how to use this Codaxy theme in my newly generated ExtJS 4.2 workspace/package/custom theme structure.

    Any ideas? Codaxy claims the theme is supported by ExtJS 4.2, but they do not give sufficient instructions to implement it as I have described.

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    In looking at their page, the install is a bit off from what i would expect.

    Code:
    Extract the basic package zip file.
    Include basic-core.css stylesheet in your Ext application page.
    Include ui CSS files for ui styles you want to use (for example, if you want to use blue and green ui styles, you should include basic-ui-blue.css and basic-ui-green.css).
    Refresh your browser.
    Do you try to build, or change any settings in your sencha.cfg?

    Do they not offer support, as the procedure for themes has changed a bit from each release.

  4. #4
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4
    Vote Rating
    -10
      0  

    Default

    Before I changed our app structure to support Sencha Cmd folder structure, all I did to use their theme in the past was to place their basic-core.css and basic-ui-all.css files inside the extjs422/resources/css folder, where extjs422 is the ExtJS 4.2.2 sdk we are using.

    <link rel="stylesheet" type="text/css" href="./libs/resources/css/basic-light/basic-core.css">
    <link rel="stylesheet" type="text/css" href="./libs/resources/css/basic-light/basic-ui-all.css">

    I emailed the company, but they did not offer much help.

    So I'm facing the task of which of their files to copy where.

    This is compounded by the complexity of the ExtJS 4.2 theming model. I love the power, and will study it till I master ExtJS 4.2 theming, but in the meantime, I have to deal with:

    theme-level etc folder
    theme-level var folder
    theme-level src folder

    app-level etc folder
    app-level var folder
    app-level src folder

    So for the Codaxy files, what to put where becomes the all-encompassing question.

  5. #5
    Touch Premium Member JoelRSimpson's Avatar
    Join Date
    Jun 2009
    Location
    Seattle, WA USA
    Posts
    53
    Vote Rating
    1
      0  

    Default

    I'm in the exact same place. Have Codaxy basic, use Sencha Architect, trying to get it all to play nice. Any new discoveries?

  6. #6
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4
    Vote Rating
    -10
      0  

    Default

    From my investigation, if you're using ExtJS 4.2.1, just reference the Codaxy css files properly and you should be all set.

    But for 4.2.2, basically I think you may need to see what they were doing and do it yourself in a custom theme.

    At least that's what I seemed to see.

Posting Permissions

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