Customize my Kibana Panel in 7.1.0

Elastic Stack Kibana
1

Hi,
Im trying to craete a custom panel in Kibana 7.1.0.
I understand i need to edit my css files, but im not sure where and what.

The changes Im looking to make is to Bring the Title to Center, Bold, Colored.

Kindly help me out.

thanks!

2

Hi, what do you mean by "panel"? Are you talking about the Kibana home page, or dashboard, etc?

3

By panel, I mean the title of each visualization we create. Like in the image, I need the "TITLE" part to be customized!
Bolded, centered, colored it anything like that.
image
@jen-huang

4

For 7.1, I believe this is the CSS file that controls styling of the dashboard panel title: https://github.com/elastic/kibana/blob/7.1/src/legacy/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss#L101

5

@jen-huang,
I used the below,
is this the right way?
I see no changes after the below change, help me out please.

.dshPanel__title {
  @include euiTextTruncate;
  @include euiTitle('xxxs');
  line-height: 1.5;
  flex-grow: 1;
  &:not(:empty) {
    padding: ($euiSizeXS * 1.5) $euiSizeS 0;
  }

#i have added the below
.panel-title {
text-align: center;
color: blue;
font-size: 18px;
font-weight:bold;
}
}

6

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.