How to change the font size in before-panel class

Arkon · ‎01-28-2016

Hello,

I would like to change the size of the font inside a panel.

Here is my panel in the non-generated dashboard:

    <search>
      <query>| savedserach "customer number" </query>
      <earliest>0</earliest>
      <latest></latest>
    </search>
    <option name="beforeLabel">Number of customers:</option>
    <option name="linkView">search</option>
    <option name="refresh.time.visible">false</option>
    <option name="drilldown">none</option>
  </single>

I would like to change the size of "Number of customers" from the class beforeLabel.
I can write CSS in the page itself, but I am still trying to figure out what's the class to write.
Here is the html block in the final page:

<g class="main-label-group"><g class="single-value-label" data-name="display.visualizations.singlevalue.beforeLabel" data-cid="view8302" data-view="views/shared/singlevalue/Label" data-render-time="0"><g class="before-label-group"><g class="svg-label"><text class="before-label" x="30.59" style="font-weight: normal; fill: rgb(51, 51, 51); opacity: 1; font-size: 15.7694px;">Number of customers:</text></g></g></g><g class="single-value-label" data-name="display.visualizations.singlevalue.singleResult" data-cid="view8304" data-view="views/shared/singlevalue/Label" data-render-time="0.001"><g class="single-result-group"><g class="svg-label"><text class="single-result" x="153.293125" style="font-weight: bold; fill: rgb(51, 51, 51); opacity: 1; font-size: 28.1292px;">6</text></g></g></g></g>

Thank you very much for your help

jeffland · ‎01-28-2016

If you only have one single value on your dashboard, you can use this class:

.single-result

If you have more than one and only want to change one, you could give the single value an id and go from there:
XML

<single id="your_id">
  <search>
    ...
</single>

CSS

#your_id .single-result

Arkon · ‎01-28-2016

Thank you very much for your anwser.
That's what I tought but I tried all of that without success...

     <single id='kpi'>
        <search>
          <query>| savedsearch "count customers" </query>
          <earliest>-15m</earliest>
          <latest>-0m</latest>
        </search>
        <option name="classField">range</option>
        <option name="field">Devices</option>
        <option name="beforeLabel">Number of customers:</option>
        <option name="link.visible">false</option>
        <option name="refresh.time.visible">false</option>
        <option name="linkView">search</option>
        <option name="drilldown">none</option>
      </single>
    </panel>
    <panel>
      <html>
        <style>
            kpi .single-result
            {
                font-size: 16px;
            }
            #kpi .single-result
            {
                font-size: 16px;
            }
            .single-result
            {
                font-size: 16px;
            }
          </style>
      </html>
    </panel>
  </row>
</dashboard>

What am I doing wrong?
There is also a dashboard.css in app/static/ with the sames values.

Thank you very much

jeffland · ‎01-29-2016

Have you had a look at this? Usually, to style your dashbaord, you include the following in your XML:

<dashboard stylesheet="your_css_file.css">
  ...

and place your_css_file.css in <your_app_folder>/appserver/static. But apparently your code works as well, it will however leave you with an empty row in your dashboard.

Concerning the actual problem, the CSS you are trying to apply is overwritten by the inline code from the single value. You can make your style take effect by making it !important like so:

#kpi .single-result
    {
        font-size: 16px !important;
    }

This is however not best practice, ideally you would change the code in the correct place instead of overwriting it like this. Unfortunately, I feel this is out of your reach regarding single values, but anyone else please feel free to correct me on this.
Hope this solves your problem for now!

How to change the font size in before-panel class

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor

Introducing the 2024 SplunkTrust!