topic Re: overriding certain values in default.css with application.css in Splunk Search

overriding certain values in default.css with application.css

smolcj — Fri, 28 Dec 2012 11:34:27 GMT

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

Re: overriding certain values in default.css with application.css

jonuwz — Fri, 28 Dec 2012 11:44:10 GMT

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

Re: overriding certain values in default.css with application.css

smolcj — Fri, 28 Dec 2012 11:49:27 GMT

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

Re: overriding certain values in default.css with application.css

jonuwz — Fri, 28 Dec 2012 12:03:12 GMT

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

Re: overriding certain values in default.css with application.css

jonuwz — Fri, 28 Dec 2012 13:17:26 GMT

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

Re: overriding certain values in default.css with application.css

smolcj — Mon, 31 Dec 2012 05:52:44 GMT

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

Re: overriding certain values in default.css with application.css

jonuwz — Mon, 31 Dec 2012 14:22:25 GMT

what version of splunk 4 or 5 ?

Updated answer with v5 css