Styles still confuse me - I would like to make the bootstrap theme (default ocean blue) less breezy...

[Ursus]

Hi

I would like to use the default ocean blue style but change the spacing between the elements. I downloaded the theme file, unziped it and copied the .CSS file to my assets folder. I now include the theme using:

1. angular.json has the following in the styles section:

    "styles": [
              "src/styles.scss"
            ]

2. I have then added this to the styles.scss

    $spacer: 0.1rem;

    $font-size-base: 0.8rem;

    @import "assets/themes/DefaultOceanBlue.css";

 

I cannot seem to get the spacing to be condensed - what am I missing / doing incorrectly? 

Thank you in advance

ursus

[Svet]

Hi Ursus,

Thank you for the provided details.

It looks like you are mixing two approaches to using a theme. In general, if the variables should be used to customize a theme then an import of the theme as a .scss file is required. (If the .css theme file is imported then the styles from the .css file will be used and the variables won't take an effect.)

Please make sure that the default ocean blue theme .scss file is imported as demonstrated in the following article and add the additionally desired variables like $spacer and $font-size-base within this file:

https://www.telerik.com/kendo-angular-ui/components/styling/custom-themes/#toc-using-the-build-process-of-the-application

In order to be able to compile the SCSS, make sure that the Angular project is configured for SCSS.

Let me also add that an ocean blue swatch is available only for the Default Kendo theme.

Also, the $spacer variable isn't widely used across components. Probably modifying the $spacing map would yield more changes, but this way more components will be affected as the $spacing map is widely used.

I can further suggest checking the variables available for each desired theme and component that is required to be customized from the Github repo. For example, the following location shows all variables for the Grid in the Default theme:

https://github.com/telerik/kendo-themes/tree/develop/packages/default/scss/grid

I hope the provided information and suggestions help. Feel free to write back if any further details are required.

Regards,
Svet
Progress Telerik

[Ursus]

Hi Svet. thank you, yes, that did really help. I'll look into it this evening and report back should I have any more questions 😊 Thank you.