Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

How do I update panel color in Splunk using CSS?

aparnaa
Path Finder
‎11-09-2017 08:45 AM

Hi All

I am new to CSS and wanted to know what should go in css file and in main splunk query if i have to update the color and background of my title in splunk dashboard

Tile : "List of users who logged in "

I want the background to be in blue and text in white

IF we cannot update

0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎11-09-2017 10:47 AM

@aparnaa, for picking up on CSS Styling (specially in Splunk's context to begin with), you can try out following places:

1) Splunk Dashboard Examples App on Splunkbase (https://splunkbase.splunk.com/app/1603/) has Custom Layout Dark example which deals with several CSS style options.
2) Use your Browser Inspector tool to highlight a DOM element to Inspect existing CSS Style applicable and override using CSS selectors.
3) Check out W3 Schools to understand and try out various CSS Selectors: https://www.w3schools.com/cssref/css_selectors.asp

alt text

Based on the question you require the following CSS Style to be applied. PS: Style can be applied
i) Directly within HTML DOM Element like <div id="myDiv" style="font-weight:bold;color:white;">
ii) Using style tag within HTML panel in Splunk Simple XML Dashboard. (PS: It is better to always hide HTML panel with CSS Style through depends attribute in Splunk).
iii) Using a css stylesheet saved in Splunk App's static folder and referring the same in your form/dashboard like <form stylesheet="my_custom_style.css">. Your App's static folder path should typically be $SPLUNK_HOME/etc/apps/<YourAppName>/appserver/static/my_custom_style.css. This approach may require you to refresh/reboot/bump Splunk instance and clear your internet browser history for new changes to reflect.

  <row>
    <panel>
      <html depends="$alwaysHideCSSStyle$">
        <style>
          .dashboard-body {
              background: #1E93C6 !important;
          }

          .dashboard-header h2{
              color: #ffffff !important;
          }          
        </style>
      </html>

Following is the complete Simple XML run anywhere dashboard example code for the screenshot:

<dashboard>
  <label>Splunk Internal Logs</label>
  <row>
    <panel>
      <html depends="$alwaysHideCSSStyle$">
        <style>
          .dashboard-body {
              background: #1E93C6 !important;
          }

          .dashboard-header h2{
              color: #ffffff !important;
          }          
        </style>
      </html>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count by component limit=10 useother=f usenull=f</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">area</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

Preview file
76 KB
Reply
Solved! Jump to solution
Solution

niketn
Legend
‎11-09-2017 10:47 AM

@aparnaa, for picking up on CSS Styling (specially in Splunk's context to begin with), you can try out following places:

1) Splunk Dashboard Examples App on Splunkbase (https://splunkbase.splunk.com/app/1603/) has Custom Layout Dark example which deals with several CSS style options.
2) Use your Browser Inspector tool to highlight a DOM element to Inspect existing CSS Style applicable and override using CSS selectors.
3) Check out W3 Schools to understand and try out various CSS Selectors: https://www.w3schools.com/cssref/css_selectors.asp

alt text

Based on the question you require the following CSS Style to be applied. PS: Style can be applied
i) Directly within HTML DOM Element like <div id="myDiv" style="font-weight:bold;color:white;">
ii) Using style tag within HTML panel in Splunk Simple XML Dashboard. (PS: It is better to always hide HTML panel with CSS Style through depends attribute in Splunk).
iii) Using a css stylesheet saved in Splunk App's static folder and referring the same in your form/dashboard like <form stylesheet="my_custom_style.css">. Your App's static folder path should typically be $SPLUNK_HOME/etc/apps/<YourAppName>/appserver/static/my_custom_style.css. This approach may require you to refresh/reboot/bump Splunk instance and clear your internet browser history for new changes to reflect.

  <row>
    <panel>
      <html depends="$alwaysHideCSSStyle$">
        <style>
          .dashboard-body {
              background: #1E93C6 !important;
          }

          .dashboard-header h2{
              color: #ffffff !important;
          }          
        </style>
      </html>

Following is the complete Simple XML run anywhere dashboard example code for the screenshot:

<dashboard>
  <label>Splunk Internal Logs</label>
  <row>
    <panel>
      <html depends="$alwaysHideCSSStyle$">
        <style>
          .dashboard-body {
              background: #1E93C6 !important;
          }

          .dashboard-header h2{
              color: #ffffff !important;
          }          
        </style>
      </html>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count by component limit=10 useother=f usenull=f</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">area</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Preview file
76 KB
Reply
Solved! Jump to solution

aparnaa
Path Finder
‎11-22-2017 10:29 PM

Thank you so much for helping, it worked

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎11-23-2017 02:01 AM

Anytime... glad it worked!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Take the Survey

Can’t make it to .conf25? Join us online!

Watch Global Broadcast
Get Updates on the Splunk Community!

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Are you leveraging automation to its fullest potential in your threat detection strategy?Our upcoming Security ...

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Boston may be buzzing this September with Splunk University and .conf25, but you don’t have to pack a bag to ...

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...