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
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 ...>
or
<dashboard>
<row>...
to
<form stylesheet="my_stylesheet.css">
<fieldset ...>
or
<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; }
to
.dashboard-header > h2:nth-child(2) {
text-align: center;
background-color: aliceblue;
}
and adjust the color to your liking 🙂
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 ...>
or
<dashboard>
<row>...
to
<form stylesheet="my_stylesheet.css">
<fieldset ...>
or
<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; }
to
.dashboard-header > h2:nth-child(2) {
text-align: center;
background-color: aliceblue;
}
and adjust the color to your liking 🙂
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