Dashboards & Visualizations

Single Value change font size

C4r7m4n
Path Finder

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

Tags (3)
1 Solution

Drainy
Champion

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.

View solution in original post

patelmc
Explorer

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

0 Karma

Drainy
Champion

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
Path Finder

Hello @Drainy

Thank you, your solution is working.

0 Karma

Drainy
Champion

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 🙂

0 Karma

C4r7m4n
Path Finder

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

0 Karma

Drainy
Champion

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

0 Karma

C4r7m4n
Path Finder

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 ?

0 Karma

Drainy
Champion

.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

0 Karma

C4r7m4n
Path Finder

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 alt text

0 Karma

Ant1D
Motivator

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
Path Finder

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

0 Karma

Ant1D
Motivator

It's not. Did the above CSS work?

0 Karma

C4r7m4n
Path Finder

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

0 Karma

Ant1D
Motivator

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...

0 Karma

Ant1D
Motivator

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

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

0 Karma

Ant1D
Motivator

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.

0 Karma

C4r7m4n
Path Finder

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 ?

0 Karma

araitz
Splunk Employee
Splunk Employee

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.

0 Karma
Get Updates on the Splunk Community!

Earn a $35 Gift Card for Answering our Splunk Admins & App Developer Survey

Survey for Splunk Admins and App Developers is open now! | Earn a $35 gift card!      Hello there,  Splunk ...

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

You’ve probably heard the latest about AppDynamics joining the Splunk Observability portfolio, deepening our ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

As we’ve seen, integrating Kubernetes environments with Splunk Observability Cloud is a quick and easy way to ...