Dashboards & Visualizations

How do you add CSS to a dashboard?

New Member

i have doubts like how to add a css file in splunk dashboard (internal external..)
please help me with that

0 Karma

SplunkTrust
SplunkTrust

@Puvi, Refer to one of my answers on three ways you can apply CSS to Splunk Simple XML Dashboards. It also lists how you can use your browser inspector tool to select DOM element and apply CSS style accordingly.

https://answers.splunk.com/answers/590387/how-do-i-update-panel-color-in-splunk-using-css-1.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

SplunkTrust
SplunkTrust

@Puvi, did you get a chance to try out my answer and explore CSS in Splunk Dashboard?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

SplunkTrust
SplunkTrust

Hi @Puvi,

If you want to add css in your dashboard, you need to place your css file on splunk server in $SPLUNK_HOME/etc/apps/<APP NAME>/appserver/static/ and then you need to define that css in your dashboard xml like <dashboard .... stylesheet="YOUR_CSS_FILENAME.css">

0 Karma

New Member

Hi Harshil ,

Where to add the form tag in our xml code ? Can you please provide me one sample xml code . Will have some idea .

Thanks,
Shailaja

0 Karma

SplunkTrust
SplunkTrust

@shailajasarangi which form tag are you talking about? CSS can be applied to both <dashboard> and <form> views. @harsmarvania57 has already provided link to Splunk Dashboard Examples App from Splunkbase which has several examples of adding CSS and JS to your Splunk Dashboards.

You can also check out my answer below which has several ways of adding CSS to your Splunk Dashboard. You can also check out Splunk Documentation if you still have confusion. https://docs.splunk.com/Documentation/Splunk/latest/AdvancedDev/UseCSS

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

New Member

thank you.. @harsmarvania57
yeah i have done that
i need further details regarding css like how to add background to an entire panel itself?

0 Karma

SplunkTrust
SplunkTrust

You can check custom layout in Splunk Dashboard Examples app (https://splunkbase.splunk.com/app/1603/) , here they have given below snippet in example.

/* EDIT PANELS */
.dashboard-panel input {
    background-color: #444;
}
.drag-handle a.delete-panel {
    background: #000 !important;
}

Are you looking for something like this?

0 Karma