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!

Get ready to show some Splunk Certification swagger at .conf24!

Dive into the deep end of data by earning a Splunk Certification at .conf24. We're enticing you again this ...

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Now On-Demand Join us to learn more about how you can leverage Service Level Objectives (SLOs) and the new ...

Database Performance Sidebar Panel Now on APM Database Query Performance & Service ...

We’ve streamlined the troubleshooting experience for database-related service issues by adding a database ...