How to center the title of a panel and color the title background?

HeinzWaescher — Wed, 23 Mar 2016 13:41:20 GMT

Hi,

I've seen panels like this in a video.

How can I center the panel title and color the background of the title?

Thanks in advance

Re: How to center the title of a panel and color the title background?

somesoni2 — Wed, 23 Mar 2016 16:46:10 GMT

You should be able to use the HTML visualization on simple xml to create you own Panel title and customize it.

See an example here
https://answers.splunk.com/answers/150086/how-to-center-title-of-a-panel-in-xml.html

Splunk doc for the same
http://docs.splunk.com/Documentation/Splunk/latest/Viz/PanelreferenceforSimplifiedXML#html

Re: How to center the title of a panel and color the title background?

jeffland — Tue, 29 Sep 2020 09:10:43 GMT

I think it's much easier to apply simple CSS to your dashboard. On your splunk server, navigate to %SPLUNK_HOME/apps/your_app/appserver/static (create folder if necessary) and place a file there, e.g. my_stylesheet.css, giving it this content:

.dashboard-header > h2:nth-child(2) { text-align: center; }

Restart splunk, and edit the xml of your dashboard from

<form>
  <fieldset ...>

<dashboard>
  <row>...

<form stylesheet="my_stylesheet.css">
  <fieldset ...>

<dashboard stylesheet="my_stylesheet.css">
  <row>...

Reload the page without browser cache (CTRL-SHIFT-R in Firefox or CTRL-F5 in Chrome, other combos might work as well) and you're good to go.

If you want to change different texts on the page (this example changes the dashboard title), simply right-click them and select "Inspect Element" in Firefox or "Inspect" in Chrome, and in the Inspector select "Copy unique selector" in FF or "Copy > Copy Selector" in Chrome. Then, paste your clipboad content instead of .dashboard-header > h2:nth-child(2) and that's it.

Oh and about the background color: change

.dashboard-header > h2:nth-child(2) { text-align: center; }

.dashboard-header > h2:nth-child(2) {
    text-align: center;
    background-color: aliceblue;
}

and adjust the color to your liking 🙂

topic Re: How to center the title of a panel and color the title background? in Dashboards & Visualizations

How to center the title of a panel and color the title background?

Re: How to center the title of a panel and color the title background?

Re: How to center the title of a panel and color the title background?