CSS razor components

Hello guys,
is it a good idea to override your base css classes like I do or is there a better way?
I wanted to change the color of some of your components

Hey @cherryman ,
It is OK to override the CSS, just make sure you add these styles to either the app's styles.css or to a new file that you can include via the "Include custom CSS files" option under Settings in Radzen. It is not recommended to override the CSS directly in the compiled theme CSS files as these get recompiled with new versions of Radzen.

If you are only willing to change the color scheme, you can do so in Radzen using the theme editor - Settings -> Select a theme -> Click on [Customize theme] button right next to the theme picker.

1 Like

Thank you for your answer,
I started with a fresh blazor proj and not in your Radzor Client. (like in the getting started page)
Is there a way to change the base colors of your css file?

To change the base colors of the CSS file and create a custom theme, you'd need a CSS preprocessor.

  1. After cloning the Radzen.Blazor project, modify the variables in the theme SASS file e.g. $rz-base-100: #[NEW COLOR]
  2. Rebuild the Radzen.Blazor project to have the new CSS compiled under wwwroot/css/standard.css.
  3. Copy the new CSS to your application and include it instead of the embedded one.

Thank you for your help - I did step 1 and 2
Should this look like this then in the wwwroot folder in radzen.blazor?

To step 3: Where do I find the embedded one? Or should I just put in the the css folder and rename it?

You delete the link to the embedded CSS and use a copy of your theme CSS.

For example instead of

<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">


<link rel="stylesheet" href="css/default.css">
1 Like