topic Re: How to make a css script affect only specific panels? in Dashboards & Visualizations

How to make a css script affect only specific panels?

power12 — Mon, 05 Jun 2023 19:12:35 GMT

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>

Re: How to make a css script affect only specific panels?

diogofgm — Mon, 05 Jun 2023 23:39:02 GMT

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.

Re: How to make a css script affect only specific panels?

danspav — Tue, 06 Jun 2023 00:07:17 GMT

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_"

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

Re: How to make a css script affect only specific panels?

power12 — Tue, 06 Jun 2023 17:16:18 GMT

Thank You this worked