Dashboards & Visualizations
Highlighted

How to add a CSS class to a row in a dashboard using Simple XML?

Path Finder

I want to be able to style specific rows by styling them through stylesheets. Is it possible to add a CSS class to a row with Simple XML dashboards?

Highlighted

Re: How to add a CSS class to a row in a dashboard using Simple XML?

Contributor

To add a different CSS class to each rows then you need to convert the xml to html and in html then you can add a different css reference for each row.

....
tr class="d0"

......


tr.d0 td {
background-color: #CC9999;
color: black;
}
tr.d1 td {
background-color: #9999CC;
color: black;
}

0 Karma
Highlighted

Re: How to add a CSS class to a row in a dashboard using Simple XML?

Path Finder

So then I'm guessing that there's no way of doing it without converting it to HTML?

0 Karma
Highlighted

Re: How to add a CSS class to a row in a dashboard using Simple XML?

Contributor

I have'nt see any - for a row in a dashboard.

0 Karma
Highlighted

Re: How to add a CSS class to a row in a dashboard using Simple XML?

SplunkTrust
SplunkTrust

By rows , it's table row OR row within the dashboard?

0 Karma
Highlighted

Re: How to add a CSS class to a row in a dashboard using Simple XML?

Path Finder

Row within the dashboard.

0 Karma
Highlighted

Re: How to add a CSS class to a row in a dashboard using Simple XML?

SplunkTrust
SplunkTrust

What kind of customization you're looking for?? Have seen examples from "Splunk 6.x Dashboard example' app?

0 Karma
Highlighted

Re: How to add a CSS class to a row in a dashboard using Simple XML?

Path Finder

Honestly, I just want to add a margin-top to space out different sections in the view. I currently have a view with multiple dashboards, which are split into 5 different sections. I currently have an <h1> separating each section, and I was thinking of putting a margin-top on each heading.

I've seen and used the dashboard example app as a reference, is there something specific I should look at?

0 Karma
Highlighted

Re: How to add a CSS class to a row in a dashboard using Simple XML?

SplunkTrust
SplunkTrust

In dashboard example, you can see "Layout Elements" (using .css file).

If the only thing your need is to space out different sections/panels, you can use HTML module of simple xml to add extra space (using br tags of html).

0 Karma
Highlighted

Re: How to add a CSS class to a row in a dashboard using Simple XML?

Champion

You can add any arbitrary css to any simple XML by using the html tags in side of any row. I use this sometimes when I am lazy.

<row>
<html>
<style type="text/css">

h1 {
   font-size:20px;
   line-height:20px;
   margin:2px;
}

h3 {
   font-size:16px;
   line-height: 16px;
   margin:2px;
}

</style>
<div></div>
</html>
</row>

Hope this helps.