CSS not working with Dashboard

sathish2k8 · ‎01-24-2018

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;
}

niketn · ‎01-24-2018

@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!!!"

sathish2k8 · ‎01-24-2018

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 working. 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>

skalliger · ‎01-26-2018

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

Skalli

niketn · ‎01-24-2018

@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!!!"

CSS not working with Dashboard

Splunk App for Anomaly Detection End of Life Announcment

Aligning Observability Costs with Business Value: Practical Strategies

Mastering Data Pipelines: Unlocking Value with Splunk

Are you a member of the Splunk Community?

CSS not working with Dashboard

Splunk App for Anomaly Detection End of Life Announcment

Aligning Observability Costs with Business Value: Practical Strategies

Mastering Data Pipelines: Unlocking Value with Splunk