How could I create a more compact theme?

Hi,
I have built a business application using Cuba Platform and I need to find a way to create a more compact version of the available ‘halo’ theme. Due to the fact that this is a financial / investment related app and there are several components (text fields, datagrids,charts, pivots) on every page, the users wish a more dense UI. Is there available any compact theme since I have limited knowledge of CSS in order to try to extend an existing one?

Thanks in advance

Hi,

Tak a loot at the Havana theme. You can enable it through the Help -> Settings menu.

Gleb

Thanks for the reply.
I am just wondering if there can be a mixture of these two themes since ‘halo’ looks more stylish and ‘havana’ more compact. The combination of these two themes into a new one would be an ideal solution!

Hello @papageor

As an option you can try to set smaller value for $v-unit-size SCSS variable:

  1. create theme extension (or use existing one)
  2. open *-ext-defaults.scss file (for example halo-ext-defaults.scss in case of extended halo theme)
  3. add the following line: $v-unit-size: 26px;

This variable is used as a “base” size and will affect all component sizes, fonts, etc.

Regards,
Daniil

2 Likes

Thank you very much!