@trini if you're not that into CSS, and furthermore, into GTK-flavoured CSS, this might provide some helpful hints overall. This is how I'm configuring the battery widget to have a background colour for its status:
@keyframes blink {
to {
background-color: #ffffff;
color: #000000;
}
}
/*
#battery.charging {
background-color: #00ff00;
color: #000000;
}
*/
#battery:not(.charging):not(.full) {
background-color: #ffffbb;
color: #000000;
}
#battery.warning:not(.charging) {
background-color: #ffd000;
color: #000000;
}
/* Using steps() instead of linear as a timing function to limit cpu usage */
#battery.critical:not(.charging) {
background-color: #ff0000;
color: #ffffff;
animation-name: blink;
animation-duration: 0.5s;
animation-timing-function: steps(12);
animation-iteration-count: infinite;
animation-direction: alternate;
}
The Styling wiki page may provide more hints, and the respective module wiki pages.