Css and fonts

Radzen Blazor Studio
1

how do you download the css and fonts for a theme?

I did it once by accident, so it feels like something does it just not sure what?

image
image2677×137 42.3 KB

I don't recall how it downloaded fluent automatically for me?

Maybe a better question is what is the recommended way to override certain css classes if you wish to do so?

2

Radzen Blazor Studio copies the CSS and fonts to your app when you use a premium theme such as Fluent. Other free themes are bundled in the Radzen.Blazor nuget package.

To customize a theme we recommend using the built-in feature of Radzen Blazor Studio.

To override CSS you just specify the rules you want to override after the <link> which includes the Radzen Blazor theme e.g.:

<link rel="stylesheet" href="_content/Radzen.Blazor/css/software-base.css" />
<style>
.rz-textbox {
    font-size: 20px !important; /* change the font size of all RadzenTextBox components */
}
</style>

The Radzen.Blazor themes heavily use CSS variables which makes overriding a lot easier and more flexible. For example to set the font-size of all textboxes you can also use:

.rz-textbox {
    --rz-input-font-size: 20px;
}

To discover the class names and CSS variables used by a component right click the element in your browser and choose "Inspect" (or "Inspect element" depending on the browser). Then you can examine the HTML DOM tree:

image
image2928×428 103 KB

1 Like
3 
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
    <style>
        .rz-grid-table {
            width: unset;
        }
    </style>

this doesn't seem to be working for me, in the inspector this will autosize the width of the columns which is what I'd like

image
image720×262 17.8 KB

@enchev this is what I was talking about in my other thread

4

I found the issue, was editing the wrong _host file, I am good now.