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!

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...

Introducing Splunk Enterprise 9.2

WATCH HERE! Watch this Tech Talk to learn about the latest features and enhancements shipped in the new Splunk ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...