View Full Version : [FIXED] Theme Modern Titlebar

14 Sep 2016, 5:52 AM
I'm trying to convert my Modern 6.0.2 app to 6.2.0 and change theme to Material, however I'm using a lot of titlebars, and it looks like the designers forgot the theme Titlebar, as it now the only (?) theme that Toolbar and Titlebar does not look the same, also all buttons and text looks completely wrong on the titlebar, since the buttons expect a light background (white/gray, as on the toolbar) but gets a dark blue.

I figured I could try to solve this in Sencha Themer, but I'm unable to find the titlebar component in themer, I'm only able to locate the toolbar.

How can I solve this issue?

1. Can the Themer work with components missing from the standard component list?
2. Can I write some custom/text based scss code, and still work with the theme in Theme after doing manual edits on the theme?
3. Any pointer towards actually theming titlebar to look like the toolbar would be much appreciated

15 Sep 2016, 6:42 AM
Hi svenna,

There are a few components we are missing in Modern, but do plan to expand support for variables and UIs in future releases. I've filed a bug to ensure titlebar variables get pushed in the next release of Themer.

For now, you can absolutely do this 'manually', and expect the Theme to still work in Themer. There are 2 ways to accomplish this:
1. You can use the 'grid' in Themer (bottom right icon) and search for 'titlebar' variables. This method has the advantage of allowing Themer to recognize these as changes in future versions (when we add titlebar support).
2. You can add a scss file to the Theme package ([theme_dir]/modern/sass/var/Ext/TitleBar.scss) and put your variable changes in there.

Personally I don't have much experience theming TitleBar so I can't give you much help, except perhaps comparing the TitleBar variables (http://docs.sencha.com/extjs/6.2.0/modern/Ext.TitleBar.html#vars) to the default values of Toolbar (which you can view in Themer) and see how far that gets you.

Also, if you feel any variables are missing/lacking to allow you to customize TitleBar, please feel free to post here.

19 Sep 2016, 10:15 PM
I've added a workaround for this, it solves the issue, but need implementation on each app in the workspace.

In the file ws\appname\sass\var\all.scss I've added these lines:

$titlebar-background-color: $toolbar-background-color;
$titlebar-background-gradient: $toolbar-background-gradient;
$titlebar-color: $toolbar-color;
$titlebar-title-color: $toolbar-title-color;

As you see I basically copy the most important/visible attributes from toolbar to titlebar, and since it's on the app-side and not part of the workspace theme I knew it would not interfere with Themer (before your confirmation) and I would still be able to theme toolbar/titlebar from Themer.

24 Sep 2016, 5:36 AM
very good

content for sharing