Panel color

Radzen Studio Blazor Server
1

I got the following CSS from a previous post.

.my-panel .ui-panel {
background-color: transparent;
padding: 0;
}

.my-panel .ui-panel-titlebar {
background-color: blue;
color: #fff;
padding: 16px 16px 8px 16px;
}

.my-panel .ui-panel-content-wrapper {
background-color: lightblue;
padding: 16px;
}

It works very well, except that there is a white border on the edge of the panel.

The following is in the material CSS file

--rz-panel-background-color: #ffffff;

.rz-panel {
background: var(--rz-panel-background-color);
border-radius: var(--rz-panel-border-radius);
padding: var(--rz-panel-padding);
box-shadow: var(--rz-panel-shadow);
display: flex;
flex-direction: column;
}

I know the variable sets the whole background color, but when I put it in my Style.css, I can't get it to color the whole panel. If I change it in the Material file, it changes it fine, but I am trying to do this so I can change colors per panel. Can you show me the correct css entry for this?

Thanks

2

The first few blocks of CSS won't work as the class .ui-panel is not used. The second class rz-panel is not use in RadzenPanelMenu. What are you trying to achieve? What works in the material css file and what have you tested with in styles.css?

3

I did change them to .rz instead of .ui
I have added these items as above

.my-panel .rz-panel {
background-color: transparent;
padding: 0;
}

.my-panel .rz-panel-titlebar {
background-color: blue;
color: #fff;
padding: 16px 16px 8px 16px;
}

.my-panel .rz-panel-content-wrapper {
background-color: lightblue;
padding: 16px;
}

When I go into the material css and change the following
--rz-panel-background-color: #ffffff;
to
--rz-panel-background-color: blue;

it changes the entire panel to blue

if I leave it #ffffff the result is as follows...

image
image1920×1080 73.6 KB

image
image1920×1080 78.6 KB

this leaves a white border. I want the entire panel to be the color chosen...

4

Just to confirm, are you using the RadzenPanel or RadzenPanelMenu? The styles you are referring to are for RadzenPanel, and you are asking about RadzenPanelMenu...

Anyways, to override the material #ffffff color of --rz-panel-background-color, add this to your css:

.rz-panel {
  --rz-panel-background-color: blue;
}
5

sorry RadzenPanel, so I tried this,

.my-panel .rz-panel {
--rz-panel-background-color: blue;
}

this does not change the background color.

I can only change it by doing it in the material css

6

This should probably be .my-panel.rz-panel (without whitespace between them which means "has both my-panel and rz-panel css classes"). That's if you apply class my-panel to that particular RadzenPanel.

7

Yup, that worked...thank you! Css definitely not my thing...

You guys are great!

8

Now that we have CSS variables you can only use

.my-panel  {
     --rz-panel-background-color: blue;
}
9

Thank you for your help!