Dashboards & Visualizations

How can we use CSS styling in classic Dashboards

bettyborer
Observer

Hello Splunk Community,

I'm relatively new to Splunk and working on building dashboards for my team. I want to make them look more professional and polished with custom styling. Is there a way to use CSS code in Splunk dashboards to improve the UI? I've seen some really nice-looking dashboards in the community and would love to know how to apply custom styles to elements like panels, headers, and colors. Any guidance or examples would be really appreciated!

Thanks in advance!

Labels (3)
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

It very much depends on how you want your dashboards to look and behave, but essentially using the html/style blocks can give you access to css to modify your dashboards. These can also be added to a css file which is declared at the top of your dashboard, but this file needs to be uploaded and it is often easier to do it inline in your SimpleXML source.

0 Karma

asimit
Path Finder

Hi,

I was in the same boat a few weeks ago, trying to make my dashboards look better without diving deep into CSS coding. I ended up building this app called Dashboard Theme Manager on Splunkbase - now even the most complicated styling gets applied in just a few clicks!

https://splunkbase.splunk.com/app/8336/

Traditionally Splunk only has those basic "dark/light" theme options, but this app gives you tons of different professional themes that Splunk doesn't natively offer. It handles panels, colors, headers, and overall UI perfectly. Super easy to install and use, especially if you're new to Splunk.

For custom CSS styling (if you want manual control): 

Add "html & style" tag in your XML.

<dashboard><label>Your Dashboard</label><row><panel><html><style>.panel-heading { background: #2c3e50; color: white; }</style></html></panel></row></dashboard>

Target classes like .dashboard-row.panel-element for pro tweaks.

Definitely worth checking out if you want that pro look without the hassle.

 

Good luck!

0 Karma

gcusello
SplunkTrust
SplunkTrust

Hi @bettyborer ,

if you want better dashboards, start to see Dashboard Studio.

If you want to use CSS in Classic Dashboard see at https://www.splunk.com/en_us/blog/customers/splunk-clara-fication-customizing-simplexml-dashboards-w... or https://help.splunk.com/en/splunk-enterprise/developing-views-and-apps-for-splunk-web/10.0/customize...

in addition there are many videos on YouTube, e.g:

https://www.youtube.com/watch?v=lDnrZ5QkMIo

Ciao.

Giuseppe

Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

[Puzzles] Solve, Learn, Repeat: Character substitutions with Regular Expressions

This challenge was first posted on Slack #puzzles channelFor BORE at .conf23, we had a puzzle question which ...

Splunk Community Badges!

  Hey everyone! Ready to earn some serious bragging rights in the community? Along with our existing badges ...

[Puzzles] Solve, Learn, Repeat: Matching cron expressions

This puzzle (first published here) is based on matching timestamps to cron expressions.All the timestamps ...