All Apps and Add-ons

panel background color changing

jip31
Motivator

Hello

I want to color a panel background but before I need to clarify some points
First, I know I have to update my CSS file
But I dont understand how to link my CSS code with my panel
For exeample, if I put the code below in my CSS

file

#panel5 h2.panel-title{
. background-color: #FFD501;
}

What I exactly have to add in my XML file? / instead panel or something else?

    <panel>
      <title>System Event Log - Disk - Pie chart</title>
      <chart>
        <title>Critical Events - ID 51 &amp; ID 11</title>
        <search>
          <query>| loadjob savedsearch="admin:FO_DiskHealth_Monitoring:FO_DiskHealth_EV_Pie"</query>
          <earliest>-30d@d</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.chart">pie</option>
        <option name="charting.chart.showLabels">1</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.legend.placement">right</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
      </chart>
    </panel>

Thanks
Regards

Tags (1)
0 Karma
1 Solution

493669
Super Champion

To see css file in action, edit your xml directly, Change the first line from

<dashboard>
   <label>Title of the Dashboard</label>

to

 <dashboard  stylesheet="my_style.css">
   <label>Title of the Dashboard</label>

and if it is form then change to

 <form  stylesheet="my_style.css">
   <label>Title of the Dashboard</label>

Now place a file called my_style.css in the appserver/static folder of the app this dashboard is in (you'll have to create the folders if they're not there already; if the dashboard is in the search app, that means %SPLUNK_HOME%/etc/apps/search/appserver/static/my_style.css)
Restart your splunk instance (to pick up the new file) and check your dashboard to see that the title of the dashboard is now styled according to your css.
also if you add id to your panel for ex.panel id="abc" then css will be-

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

View solution in original post

0 Karma

493669
Super Champion

To see css file in action, edit your xml directly, Change the first line from

<dashboard>
   <label>Title of the Dashboard</label>

to

 <dashboard  stylesheet="my_style.css">
   <label>Title of the Dashboard</label>

and if it is form then change to

 <form  stylesheet="my_style.css">
   <label>Title of the Dashboard</label>

Now place a file called my_style.css in the appserver/static folder of the app this dashboard is in (you'll have to create the folders if they're not there already; if the dashboard is in the search app, that means %SPLUNK_HOME%/etc/apps/search/appserver/static/my_style.css)
Restart your splunk instance (to pick up the new file) and check your dashboard to see that the title of the dashboard is now styled according to your css.
also if you add id to your panel for ex.panel id="abc" then css will be-

#abc .dashboard-panel  {
     background: #eee !important; 
 }
0 Karma

jip31
Motivator

i done exactly the same but it doesnt works

0 Karma

jip31
Motivator

nobody can explain me why it doesnt work please??

0 Karma

493669
Super Champion

@jip31 ,
If you have given your panel id as "abc" then try in css-

div#abc {
    background-color: #FFD501 !important;
}

after saving this css to take effect bump the server using -http://localhost:8000/en-GB/_bump click bump button

0 Karma

jip31
Motivator

Hello all
I m going to test it and I keep you aware
Rgds

0 Karma

harishalipaka
Motivator
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 ...