asked on August 14, 2025
Hello,
I generated a custom theme using your theme builder node application and want to use that theme in my Blazor WASM project. I added the new custom css in my index.html but it doesn't seem to take any effect. Is there a specific place that I need to add this file?
Here is a snippet from my index.html
<script src="_content/Flexmonster.Blazor/blazor-flexmonster.js?v=2024-01-17"></script>
<link rel="stylesheet" type="text/css" href="css/flexmonster.custom.min.css?v=1" />
My "css" folder does contain the above flexmonster.custom.min.css file and I see it getting included under the Developer Tools but the styles inside it don't seem to apply.
Appreciate your help.
Thank you,
Rushi
⋅ August 15, 2025
Hello Rushi,
Thank you for the question.
Currently, in Flexmonster.Blazor, the pivot table's default CSS styles are dynamically injected at runtime. Because of this, any custom styles added to index.html are loaded before the default styles and therefore cannot be overridden.
Our team will take a look at the described behavior and provide a fix with our minor release with the ETA September 1st. We will notify you about the release.
Please let us know if other questions arise.
Kind regards,
Nadia
⋅ August 15, 2025
Hello Nadia,
We do have overrides in a separate CSS file that was hand coded and that does seem to work fine when included in the index.html. Its only when I use the theme builder app to create a new css file and include that instead, it doesn't seem to work. See some of the styles overridden below which are working.
Please see the attached file (renamed to .txt to allow upload) that was generated using the theme builder app.
.fm-grid-view span,
.fm-grid-view div,
.fm-grid-view td {
font-family: 'Roboto', Arial, sans-serif, 'Segoe UI', 'Helvetica Neue', Helvetica !important;
font-size: 14px !important;
}
/* disable row resizing */
.fm-rows-resize div.fm-handle {
pointer-events: none !important;
}
⋅ August 18, 2025
Hello Rushi,
Thank you for the response.
You are correct that styles with the !important rules can override the default styles. However, applying a theme created via the Theme Builder requires the theme stylesheet to take priority over the default one. Currently, the default styles are injected dynamically when the application loads, which gives them the highest priority and causes custom themes to be overridden.
Our team is working on a fix (ETA September 1st) that will allow you to apply a custom theme without it being overridden by the default Flexmonster styles. We will notify you as soon as the release is available.
You are welcome to contact us if other questions arise.
Kind regards,
Nadia