Dashboards & Visualizations

How can I add HTML and background colors in a dashboard's text panel

cgalligan
Explorer

I'm trying to create a panel on a dashboard with the text white and the background shaded

So far this colors the whole page pink:

<html>
           <style>
             body {
        background-color: #FFCCE6;
    }      
           <p style="color:red">Not Completed</p>
         </html>
        </panel>
</html>
0 Karma
1 Solution

docwindsor
Explorer

If you'd like to apply styles on a panel by panel basis, here is one option.

  1. Define a non-displaying row to set your named CSS styles. For example, you might have this at the top of your dashboard's Simple XML to define a style for displaying the panel title with white text on a green background (this assumes that you never set the STYLES token so that the row remains hidden):







  2. For each panel you'd like to use this style, set the panel id to panel_green:



    ...

View solution in original post

Graham_Hanningt
Builder

Tested in Splunk 7.3:

  1. Insert an id attribute in the parent <panel> element of an <html> element.
  2. Insert a <style> element in the <html> element.
  3. Define new CSS rules that target the rendered HTML, based on the id attribute value.

For example:

<panel id="header_performance">
    <html>
        <style>
            #header_performance .panel-body.html {
                background-color: #DDFFDF;
            }
        </style>
        <h2>Performance</h2>
    <html>
</panel>

This example is specifically for an HTML "visualization": it colors the background of the HTML panel.

I think, although I have not exhaustively tested this, that the same technique applies to any visualization: the "secret" is to set an id attribute value in the Simple XML that appears in the rendered HTML. You can then use that id value to target CSS rules.

Tip: Use your web browser's "developer tools" to inspect the rendered HTML of your dashboard, so that you can see the relevant elements (and their attributes, such as class) to target in your CSS rules.

0 Karma

Graham_Hanningt
Builder

I've not spent much time delving into how Splunk Web defines the colors in its style guide:

/en-US/static/docs/style/style-guide.html#colors

but from what I've seen, it doesn't use CSS variables that you can refer to in your own CSS rules in Simple XML.

For example, I'd hoped to be able to do this:

background-color: var(--accentColorL10);

but, nope. For colors, Splunk appears to be using CSS classes, not CSS variables.

I'd be happy to be shown otherwise.

0 Karma

docwindsor
Explorer

If you'd like to apply styles on a panel by panel basis, here is one option.

  1. Define a non-displaying row to set your named CSS styles. For example, you might have this at the top of your dashboard's Simple XML to define a style for displaying the panel title with white text on a green background (this assumes that you never set the STYLES token so that the row remains hidden):







  2. For each panel you'd like to use this style, set the panel id to panel_green:



    ...

cgalligan
Explorer

Thanks this is close to what I want. How would I update the HTML so that only one panel on the dashboard has a dark background?

0 Karma

niketn
Legend

@cgalligan get the Splunk Dashboard Examples app from Splunkbase (https://splunkbase.splunk.com/app/1603/) and check out the Custom Layout Dark example. There are a lot of DOM elements which would require custom CSS to be applied to have consistent style override (you can get the CSS from the same example). If you want to come up with your own CSS selectors and overrides, best option is to load your Splunk dashboard and use browser's Inspector Tool (Shortcut key - F12) and choose Specific HTML DOM element for inspection, css selector and override.

alt text

Following is just a part of it which changes Panel Background Color to Black and Text Color to White. This also applies to Panel and Visualization Title.

<dashboard>
  <label>Background Color Dark with Text Color White</label>
  <row>
    <panel>
      <title>Panel 1 Title</title>
      <html>
        <style>
          .dashboard-row .dashboard-panel,.panel-head h3{
            background-color:#333333 !important;
            color:#ffffff !important;
          }
        </style>
        <div>Text to test Font Color</div>
      </html>
    </panel>
    <panel>
      <title>Panel Title</title>
      <table>
        <title>Table Title</title>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
          | stats count by component
          </query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
      </table>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Enterprise Security Content Update (ESCU) | New Releases

In November, the Splunk Threat Research Team had one release of new security content via the Enterprise ...

Index This | Divide 100 by half. What do you get?

November 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...

Stay Connected: Your Guide to December Tech Talks, Office Hours, and Webinars!

❄️ Celebrate the season with our December lineup of Community Office Hours, Tech Talks, and Webinars! ...