Dashboards & Visualizations

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

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

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

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

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

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

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

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
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!