As an application designer, from release 2020.20 (or Q4 2020) we can now define multiple CSS class styles either as a global default or per widget! This is amazing news!
Globally, it became possible to go to editing the css from the general canvas (Application Level CSS):
![](/legacyfs/online/storage/blog_attachments/2020/09/sac_css1.png)
Also, here
![](/legacyfs/online/storage/blog_attachments/2020/09/sac_css_button1-1.jpg)
It is quite convenient that the css editor itself has a convenient help: when you select a visualization element, a list of available css classes of this component appears (supported class names and properties):
![](/legacyfs/online/storage/blog_attachments/2020/09/sac_css2.png)
It's simple with separate classes:
![](/legacyfs/online/storage/blog_attachments/2020/09/sac_css8.png)
About standard component classes - you can only refer with a
user define class name as the first part of selector:
![](/legacyfs/online/storage/blog_attachments/2020/09/sac_css3.png)
As you can see
hover is also supported.
Binding to the class name is defined in the styling menu of the component:
![](/legacyfs/online/storage/blog_attachments/2020/09/sac_css4.png)
![](/legacyfs/online/storage/blog_attachments/2020/09/sac_switch-1.gif)
Of course, now you can change the css class from scripts:
![](/legacyfs/online/storage/blog_attachments/2020/09/sac_css7.png)
It is also possible to link the CSS with a pre-configured theme (Theme Level CSS):
![](/legacyfs/online/storage/blog_attachments/2020/09/sac_css6.png)
CSS is stored together with the application or together with the application theme (not as in a lumira designer as a separate file). Some of the existing theme settings can be overwritten.
Unfortunately, not all css properties are currently supported:
![](/legacyfs/online/storage/blog_attachments/2020/09/sac_css5.png)
![](/legacyfs/online/storage/blog_attachments/2020/09/sac_css9.png)
2022 RELEASE PLANS (Q2 2022)
Advanced Customization Options for Tab Strips
![](/legacyfs/online/storage/blog_attachments/2020/09/sac_css_tabs.png)
We hope that this is only the first step and in the future SAC Analytics Applications will be even more customized in terms of the capabilities of the CSS!