Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
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 to make a css script affect only specific panels?

power12
Communicator
‎06-05-2023 11:59 AM

Hello I have the below css which affects all the panels including date/time filter..HOw can I make it affect only the panels I want.

 

 

<row>
    <panel depends="$alwaysHideCSSPanel$">
      <html>
         <style>
           table thead tr th,td{
           font-size:150% !important;
           width:150px !important;
           border: 1px solid black !important;
           text-align: right !important
           }
           table thead tr th{
            font-weight: bold !important;
           }
           
           g[transform] text {
            font-size:130% !important;
            }
            
           g.highcharts-axis-labels text {
            font-size:130% !important;
            }

           g.highcharts-axis text {
            font-size:130% !important;
            }
            
           h2 text {
            font-size:130% !important;
            }
          </style>
       </html>
    </panel>
  </row>

 

 

Labels (2)
Labels
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

danspav
SplunkTrust
SplunkTrust
‎06-05-2023 05:07 PM

Hi @power12,

 

If you give your panels IDs, then you can specify them in the CSS.

If you give panels an identifier "XXX_" and a number, then you can use a neat CSS trick where you apply the CSS to all DIVs whose ID starts with "XXX_"

<row>
   <panel id="apply_css_1">...</panel>
   <panel id="apply_css_2">...</panel>
</row>
<row>
   <panel id="apply_css_3">...</panel>
</row>

 

Then create your CSS panel and add the prefix: div[id^=apply_css] to each class

<row>
    <panel depends="$alwaysHideCSSPanel$">
      <html>
         <style>
           div[id^=apply_css] table thead tr th,td{
           font-size:150% !important;
           width:150px !important;
           border: 1px solid black !important;
           text-align: right !important
           }
           div[id^=apply_css] table thead tr th{
            font-weight: bold !important;
           }
        </style>
     </html>
   </panel>
</row>

 That way your CSS is only applied to the panels you want.

 

Cheers,
Daniel

View solution in original post

Reply
Solved! Jump to solution
Solution

danspav
SplunkTrust
SplunkTrust
‎06-05-2023 05:07 PM

Hi @power12,

 

If you give your panels IDs, then you can specify them in the CSS.

If you give panels an identifier "XXX_" and a number, then you can use a neat CSS trick where you apply the CSS to all DIVs whose ID starts with "XXX_"

<row>
   <panel id="apply_css_1">...</panel>
   <panel id="apply_css_2">...</panel>
</row>
<row>
   <panel id="apply_css_3">...</panel>
</row>

 

Then create your CSS panel and add the prefix: div[id^=apply_css] to each class

<row>
    <panel depends="$alwaysHideCSSPanel$">
      <html>
         <style>
           div[id^=apply_css] table thead tr th,td{
           font-size:150% !important;
           width:150px !important;
           border: 1px solid black !important;
           text-align: right !important
           }
           div[id^=apply_css] table thead tr th{
            font-weight: bold !important;
           }
        </style>
     </html>
   </panel>
</row>

 That way your CSS is only applied to the panels you want.

 

Cheers,
Daniel

Reply
Solved! Jump to solution

power12
Communicator
‎06-06-2023 10:16 AM

Thank You this worked

0 Karma
Reply
Solved! Jump to solution

diogofgm
SplunkTrust
SplunkTrust
‎06-05-2023 04:39 PM

You can use id that can be referenced by the css.

Check this example dashboard (you can just copy/paste in to a new dashboard 😞

<dashboard version="1.1">
  <label>css test</label>
  <row>
    <panel>
      <html>
      <style>
      #mycss table tr{
        font-size:150% !important;
        font-weight: bold;
        width:150px !important;
        border: 1px solid black !important;
        text-align: right !important;
        background-color: #FF00FF !important;
        
      }
      </style></html>
    </panel>
  </row>
  <row>
    <panel>
      <table id="mycss">
        <search>
          <query>index=_internal sourcetype IN (splunkd, splunk_python)| timechart span=1h count by sourcetype | table _time splunkd * | fillnull value=0 splunkd splunk_python mongod</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
      </table>
    </panel>
    <panel>
      <table>
        <search>
          <query>index=_internal sourcetype IN (splunkd, splunk_python)| timechart span=1h count by sourcetype | table _time splunkd * | fillnull value=0 splunkd splunk_python mongod</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
      </table>
    </panel>
  </row>
</dashboard>

Note that I added the mycss id to the css and to one of the tables.

------------
Hope I was able to help you. If so, some karma would be appreciated.
0 Karma
Reply
Get Updates on the Splunk Community!

Accelerating Observability as Code with the Splunk AI Assistant

We’ve seen in previous posts what Observability as Code (OaC) is and how it’s now essential for managing ...

Integrating Splunk Search API and Quarto to Create Reproducible Investigation ...

 Splunk is More Than Just the Web Console For Digital Forensics and Incident Response (DFIR) practitioners, ...

Congratulations to the 2025-2026 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...