topic Re: applying a css style to a single element in Dashboards & Visualizations

applying a css style to a single element

cphair — Fri, 11 Jan 2013 22:40:34 GMT

This is probably a simple one, but I'm a novice at CSS. I have an advanced XML dashboard with several tables, and I need to apply a custom style to one of them. The code just affects the td elements, so the current CSS declaration is td.myCustomClass {blah blah}. I tested the code on a sample dashboard and it works, but I don't know how to scope it to apply to just one table. In straight-up CSS/HTML, I guess I would add an id tag to the single table I want to format differently, and then make my CSS declaration something like td.myCustomClass #foo {blah}. I'm not sure (a) if that's exactly the right CSS syntax, and (b) how I apply an id tag in advanced XML. Am I on the right track?

Re: applying a css style to a single element

cphair — Tue, 15 Jan 2013 18:38:58 GMT

Based on a couple other answers (such as http://splunk-base.splunk.com/answers/69863/a-quick-question-about-applicationjs ), trying to use an id like I would expect is kind of ugly, because the one Splunk generates in the HTML is based on the type of module and its order in the page. The way I solved my issue was to add group="mygroupname" to the definition of the one table I wanted to change, and then add if (this.getGroupName() != "mygroupname") {return;} to my custom code block in application.js (which I see I didn't mention in my question). The JS code block is already scoped to the particular view I need it for, so hopefully this isn't too inefficient. If anyone has a better way to handle this, I'd be interested to hear it.

Re: applying a css style to a single element

kasu_praveen — Wed, 08 May 2013 08:40:05 GMT

Thanks cphair. "this.getGroupName()" is perfectly working.