Solved: How to make a css script affect only specific pan...

power12 · ‎06-05-2023

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>

danspav · ‎06-05-2023

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

danspav · ‎06-05-2023

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

power12 · ‎06-06-2023

Thank You this worked

diogofgm · ‎06-05-2023

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.

How to make a css script affect only specific panels?

CSS

simple XML

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Announcing Modern Navigation: A New Era of Splunk User Experience

Data Drivers: How We're Streaming Real-Time F1 Telemetry Directly into Splunk ...

Data Management Digest – July 2026

Join the Conversation