Best practice for creating new themes

[thomasandersen]

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

[skirtle]

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.

[thomasandersen]

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

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.

[skirtle]

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.

[thomasandersen]

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

regards,
Thomas

[James Goddard]

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.

[thomasandersen]

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