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!

Combine Multiline Logs into a Single Event with SOCK - a Guide for Advanced Users

This article is the continuation of the “Combine multiline logs into a single event with SOCK - a step-by-step ...

Everything Community at .conf24!

You may have seen mention of the .conf Community Zone 'round these parts and found yourself wondering what ...

Index This | I’m short for "configuration file.” What am I?

May 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with a Special ...