Dashboards & Visualizations

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

shailesh030
Path Finder

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;
}
1 Solution

davecroto
Splunk Employee
Splunk Employee

Try:

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

Restart Splunk Web

View solution in original post

davecroto
Splunk Employee
Splunk Employee

Try:

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

Restart Splunk Web

shailesh030
Path Finder

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

Thanks again.

0 Karma

davecroto
Splunk Employee
Splunk Employee

Perfect! Thanks!

0 Karma

davecroto
Splunk Employee
Splunk Employee

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>
0 Karma

shailesh030
Path Finder

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.

0 Karma

davecroto
Splunk Employee
Splunk Employee

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>
0 Karma

shailesh030
Path Finder

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>
0 Karma

sweetlile
Explorer

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

0 Karma

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