Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
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 (3)
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!

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

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars this month. This ...

They're back! Join the SplunkTrust and MVP at .conf24

With our highly anticipated annual conference, .conf, comes the fez-wearers you can trust! The SplunkTrust, as ...

Enterprise Security Content Update (ESCU) | New Releases

Last month, the Splunk Threat Research Team had two releases of new security content via the Enterprise ...