I'm looking at the answers provided from the links 1 and 2 at the bottom of this page, and they both mention using panel id to specify the background color of a panel. I have 5 panels in all, and I was able to change the background color of the 5 panels with the code below.
<row depends="$STYLES$">
<panel>
<html>
<style>
#panel_section1 .dashboard-panel {
background:green !important;
}
#panel_section2 .dashboard-panel {
background:green !important;
}
#panel_section3 .dashboard-panel {
background:green !important;
}
#panel_section4 .dashboard-panel {
background:green !important;
}
#panel_section5 .dashboard-panel {
background:green !important;
}
</style>
</html>
</panel>
</row>
...
<row>
<panel id="panel_section1">
...
</panel>
</row>
<row>
<panel id="panel_section2">
...
</panel>
</row>
(3 more times for section3 to section5).
My question is I wanted the same style for all my panels, i.e. background is green. Do I really have to repeat the code 5 times for 5 panels? I tried the code below and it did not work.
<style>
#panel_section1 #panel_section2 #panel_section3 #panel_section4 #panel_section5 .dashboard-panel {
background:green !important;
}
<style>
I also tried the code below, i.e. only have 1 <style>
block and set all my panels to the same id, but got the error that there was duplicate panel id.
<style>
#panel_section1 .dashboard-panel {
background:green !important;
}
<style>
...
<row>
<panel id="panel_section1">
...
</panel>
</row>
<row>
<panel id="panel_section1">
...
</panel>
</row>
I'm just wondering if there is a shorter and less repetitive way to do this.
Hi
Try like
#panel_section1 .dashboard-panel,#panel_section2 .dashboard-panel {
background:green !important;
}
OR
<style>
[id^="panel_section"] .dashboard-panel {
background:green !important;
}
</style>
Hi
Try like
#panel_section1 .dashboard-panel,#panel_section2 .dashboard-panel {
background:green !important;
}
OR
<style>
[id^="panel_section"] .dashboard-panel {
background:green !important;
}
</style>
Thanks! This worked.