Dashboards & Visualizations
Highlighted

How to change the font size for one word in a single value panel?

Path Finder

Hello,

is it possible to change font size for one word in single value title in the xml ?
for example
if i have a panel title :
Hello World
so I want "Hello" to be bigger and bolder than "World"

thanks

0 Karma
Highlighted

Re: How to change the font size for one word in a single value panel?

Champion

This is not possible in Simple XML. Since the result is an html page however, you can do whatever you want with it. For example, you could split your title into two DOM elements and style those accordingly. Given the following Simple XML:

<row>
  <panel id="panelId">
    <title>Panel Title, many big words</title>
    <single>
      <search>
        ...

The following jquery places the word "big" in a new span with an additional class:

var textElements = $('#panelId h2.panel-title').text().split(/(big)/);
$('#panelId h2.panel-title').html(textElements[0] + "<div class='special-panel-title'>" + textElements[1] + "</div>" + textElements[2]);

You can then add a css file to your dashboard which styles this class:

.special-panel-title {
    font-size: large;
    font-weight: bold;
}

or whatever you feel like.

0 Karma
Highlighted

Re: How to change the font size for one word in a single value panel?

Splunk Employee
Splunk Employee

@sarit_s - Did the answer provided by jeffland help provide a working solution to your question? If yes, please don't forget to resolve this post by clicking "Accept". If no, please leave a comment with more feedback. Thanks!

0 Karma