H1N0
September 13, 2026, 11:09pm
1
Edit: I accidently used a turqoise color instead of a green color.
The green color is: #00ff00
I created a tiny css code that makes the domain settings of Pi-hole web ui like this:
Here is the css code:
select:has(option[selected][value*="allow"]) {
/*background: #00a65a57!important;
color:#fff;*/
outline: 2px solid #00ffff;
outline-offset: 2px;
}
select:has(option[selected][value*="deny"]) {
/*background: #dd4b3957!important;
color:#fff;*/
outline: 2px solid #ff0000;
outline-offset: 2px;
}
nero355
September 15, 2026, 3:16pm
2
Pretty cool
Not sure if I am going to use it, but it's nice to known that it can be done!
H1N0
September 15, 2026, 6:43pm
3
And it only uses css, so it probably is very lightweight too.
And it even shouldn't rely on a specific version of Pi-hole, so hopefully no update breaks this.
You can also use a different CSS selector to match the table row or cells, then style the background (or anything else).
Untested example:
table.dataTable > tbody > tr[data-id*='deny'] > td {
background-color: rgba(148,0,0,0.07);
}
table.dataTable > tbody > tr[data-id*='allow'] > td {
background-color: rgba(0,127,0,0.07);
}
This should add semi-transparent colors to the table rows without breaking the "zebra-striping" pattern.