Dashboards & Visualizations

How to create panels with different background colors on same dashboard?

wcooper003
Communicator

I'm trying to create a panel that has a different background color than other panels on the same dashboard. I though it may be as simple as creating a CSS file like this:

.dashboard-row .dashboard-panel .panel-body.html {                      
    background-color: #ffffff;
}

#infobox .dashboard-row .dashboard-panel .panel-body.html {   
    background-color: #eee !important; 
}

And then for the panel I want to have as the non-default color, I would just give it the id="infobox", such as this:

<dashboard stylesheet="panel_color.css">
  <label>Label</label>
  <row>
    <panel id ="infobox">
      <html><a>This panel should be transparent</a></html>
    </panel>
  </row>

    <row>
    <panel>
      <html><a>This panel should be a default white background</a></html>
    </panel>
  </row>

</dashboard>

But that doesn't work - they're both still white background. I don't really know what i'm doing with CSS, just hacking stuff together when I can figure it out. Anybody have suggestions?

Thanks

0 Karma
1 Solution

wcooper003
Communicator

Ok so I figure out it through trial and error while learning CSS (all new). Through inspecting in Chrome, I figure out the class that sets the default background color is dashboard-panel, so I had to get CSS straight:

.dashboard-panel  {
    background: #ffffff !important;  
}

#infobox .dashboard-panel  {
    background: #eee !important; 
}

Now it works.

View solution in original post

joesrepsol
Path Finder

I was wondering something similar wcooper003.

How can I edit (2) panels on my dashboard that I want orange background, while the other panels retain their default coloring (or even from the .css)? Can we not use an in-line style change per element like normal HTML? Trial and error not yielding me any solutions just yet.

Thanks in advance for any help on the matter.

Joe

0 Karma

wcooper003
Communicator

Ok so I figure out it through trial and error while learning CSS (all new). Through inspecting in Chrome, I figure out the class that sets the default background color is dashboard-panel, so I had to get CSS straight:

.dashboard-panel  {
    background: #ffffff !important;  
}

#infobox .dashboard-panel  {
    background: #eee !important; 
}

Now it works.

niketn
Legend

Have you looked at Custom Layout Example: Dark in Splunk 6.x Dashboard Examples app?
Following is a snippet from the example that they have used.

/* EDIT PANELS */
.dashboard-panel input {
    background-color: #444;
}
.drag-handle a.delete-panel {
    background: #000 !important;
}
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

wcooper003
Communicator

Thanks for sending this. I see they set different colors for different elements -- e.g., different background color for the panels, and then different background colors for edit input based on the snippet you sent. But how do I have different background colors on two elements that are the same type, but one has a different id name?

I think I found the problem though inspecting the page -- when I assign an id to the panel (), that applies the id name to class "dashboard-cell dashboard-layout-panel last-visible", not the "panel-body.html"

So the question is now: how do i name the "panel-body.html" in my .xml file in order for me to be able to control it's color separately? I was playing around and tried to assign the id name to the html tag (.dashboard-element .html .dashboard-element-html ), but that didn't work either.

0 Karma

rjthibod
Champion

Did you restart Splunk after adding the CSS file? I don't see anything wrong with your approach, so I have to first assume it is an issue with Splunk's internal web server needing to be refreshed after you added a new file.

If the CSS file already existed, then you need to make sure you "bump" Splunk. Go to the URL http://:8000/en-us/_bump and click the button and then refresh your dashboard.

0 Karma

wcooper003
Communicator

Yes I did. In fact I can switch the colors in the CSS, bump it, clear out the Chrome cache, and then both panels become transparent. I can only assume something with how i'm calling the infobox label isn't working...e.g. is this the correct way to do it:

#infobox .dashboard-row .dashboard-panel .panel-body.html
0 Karma

rjthibod
Champion

Actually, it looks like Splunk has made it harder to do that in CSS but you can do it in SimpleXML. There is an XML charting option that allows you to customize the color for some charts. The option for your one unique panel would be as follows.

<option name="charting.backgroundColor">#EEEEEE</option>

mahegstrom
Explorer

6 years later and this solution is still relevant. Works perfectly in XML.

0 Karma

wcooper003
Communicator

That didn't do anything - I think that would only be for a panel if I had a chart in it, and may only affect the chart background. I have an panel with just an html element in it.

Hopefully this is still possible in CSS, not sure what it could be though.

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...