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

other

simple XML

Share Your Ideas & Meet the Lantern team at .Conf! Plus All of This Month’s New ...

Combine Multiline Logs into a Single Event with SOCK: a Step-by-Step Guide for ...

Stay Connected: Your Guide to May Tech Talks, Office Hours, and Webinars!