# Customize my Kibana Panel in 7.1.0

**URL:** <https://discuss.elastic.co/t/customize-my-kibana-panel-in-7-1-0/196467>\
**Category:** Kibana\
**Created:** [August 23, 2019, 8:06am UTC](https://discuss.elastic.co/t/customize-my-kibana-panel-in-7-1-0/196467 "2019-08-23T08:06:29Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![katara](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/katara/32/60143_2.png) [@katara](https://discuss.elastic.co/u/katara)\
**Post date:** [August 23, 2019, 8:06am UTC](https://discuss.elastic.co/t/customize-my-kibana-panel-in-7-1-0/196467/1 "2019-08-23T08:06:29Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![jen-huang](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jen-huang/32/74327_2.png) [@jen-huang](https://discuss.elastic.co/u/jen-huang)\
**Post date:** [August 23, 2019, 5:55pm UTC](https://discuss.elastic.co/t/customize-my-kibana-panel-in-7-1-0/196467/2 "2019-08-23T17:55:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![katara](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/katara/32/60143_2.png) [@katara](https://discuss.elastic.co/u/katara)\
**Post date:** [August 23, 2019, 6:34pm UTC](https://discuss.elastic.co/t/customize-my-kibana-panel-in-7-1-0/196467/3 "2019-08-23T18:34:23Z")

</div>

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](https://discuss.elastic.co/uploads/short-url/8WPMJZp2tp56s4p7yFWAdL2dl8j.png)  
@jen-huang

---

<div class="post-metadata">

**Author:** ![jen-huang](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jen-huang/32/74327_2.png) [@jen-huang](https://discuss.elastic.co/u/jen-huang)\
**Post date:** [August 27, 2019, 10:10pm UTC](https://discuss.elastic.co/t/customize-my-kibana-panel-in-7-1-0/196467/4 "2019-08-27T22:10:35Z")

</div>

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](https://github.com/elastic/kibana/blob/7.1/src/legacy/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss#L101)

---

<div class="post-metadata">

**Author:** ![katara](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/katara/32/60143_2.png) [@katara](https://discuss.elastic.co/u/katara)\
**Post date:** [August 30, 2019, 5:21am UTC](https://discuss.elastic.co/t/customize-my-kibana-panel-in-7-1-0/196467/5 "2019-08-30T05:21:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [September 27, 2019, 5:21am UTC](https://discuss.elastic.co/t/customize-my-kibana-panel-in-7-1-0/196467/6 "2019-09-27T05:21:57Z")

</div>

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