How to replace CSS theme with customised files

Radzen Studio Blazor Server
1

Hi All

I have looked and seen discussions around getting the free themes Razden uses from radzen-blazor/Radzen.Blazor/themes at master · radzenhq/radzen-blazor · GitHub, but I'm not clear on how these override the files that are being automatically added to scss.

I have the starting point that there is an entry in _Hosts.cshtml

<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">

which I could replace so the base css is from my own folder with one of the downloaded styles but what about the files that are created in scss are these designed to be not changeable?

Is there a step by step guide to CSS customisation for Radzen?

Cheers

2

Hi @mattcav,

You can check my replies in this thread: Easiest way to create and maintain a custom theme?

Basically you need to build the Radzen.Blazor.csproj and it will produce CSS files in the wwwroot directory.

3

Hi and thanks for the fast response.

if I build from the source and manually include the css files in wwwroot do I change one of my imports to stop my project from adding the scss again? Sorry if I'm missing something basic here.

Cheers

4

Yes, you need to copy the updated CSS file to your application's wwwroot directory and include.

Old (embedded theme)

<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">

New (custom theme assuming you have copied it to wwwroot/css)

<link rel="stylesheet" href="css/material-base.css">
5

Fantastic. Thanks so much for the excellent support. I'm looking forward to working with the controls and seeing what they can do.

Cheers