I’m using the latest c8y version with Angular 19. In the Linear Gauge Range Display component, I need to override the ‘range-display__range__min’ CSS class to change the background color.
In cumulocity.config.ts, I set brandingEntry to false, defined branding.less in the angular.json file, and added the CSS changes in branding.less after importing extend.less.
The overridden CSS changes work correctly in my local UI server. However, after deploying the plugin to the tenant, the changes are not getting reflected.
Why are the overridden CSS changes not being applied in the tenant environment even though they work locally?
Customer is not using branding manager in Admin application.
Kindly share your inputs.
Hi @Vignesh_Babu,
are you sure that you have actually deployed your application and that the application is not e.g. served from your browsers cache?
You could e.g. add some other changes to the app e.g. changing the app name and see if they have any affect?
Hi Tristan,
I’ve already tested it using sample text and cleared the browser cache, the sample text appears correctly on the page. I reinstalled the plugin also. Still, added css classes in branding.less file are not getting reflected.
So your adjusting the branding.less file of a plugin?
If so, this will not work. Your shell application won’t load the global styles of any plugin.
What other options do we have for overriding the CSS of the Range Display component?
Below steps followed:
Created a new plugin to customize the Range Display Component’s existing ‘range-display__range__min’ class.
To override this class, created a new file as branding.less, imported extend.less file, added my required css class changes in branding.less file.
Defined brandingEntry as false in buildTime object in cumulocity.config.ts, defined branding.less entry in architect object in angular.json file.
Are you trying to use the range display component as part of your plugin? or are you just trying to get your custom css included in the shell application?
Should your custom css also apply to the default locations where the shell app uses the range display or only to your custom stuff included in your plugin?
Based on the selection of data point in plugin configuration, displaying the range display in component page. The overridden css changes should get affected only to my plugin. It should not affect any other places.
Have you tried using component styles in the parent component which uses the range display component?