Dashboards & Visualizations

CSS not working with Dashboard

sathish2k8
Explorer

I am using CustomDecorations.css for my dashboard how to add it with my panels.

.custom-result-value {
    font-size: 55px;
    margin: 35px auto;
    text-align: center;
    font-weight: bold;
    color: rgb(85, 85, 85);
}
.custom-result-value:before {
    font-family: "Splunk Icons";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: 110%;
}
.severe.custom-result-value:before {
    content: "\2297";
}
.severe.custom-result-value {
    color: rgb(217, 63, 60);
}
.high.custom-result-value {
    color: rgb(245, 143, 57);
}
.high.custom-result-value:before {
    content: "\ECD4";
}
.elevated.custom-result-value {
    color: rgb(247, 188, 56);
}
.elevated.custom-result-value:before {
    content: "\26A0";
}
.low.custom-result-value {
    color: rgb(101, 166, 55);
}
.low.custom-result-value:before {
    content: "\ECD3";
}
.guarded.custom-result-value {
    color: rgb(109, 183, 198);
}
.guarded.custom-result-value:before {
    content: "\0049";
}
.custom-result-value.icon-only {
    font-size: 90px;
}
Tags (1)
0 Karma

niketn
Legend

@sathish2k8 please add more details as to what you are trying to implement.

In order to add CSS Splunk Dashboard there could be several ways... to begin with try to add the following to Simple XML dashboard:

<row depends="$alwaysHideCSSPanel$">
    <panel>
         <html>
               <style>
             .custom-result-value {
                 font-size: 55px;
                 margin: 35px auto;
                 text-align: center;
                 font-weight: bold;
                 color: rgb(85, 85, 85);
             }
             .custom-result-value:before {
                 font-family: "Splunk Icons";
                 font-style: normal;
                 font-weight: normal;
                 text-decoration: inherit;
                 font-size: 110%;
             }
             .severe.custom-result-value:before {
                 content: "\2297";
             }
             .severe.custom-result-value {
                 color: rgb(217, 63, 60);
             }
             .high.custom-result-value {
                 color: rgb(245, 143, 57);
             }
             .high.custom-result-value:before {
                 content: "\ECD4";
             }
             .elevated.custom-result-value {
                 color: rgb(247, 188, 56);
             }
             .elevated.custom-result-value:before {
                 content: "\26A0";
             }
             .low.custom-result-value {
                 color: rgb(101, 166, 55);
             }
             .low.custom-result-value:before {
                 content: "\ECD3";
             }
             .guarded.custom-result-value {
                 color: rgb(109, 183, 198);
             }
             .guarded.custom-result-value:before {
                 content: "\0049";
             }
             .custom-result-value.icon-only {
                 font-size: 90px;
             }
               </style>
         </html>
    </panel>
</row>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

sathish2k8
Explorer

I have my dashboard full of single value fields. instead of showing single value i want to show icons as in the attachment. for that i tried to implement by adding progress add inside my panel but not workingalt text. above message has customdecorations css. Please guide me. i have presentation today. 😞

  <label>Online Quotation</label>
  <description>~</description>
  <fieldset submitButton="false" autoRun="true">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>Profiler</title>
      <single>
        <search>
          <query>index=<> sourcetype="profiler" timeout&gt;5000| stats count</query>
          <progress>
            <set token="value3">$result.value$</set>
            <set token="range3">$result.range$</set>
          </progress>
          <earliest>-15m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">all</option>
        <drilldown>
          <link target="_blank">/app/gre/profiler</link>
        </drilldown>
      </single>
    </panel>
    <panel>
  </row>
</form>
0 Karma

skalliger
Motivator

Don't forget to restart your Splunk daemon. In earlier versions of Splunk, a restart was required before new stylesheets took effect.

Skalli

0 Karma

niketn
Legend

@sathish2k8, if you need it ASAP, you should try to use Status Indicator custom visualization from Splunkbase: https://splunkbase.splunk.com/app/3119/

Refer to following answer to do something similar with Single Value visualization and Status Indicator Custom Visualization: https://answers.splunk.com/answers/590581/refresh-data-in-table-by-collecting-token-on-click.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...