Coloring panels

Radzen Studio Angular
1

Hello,
I have create a panel and now I see the panel title on white background.
I would like to put blue background on header bar and light blue background inside al panel.
How can I do it?
I do not see background color property on panels and I do not know how to use headertemplate.
Thanks,
Mario

2

I would edit the Template for the panel drop a column and row with any other properties on the template that has the option to set the background-color attribute.

Josh

3

Do you mean edit the "header template" ? I have already tried to put a column and a row with background color but unfortunately on deploy it gets 0x0 size.
I will try again.
Mario

4

@mgiammarco I think what you need can only be achieved via custom CSS at the moment. You can indeed put something in the HeaderTemplate and set its BackgroundColor but it will look like this (probably not what you need):

image
image.png1070×334 5.83 KB

The following CSS would have the effect you want (append it to client\src\styles.css):

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

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

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

Thanks for explanation.
I have simply seen these photos:

panel example

And I want a panel title similar to the one in the photos.

6

You can get those colors if you change your application theme to BlueGrey (from the settings button in the top right corner of Radzen).

7

Hi,
now I need to modify only one panel of the page to use a different color.
Is there an official way? Can I use headertemplate? How?

8

Use a custom css class.

image
image720×346 11.2 KB

Then prefix those CSS rules so they apply only to that panel.

.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;
}