Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

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

shailesh030
Path Finder
‎12-10-2014 07:48 PM

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;
}
Reply
1 Solution
Solved! Jump to solution
Solution

davecroto
Splunk Employee
Splunk Employee
‎12-10-2014 07:53 PM

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

Reply
Solved! Jump to solution
Solution

davecroto
Splunk Employee
Splunk Employee
‎12-10-2014 07:53 PM

Try:

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

Restart Splunk Web

Reply
Solved! Jump to solution

shailesh030
Path Finder
‎12-10-2014 08:08 PM

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

Thanks again.

0 Karma
Reply
Solved! Jump to solution

davecroto
Splunk Employee
Splunk Employee
‎12-10-2014 08:08 PM

Perfect! Thanks!

0 Karma
Reply
Solved! Jump to solution

davecroto
Splunk Employee
Splunk Employee
‎12-10-2014 08:16 PM

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
Reply
Solved! Jump to solution

shailesh030
Path Finder
‎12-10-2014 08:30 PM

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
Reply
Solved! Jump to solution

davecroto
Splunk Employee
Splunk Employee
‎12-10-2014 08:41 PM

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
Reply
Solved! Jump to solution

shailesh030
Path Finder
‎12-11-2014 02:56 PM

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
Reply
Solved! Jump to solution

sweetlile
Explorer
‎09-09-2016 07:49 AM

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

0 Karma
Reply
Solved! Jump to solution

shailesh030
Path Finder
‎12-10-2014 08:31 PM 
<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
Reply
Get Updates on the Splunk Community!

Developer Spotlight with Paul Stout

Welcome to our very first developer spotlight release series where we'll feature some awesome Splunk ...

State of Splunk Careers 2024: Maximizing Career Outcomes and the Continued Value of ...

For the past four years, Splunk has partnered with Enterprise Strategy Group to conduct a survey that gauges ...

Data-Driven Success: Splunk & Financial Services

Splunk streamlines the process of extracting insights from large volumes of data. In this fast-paced world, ...