Text over background

[Fahd]

Hi, 

I just started learning the CSS and I'm using this class to change the look of the background of a value 

.item-bgm {
  padding: 40px;
  border-radius: 200px;
  background: repeating-radial-gradient(#2babec, transparent 150px);
  display:block;
  width:3.5px;
  height:3.5px;
  line-height:22px;
  border: 2px solid #f5f5f5;
  border-radius: 50%;
  box-shadow: 0 0 3px gray;
  font-weight:bold;
  align-items: flex-end;
  justify-content: center;
  display: flex;
}

Whatever I write over that background it will display below it, please see attached

[admin]

Try adding z-index: 1 !important; to .item-bgm styles.

[Fahd]

Try adding z-index: 1 !important; to .item-bgm styles.

It works, thanks a lot, 

I'm changing the background color of the .item-bgm style with this JS 

Code:

1234567891011121314151617181920212223

$(function() {   $('.item-bgm').each(function(_, el) {     var addr = $(el).data('object');     if (addr) {       grp.listen(addr, function(obj) {         var value = obj.value           , background = 'repeating-radial-gradient(red, transparent 150px)'; // default color         if (value > 0 && value < 20 ) {           background = 'repeating-radial-gradient(#0CAFFF, transparent 150px)';         }         else if (value >= 20 && value <= 23) {           background = 'repeating-radial-gradient(#1DB954, transparent 150px)';         }         else if (value > 23 && value < 99) {           background = 'repeating-radial-gradient(#7C0A02, transparent 150px)';         }         $(el).css('background', background);       });     }   }); });

I want to know if it is possible to change the border color of the css style depending on the mode of the thermostat,
Heating Value - 1byte object 
Cooling Value - 1byte object 
If heating > 0 then
border: 2px solid red
else if
cooling > 0 then 
border: 2px solid blue 
else if cooling == 0 and heating == 0 then 
border: 2px solid white

---

Try adding z-index: 1 !important; to .item-bgm styles.

It works, thanks a lot, 

I'm changing the background color of the .item-bgm style with this JS 

Code:

1234567891011121314151617181920212223

$(function() {   $('.item-bgm').each(function(_, el) {     var addr = $(el).data('object');     if (addr) {       grp.listen(addr, function(obj) {         var value = obj.value           , background = 'repeating-radial-gradient(red, transparent 150px)'; // default color         if (value > 0 && value < 20 ) {           background = 'repeating-radial-gradient(#0CAFFF, transparent 150px)';         }         else if (value >= 20 && value <= 23) {           background = 'repeating-radial-gradient(#1DB954, transparent 150px)';         }         else if (value > 23 && value < 99) {           background = 'repeating-radial-gradient(#7C0A02, transparent 150px)';         }         $(el).css('background', background);       });     }   }); });

I want to know if it is possible to change the border color of the css style depending on the mode of the thermostat,
Heating Value - 1byte object 
Cooling Value - 1byte object 
If heating > 0 then
border: 2px solid red
else if
cooling > 0 then 
border: 2px solid blue 
else if cooling == 0 and heating == 0 then 
border: 2px solid white

When I click on the temp it will display a widget.
The heating and cooing values are on the widget

[admin]

Single function can be used if setpoint / heating / cooling addresses have a common scheme where heating / cooling address can be calculated from the setpoint address. Otherwise you will need multiple grp.listen functions where you have to manually specify listening addresses for heating / cooling and the relevant elements to which to apply the styles.

[Fahd]

Single function can be used if setpoint / heating / cooling addresses have a common scheme where heating / cooling address can be calculated from the setpoint address. Otherwise you will need multiple grp.listen functions where you have to manually specify listening addresses for heating / cooling and the relevant elements to which to apply the styles.

Yes, they have the same scheme, 
The temp is 17/0/x  
Heating value is 18/1/x  
Cooling value is 18/3/x
( x is the office number)

[admin]

Try this:

Code:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

$(function() {   $('.item-bgm').each(function(_, el) {     var addr = $(el).data('object');     if (addr) {       grp.listen(addr, function(obj) {         var value = obj.value           , background = 'repeating-radial-gradient(red, transparent 150px)'; // default color         if (value > 0 && value < 20 ) {           background = 'repeating-radial-gradient(#0CAFFF, transparent 150px)';         }         else if (value >= 20 && value <= 23) {           background = 'repeating-radial-gradient(#1DB954, transparent 150px)';         }         else if (value > 23 && value < 99) {           background = 'repeating-radial-gradient(#7C0A02, transparent 150px)';         }         $(el).css('background', background);       });              var heataddr = addr.replace('17/0/', '18/1/'),           cooladdr = addr.replace('17/0/', '18/3/'),           heatstat, coolstat;              function updatestat() {         var color;                  if (heatstat) {           color = 'red';         }         else if (coolstat) {           color = 'blue';         }         else {           color = 'white';         }                  $(el).css('border', '2px solid ' + color);           }              grp.listen(heataddr, function(obj) {         heatstat = obj.value > 0;         updatestat();       }, true);       grp.listen(cooladdr, function(obj) {         coolstat = obj.value > 0;         updatestat();       }, true);     }   }); });

[Fahd]

Try this:

Code:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

$(function() {   $('.item-bgm').each(function(_, el) {     var addr = $(el).data('object');     if (addr) {       grp.listen(addr, function(obj) {         var value = obj.value           , background = 'repeating-radial-gradient(red, transparent 150px)'; // default color         if (value > 0 && value < 20 ) {           background = 'repeating-radial-gradient(#0CAFFF, transparent 150px)';         }         else if (value >= 20 && value <= 23) {           background = 'repeating-radial-gradient(#1DB954, transparent 150px)';         }         else if (value > 23 && value < 99) {           background = 'repeating-radial-gradient(#7C0A02, transparent 150px)';         }         $(el).css('background', background);       });             var heataddr = addr.replace('17/0/', '18/1/'),           cooladdr = addr.replace('17/0/', '18/3/'),           heatstat, coolstat;             function updatestat() {         var color;                 if (heatstat) {           color = 'red';         }         else if (coolstat) {           color = 'blue';         }         else {           color = 'white';         }                 $(el).css('border', '2px solid ' + color);          }             grp.listen(heataddr, function(obj) {         heatstat = obj.value > 0;         updatestat();       }, true);       grp.listen(cooladdr, function(obj) {         coolstat = obj.value > 0;         updatestat();       }, true);     }   }); });

It works.
Your support is gratifying, thank you for your support