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:

$(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:

$(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:

$(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:

$(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