topic Re: Not able to override default font size of single-value result field in Dashboards & Visualizations

Not able to override default font size of single-value result field

shailesh030 — Thu, 11 Dec 2014 03:48:02 GMT

I want to create a panel which shows # of events in very large font size, something like a realtime counter on a big banner.

I am able to create the realtime "single valued" field and change its font color by overriding singlevalue-result in application.css but for some reason I am not able to change the font-size from 24px to x-large even though it has been given in application.css. I can see in the inspect element of chrome that the font size was taken from mystyles.css then overridden by dashboard-simple-boostrap-min.css which was then again overridden but doesn't show from where

Any advise will be highly appreciated.

Source is

<dashboard stylesheet="mystyles.css">
  <label>Single Value Dasboard</label>
  <row>
    <panel>
      <single>
        <title>TotalCount</title>
        <searchString>index=_internal | eval cur=if(_time &gt; relative_time(now(),"-15m"),1,0) | stats count by cur | sort -cur</searchString>
        <earliestTime>-24h@h</earliestTime>
        <latestTime>now</latestTime>
        <option name="field">count</option>
      </single>
    </panel>
  </row>
</dashboard>

css in mystyles.css referred to in code above has:

  .single-result {
    color: #FF0000;
    font-size: 50px;
    vertical-align: -4px;
    margin: 0px 6px;
}

Re: Not able to override default font size of single-value result field

davecroto — Thu, 11 Dec 2014 03:53:53 GMT

Try:

.single-value .single-result {
color: #FF0000;
font-size: 50px !important;
vertical-align: -4px;
margin: 0px 6px;
}

Restart Splunk Web

Re: Not able to override default font size of single-value result field

shailesh030 — Thu, 11 Dec 2014 04:08:17 GMT

Thanks davecroto, it worked perfectly.
As a side note I tried without restarting splunk web and it still worked.

Thanks again.

Re: Not able to override default font size of single-value result field

davecroto — Thu, 11 Dec 2014 04:08:18 GMT

Perfect! Thanks!

Re: Not able to override default font size of single-value result field

davecroto — Thu, 11 Dec 2014 04:16:22 GMT

This may work to

<form>
<label>Single Value Dasboard</label>
   <fieldset submitButtom="false">
   <html>
  <style type="text/css">
  .single-value .single-result {
  font-size: 50px;
  }
  </style>
       </html>
   </fieldset>
<row>
<panel>
<single>
<title>TotalCount</title>
<searchString>index=_internal | eval cur=if(_time &gt; relative_time(now(),"-15m"),1,0) | stats count by cur | sort -cur</searchString>
<earliestTime>-24h@h</earliestTime>
<latestTime>now</latestTime>
<option name="field">count</option>
</single>
</panel>
</row>
</form>

Re: Not able to override default font size of single-value result field

shailesh030 — Thu, 11 Dec 2014 04:30:34 GMT

I removed reference to mystyles.css and added the above html block with embedded css but it didn't take the overrides, not sure why though.

Re: Not able to override default font size of single-value result field

shailesh030 — Thu, 11 Dec 2014 04:31:08 GMT

<dashboard>
  <label>Single Value Dasboard</label>
  <fieldset submitButtom="false">
  <html>
 <style type="text/css">
 .single-value .single-result {
 font-size: 50px;
 }
 </style>
 </html>
  </fieldset>
  <row>
    <panel>
      <single>
        <title>TotalCount</title>
        <searchString>index=_internal | eval cur=if(_time &gt; relative_time(now(),"-15m"),1,0) | stats count by cur | sort -cur</searchString>
        <earliestTime>-24h@h</earliestTime>
        <latestTime>now</latestTime>
        <option name="field">count</option>
        <option name="afterLabel">Messages Processed in Last 24 hours</option>
        <option name="drilldown">none</option>
        <option name="linkView">search</option>
      </single>
    </panel>
  </row>
</dashboard>

Re: Not able to override default font size of single-value result field

davecroto — Thu, 11 Dec 2014 04:41:14 GMT

Try this...from dashboard to form

<form>
   <label>Single Value Dasboard</label>
   <fieldset submitButtom="false">
   <html>
  <style type="text/css">
  .single-value .single-result {
  font-size: 50px;
  }
  </style>
  </html>
   </fieldset>
   <row>
     <panel>
       <single>
         <title>TotalCount</title>
         <searchString>index=_internal | eval cur=if(_time &gt; relative_time(now(),"-15m"),1,0) | stats count by cur | sort -cur</searchString>
         <earliestTime>-24h@h</earliestTime>
         <latestTime>now</latestTime>
         <option name="field">count</option>
         <option name="afterLabel">Messages Processed in Last 24 hours</option>
         <option name="drilldown">none</option>
         <option name="linkView">search</option>
       </single>
     </panel>
   </row>
 </form>

Re: Not able to override default font size of single-value result field

shailesh030 — Thu, 11 Dec 2014 22:56:56 GMT

Yep.. changing from dashboard to form does work. Thanks a ton. I have one more question in continuation. Is it possible to assign different font sizes to different single values in the same form? I tried by assignining an "additionalClass" for one of single value rows but it didn't work. It changed the font for both the single value fields.

<form>
    <label>Single Value Dasboard</label>
    <fieldset submitButtom="false">
    <html>
   <style type="text/css">
   .single-value .single-result {
   font-size: 50px;
   }

.CriticalStat {
font-size: 24px;
}

   </style>
   </html>
    </fieldset>
    <row>
      <panel>
        <single>
          <title>TotalCount</title>
          <searchString>index=_internal | eval cur=if(_time &gt; relative_time(now(),"-15m"),1,0) | stats count by cur | sort -cur</searchString>
          <earliestTime>-24h@h</earliestTime>
          <latestTime>now</latestTime>
          <option name="field">count</option>
          <option name="afterLabel">Messages Processed in Last 24 hours</option>
          <option name="drilldown">none</option>
          <option name="linkView">search</option>
        </single>
      </panel>
    </row>
  <row>
      <panel>
        <single>
          <title>TotalCount2</title>
          <searchString>index=_internal | eval cur=if(_time &gt; relative_time(now(),"-15m"),1,0) | stats count by cur | sort -cur</searchString>
          <earliestTime>-48h@h</earliestTime>
          <latestTime>now</latestTime>
          <option name="field">count</option>
          <option name="afterLabel">Messages Processed in Last 48 hours</option>
          <option name="additionalClass">CriticalStat</option>
          <option name="drilldown">none</option>
          <option name="linkView">search</option>
        </single>
      </panel>
    </row>
  </form>

Re: Not able to override default font size of single-value result field

sweetlile — Fri, 09 Sep 2016 14:49:25 GMT

when I do this method, I lose the right to edit panels