Single Value change font size

[C4r7m4n]

Hello,

Does somebody know how to change default size, color and thickness of font?

I've tried to modified code:

<option name="charting.lineBrushPalette.thickness">6</option>
<option name="charting.fontSize">32</option>"

with no effect.
Thanks in advance

[patelmc]

Can you please provide how .css file looks like after all changes you have made?

[Drainy · Accepted solution]

Hi @C4r7m4n.

What you are looking for is;

.SingleValue .SingleValueHolder {
  color:#111111;
  font-size:15px;
  font-weight:300;
}

This will set the colour/size of a single value if it doesn't match any colour rule. If you have a colour applied (which you generally will) then that will override the settings, like so;

.SingleValueHolder.red {
  color:#FFFFFF;
  font-size:16px;
  font-weight:bold;
}

Make sure that once you change your application.css it has definitely been taken up, sometimes I've found browsers keep using the cached one so on most browsers you can force a cache clear for the site with CTRL+F5 or just empty your cache manually.

.splHeader h2 {
}

The above code is for changing the look of the header of a panel, you can use this for font, size, colour etc.

.SingleValue .SingleValueHolder { 
    width: auto;
    min-width: 100%;
}

And finally that code above is for changing the width of a singlevalue holder. you need to set the min-width as this is defined by default in the default CSS that Splunk will use if you do not define it.

As with any CSS changes, make sure you do these inside appserver/static for your own app, this will restrict any of the changes you make to your own dashboards and views within that app and prevent ruining the look and feel for other users 🙂

EDIT: Incidentally this is also the way you can start to do cool stuff like add images to your single values or start to strip off borders etc.

[C4r7m4n]

Hello @Drainy

Thank you, your solution is working.

[Drainy]

Sure, what you need is to set the min-width to override the default system settings;
.SingleValue .SingleValueHolder {
width: auto;
min-width: 100%;
}
Obviously just add the above internal lines to your existing class like the above in your application.css, you will still need the border and bits 🙂

[C4r7m4n]

Hello @Drainy

Thanks for advice I've change:
`.splHeader h2 {

}`

I have one more question: Did you find width: auto code at one of your apps? I cant resize my button to 100% width of dashboardContent

[Drainy]

They need to go into application.css. Are you looking at the panel header or the single value header?
In which case;
`.splHeader h2 {

}`
Is the class you need to modify the color, text etc

[C4r7m4n]

Hi @Drainy

1. The code:
   width: auto !important;
   doesn't affect my button 😞

2. I've added:
   .GenericHeader h3 {
   margin-bottom:0;
   margin-left:0;
   margin-right:0;
   margin-top:0;
   padding-bottom:0;
   padding-left:0;
   padding-right:0;
   padding-top:0;
   }
   to application.css

but should I add this code:
h3 {
color:#333333;
font-size:12px;
font-weight:bold;
}

to application.css either or to the file: modules-2d550c7beb294883349c0c8f1f73e8c1.min.css ?

[Drainy]

.GenericHeader h3 {
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
}
modules-...1.min.css
h3 {
color:#333333;
font-size:12px;
font-weight:bold;
}

are the two you are looking for. For width I'll have to look at one of my apps tomorrow but you could always try doing width: auto !important; <- this could go wild though

[C4r7m4n]

Hi @Drainy and @Ant1D

The code:

.SingleValueHolder {
  color:red;
  font-size:16px;
  font-weight:300;
}

worsk perfectly, unfortunatly color is overwritten somehow and width: auto; doesn't resize my button 😞
But what i really meant by writing to change the font size is the string above button not the font of string which show the number. See

[Ant1D]

Go to the following location:

$SPLUNK_HOME/etc/apps/<appname>/appserver/static/application.css

Enter the following CSS into this file:

span.singleResult {
font-size: 50px;
}

Change the number to alter the size.

[C4r7m4n]

Yes, changing font-size is working, but I cannot resize my button 😞

[Ant1D]

It's not. Did the above CSS work?

[C4r7m4n]

Sorry @Ant1D
I didn't know this is so important to You 😞

[Ant1D]

I'm a bit disappointed that the original accepted answer has been changed. You could change the string with the following CSS:
.splHeader-dashboard h2 {
font-size: 16px;
}
This CSS is high-level so it will affect titles found in most panels...

[Ant1D]

Alternatively, you can add the following CSS into application.css to achieve the same:

div.SingleValueHolder {
font-size: 100px;
}

[Ant1D]

Hi C4r7m4n, I am sure it should be span.singleResult. I have tested it. I get this value by using the debugging tool Firebug. When I use this tool and hover over a SingleValue object, it shows me the following:
<div class="SingleValueHolder low">
<span class="singleResult">90</span>
</div>
I use this HTML extract to derive the CSS needed to change the font-size. After copying the above CSS into application.css, you may need to do a Ctrl+F5 on your browser to see the change.

[C4r7m4n]

Hello @Ant1D

Thanks for your answer.
I added this CSS style to my existing application.css file.
Unfortunately the change doesn't affect my dashboard 😞

Are you sure it should be span.singleResult instead e.g. appsingleValue or sth similar? Where do you came from this value: span.singleResult ?

[araitz]

Make sure to clear your browser cache or use _bump (i.e go to http://your_server:8000/_bump and press the bump button) after you make this change. If application.css did not exist previously, you may need to restart Splunk.