Splunk Search

overriding certain values in default.css with application.css

smolcj
Builder

hi,
i want to change the fontsize of a single result table in application.css. i did a homework and i tried

  .SingleValue .singleResult {
font-size: 14px;!important;
vertical-align: 0px;!important;
margin: 0px 6px;
}

but this is not working for my app. if i am changing default.css, the changes are reflected in my app. but it is not happening with application.css. i tried clearing browser cache also.

please help

thank you

Tags (1)
1 Solution

jonuwz
Influencer

First up, that css is wrong. There's no ';' between the attribute value and !important
Also your overriding margins and alignments on 2 very different CSS classes, which is unlikely to be what you are intending to do.

You also dont need to be defining important values.

Edit - the css differs in v4 and v5 of splunk

To change the font size in SingleValues in splunk 4.X you need this in application.css :

.SingleValueHolder {
    font-size: 14px;
}

To change the font size in SingleValues in splunk 5.X you need this in application.css :

.SingleValue .singleResult {
    font-size: 14px;
}

Restart splunk if you created the file for hte 1st time, the n Ctrl+F5 your view.

ProTip : Install the Firebug plug-in for firefox, and activate it.

Load your view, In firebug, use the element picker to highlight a element of the web page you are interested in.

On the right side it will show you the CSS that styles that element, so you know what you should be overriding in your application.css

View solution in original post

jonuwz
Influencer

what version of splunk 4 or 5 ?

Updated answer with v5 css

0 Karma

smolcj
Builder

thanks jonuwz, but the size of the result value of single value panel is 28px, how to change it to 14px.

0 Karma

jonuwz
Influencer

The default font size is 14px - you wouldn't see much of a change....

0 Karma

jonuwz
Influencer

First up, that css is wrong. There's no ';' between the attribute value and !important
Also your overriding margins and alignments on 2 very different CSS classes, which is unlikely to be what you are intending to do.

You also dont need to be defining important values.

Edit - the css differs in v4 and v5 of splunk

To change the font size in SingleValues in splunk 4.X you need this in application.css :

.SingleValueHolder {
    font-size: 14px;
}

To change the font size in SingleValues in splunk 5.X you need this in application.css :

.SingleValue .singleResult {
    font-size: 14px;
}

Restart splunk if you created the file for hte 1st time, the n Ctrl+F5 your view.

ProTip : Install the Firebug plug-in for firefox, and activate it.

Load your view, In firebug, use the element picker to highlight a element of the web page you are interested in.

On the right side it will show you the CSS that styles that element, so you know what you should be overriding in your application.css

smolcj
Builder

yes i did that also. actually the application.css file was not new . but no change

0 Karma

jonuwz
Influencer

If you have created application.css for the 1st time - you must restart splunk for the change to take effect. You only need to do this once, modifications to the file after the initial creation only need a browser refresh

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...