I have an issue getting the custom background colors to work after several tries.
I keep getting a transparent background instead of a color.
The main goal in doing this is to get Paused and Acknowledged sensors to set the background to the same Green as Up.
I made a copy of 'An Icon A9' and changed the name.
I also changed the prefix to 'map_iconcolorcust_'.
Based on what I've read here and what I gleaned from looking at main.css, I added the following to 'styles_custom_v2.css' :
{{{.map_object.map_icon2.map_iconcolorcust_sensg,
.map_object.map_icon2.map_iconcolorcust_sensg label,
.map_object.map_icon2.map_iconcolorcust_sensg span,
.map_object.map_iconcolorcust_sensb,
.map_object.map_iconcolorcust_sensb label,
.map_object.map_iconcolorcust_sensb span,
.map_object.map_iconcolorcust_senso,
.map_object.map_iconcolorcust_senso label,
.map_object.map_iconcolorcust_senso span,
.map_object.map_iconcolorcust_sensp,
.map_object.map_iconcolorcust_sensp label,
.map_object.map_iconcolorcust_sensp span,
.map_object.map_iconcolorcust_sensq,
.map_object.map_iconcolorcust_sensq label,
.map_object.map_iconcolorcust_sensq span,
.map_object.map_iconcolorcust_sensr,
.map_object.map_iconcolorcust_sensr label,
.map_object.map_iconcolorcust_sensr span,
.map_object.map_iconcolorcust_sensx,
.map_object.map_iconcolorcust_sensx label,
.map_object.map_iconcolorcust_sensx span,
.map_object.map_iconcolorcust_sensy,
.map_object.map_iconcolorcust_sensy label,
.map_object.map_iconcolorcust_sensy span {
text-shadow: -1px 0 2px rgb(87 87 86 / 50%), 0 1px 2px rgb(87 87 86 / 50%), 1px 0 2px rgb(87 87 86 / 50%), 0 -1px 2px rgb(87 87 86 / 50%);
color:#fff;
}
.map_object.map_iconcolorcust_sensx,
.map_object.map_iconcolorcust_hasblack {
background-color:#878787;
color:#fff;
}
.map_object.map_iconcolorcust_hasgreen {
background-color:#b8c419;
color:#fff;
}
.map_object.map_iconcolorcust_sensb,
.map_object.map_iconcolorcust_hasblue,
.map_iconcolorcust_sensb,
.map_iconcolorcust_hasblue {
background-color:#b8c419;
color:#fff;
}
.map_object.map_iconcolorcust_hasorange {
background-color: #FED78C;
}
.map_object.map_iconcolorcust_hasyellow {
background-color: #F8FBC5;
}
.map_iconcolorcust_hasred,
.map_iconcolorcust_haspartialred,
.map_iconcolorcust_hasredok {
background-color: #FFCCCC !important;
}
}}}
I've also tried:
.map_iconcolorcust_hasblack,
.map_iconcolorcust_sensx {
background-color:#878787;
color:#fff;
}
.map_iconcolorcust_hasgreen,
.map_iconcolorcust_sensg {
background-color:#b8c419;
color:#fff;
}
.map_iconcolorcust_hasblue,
.map_iconcolorcust_sensb {
background-color:#b8c419;
color:#fff;
}
.map_iconcolorcust_hasblue *,
.map_iconcolorcust_sensb * {
color:#fff;
}
.map_iconcolorcust_hasorange,
.map_iconcolorcust_sensp {
background-color:#f59c00;
color:#fff;
}
.map_iconcolorcust_hasyellow,
.map_iconcolorcust_sensy {
background-color:#f5c500;
color:#fff;
}
.map_iconcolorcust_hasred,
.map_iconcolorcust_haspartialred,
.map_iconcolorcust_sensr {
background-color:#e30613;
color:#fff;
}
.map_iconcolorcust_hasack,
.map_iconcolorcust_senso {
background-color:#b8c419;
color:#fff;
}
If I change the prefix back to 'map_iconcolor_' it works like the original, so I'm pretty sure it's an issue with my CSS.
Add comment