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
SplunkTrust
SplunkTrust

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!

Observability | How to Think About Instrumentation Overhead (White Paper)

Novice observability practitioners are often overly obsessed with performance. They might approach ...

Cloud Platform | Get Resiliency in the Cloud Event (Register Now!)

IDC Report: Enterprises Gain Higher Efficiency and Resiliency With Migration to Cloud  Today many enterprises ...

The Great Resilience Quest: 10th Leaderboard Update

The tenth leaderboard update (11.23-12.05) for The Great Resilience Quest is out &gt;&gt; As our brave ...