1. #1
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    10
    Vote Rating
    0
    thomasandersen is on a distinguished road

      0  

    Default Unanswered: Best practice for creating new themes

    Unanswered: Best practice for creating new themes


    Hi

    We are working on our own theme and have found that basing it on the ext4/default and overriding variables or creating new UIs (as explained in the tutorials) may be too limited for our case.

    A concrete example: We want to change some properties for the checker column in a grid.

    As I see it the grid does not have a UI mixin and the only way is to modify the resources/themes/stylesheets/ext4/default/widgets/_grid.scss

    Is this correct?

    If so, should we then create our own themes/stylesheets/xyz by copying the files from ext4 stylesheet?
    By just copying the ext4/default sounds like a maintenance nightmare in terms of upgrading etc.

    or is there a better way for cases like these?

    Thanks in advance,

    Best regards,
    Thomas

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    You shouldn't need to edit the default files. As you say, that'd be an upgrade nightmare. Just add the CSS rules you need at the end of your theme file, after you include all of the default widget theme files. Your rules will appear last so they'll take precedence.

  3. #3
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    10
    Vote Rating
    0
    thomasandersen is on a distinguished road

      0  

    Default


    Thanks for the answer skirtle

    So a heavily modified ExtJS theme consists of variable "overrides", some UI mixins and direct "overriding" of existing CSS rules?
    Just want to be sure before I get too far

    Quote Originally Posted by skirtle View Post
    You shouldn't need to edit the default files. As you say, that'd be an upgrade nightmare. Just add the CSS rules you need at the end of your theme file, after you include all of the default widget theme files. Your rules will appear last so they'll take precedence.

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,625
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Yes, that sounds like a fair description to me.

    I've done a fairly major bit of theming for a UI where the end result had to look nothing like the ExtJS themes. You have to be quite pragmatic about it, getting the browsers to play nice is difficult enough without clinging on to idealism. In some cases I had to throw in bits of JavaScript or tweak component markup to get my theme looking right.

    The one thing that is worth sticking to is making sure that whatever you do can be upgraded as easily as possible. A completely custom theme is always going to cause upgrade problems but you can definitely make things easier for yourself. Where possible use the variables provided, they're much more likely to stay working than any custom CSS.

    There are some parts of the theming infrastructure that can get very frustrating. There's no point shouting at your screen (I tried, it doesn't make it work), just remind yourself it's all just a bit of CSS and hack in the overrides you need. In some cases filing a bug report can prove therapeutic.

  5. #5
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    10
    Vote Rating
    0
    thomasandersen is on a distinguished road

      0  

    Default


    Thanks for the answer skirtle! Hopefully we have a good overview from here.

    regards,
    Thomas

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    St Louis,MO
    Posts
    267
    Vote Rating
    18
    Answers
    20
    James Goddard will become famous soon enough James Goddard will become famous soon enough

      0  

    Default


    Quote Originally Posted by skirtle View Post
    You shouldn't need to edit the default files. As you say, that'd be an upgrade nightmare. Just add the CSS rules you need at the end of your theme file, after you include all of the default widget theme files. Your rules will appear last so they'll take precedence.
    For anything more advanced than changing the overall base color that just flat out doesn't work. The default theme doesn't expose near enough of its settings to change much of anything so you wind up with a complete set of Ext Default css that you have to TRY to override with your own.

    Unfortunately many of Sencha's css rules are very precise. Some cannot be overridden without multiple class selectors which are not supported in older browsers.

    If you want to do complex layout changes you have to replace default, not build on default. This, of course, means that you'll likely have to rewrite large portions of your theme with each new version of ExtJS (though you often have to rewrite large portions of code to so no suprise there).

    If I need to write something that looks like an ExtJS app or a Sencha Touch app I use those libraries. If it needs to look unique, I don't.

  7. #7
    Ext JS Premium Member
    Join Date
    May 2011
    Posts
    10
    Vote Rating
    0
    thomasandersen is on a distinguished road

      0  

    Default


    For us it is a bit beyond the basics, but I think we'll manage it with doing some overrides to the generated CSS.

    Thomas

Thread Participants: 2

Tags for this Thread