Hi, splunk community.
We want to change to font size of title and legend of panel in dashboard.
In splunk v5,change to font size of legend by setting to
" <option name="charting.legend.labelStyle.defaultTextFormat"> {italic:true,size:16}</option>" in XML
below link is manual
http://docs.splunk.com/Documentation/Splunk/5.0/Viz/CustomChartingConfig-ChartLegend
However,it's parameter is nothing in splunk v6.
And so, we will try to set css.
Though,we do not know selector of title and legend of panel in dashboard.
Please help me.
Hi akanno,
you can extend your simple xml dashboard with custom css styles. You can simply import a css file within the dashboard or form tag like this:
<dashboard stylesheet="myStyleSheet.css">
Here you can get informations about the details: link
The selector of the element you want can be found by using the developer tools of your browser. It should be something like rightclick the element and in the menue chose "inspect element".
Greetings
Tom
Reading through the other answer I think they covered it off nicely. Just adding a comment to show what I ended up doing in case it helps anyone else who isn't very familiar with CSS and HTML. I converted the dashboard to HTML and then added a section to make the title WAY bigger. Using this on a TV in the dev area and wanted people all around this end of the floor to be able to easily see it. I've bolded the text I added.
/> href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css"
/>
href="{{SPLUNKWEB_URL_PREFIX}}/static/css/build/pages/dashboard-simple-bootstrap.min.css"
/>
href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css"
/> ****
Hi akanno,
you can extend your simple xml dashboard with custom css styles. You can simply import a css file within the dashboard or form tag like this:
<dashboard stylesheet="myStyleSheet.css">
Here you can get informations about the details: link
The selector of the element you want can be found by using the developer tools of your browser. It should be something like rightclick the element and in the menue chose "inspect element".
Greetings
Tom
Hi Tom,
Thank you for response.
I found a selector in the way you told me.
Selector I found is "g.highcharts-legend"
Therefore,I set following in css
g.highcharts-legend {
font-size: 56px;
}
However,font size of legend don't change.
Why?
Can you try this :
g.highcharts-legend-item:nth-child(1) > text:nth-child(2) > tspan:nth-child(1) {
font-size: 56px;
}
This should manipulate at least the first item of the legend.
Hello Tom,
I am trying to use this answer in order to change my legend size and i don't fully understand it. Can you please explain me this part
:nth-child(1) > text:nth-child(2) > tspan:nth-child(1)
Thanks in advanced !!
Thank you very much!
It is great!!
I can change font size.
I'd like to ask another one,
I set following in css
h3 {
font-size: 56px;
}
Then,font size of all panel title is changed.
However,I want to change only second panel title.
How set in css?
Try this one:
#element2 > div:nth-child(1) > h3:nth-child(2){
font-size: 56px;
}
Thank you very much!
Use a class such as
.size {
font-size: 56px;
}
and then for the h3 put h3 class="size" and it will change just thsoe that have class="size" applied.
You can always convert dashboard to HTML and then change it using HTML code. Embedded CSS.
Thank you for your response markthompson.
I convert dashboard to HTML and then I add "class=test" in h3 tag in HTML
for example, <h3 class="test ">testTaitle</h3>
Then, I created css file like below
.test {
font-size: 16px;
}
Therefore,I change font size for the title.
Though, I don't know that change font size for the legend.
Can you post the HTML it's giving for the legend, or you could right click and inspect element and see what CSS classes are on the legend, and adapt those with your embedded css.
I posted the html source.
I am sorry for the difficult to see