Widget et nom de valeur

[Asfalt]

Bonjour,
Depuis quelques jours le visuel de mes widgets a été modifiés, mais je ne sais pas comment le remettre.
C’est tout bete, le nom de valeur était affiché au dessus de la led, et maintenant tout est décalé.
Pourriez vous m’aider a savoir ce que je dois modifier dans le fichier html du widget ?

<div style="margin:0px; padding:0px; width:85px; height: 40px;" class="cmd #history# container-fluid tooltips cmd-widget netatmodisplay" data-type="info" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-subtype="other" data-cmd_id="#id#"   data-cmd_uid="#uid#">

<!--
Maj: 28 04 2020 14:13:13

Tarlak :
Version  0.1 :

Avec l'aide de Domotech pour l'amélioration css, grand merci a lui : http://youtube.com/domotech
** Paramètres option du widget

blink : si valeur à 1 alors la pastille rouge ne clignotera plus
-->

  <div class="led#id#">

  </div>
  <div class="NomCmd #hide_name#">#name_display#</div>


<style>
  :root {
    --couleuractualisee#id#: #838383;
    --rouge: #da3037;
    --vert: #30b455;
    --gris: #838383;
    --noir: #000000;
    --blanc: #ffffff;
    --offset: -8px;
    --element-size: 8px;

  }

  @keyframes glowing {
    0% {
      box-shadow: 0 0 -10px var(--blanc);
    }

    40% {
      box-shadow: 0 0 20px var(--blanc);
    }

    60% {
      box-shadow: 0 0 20px var(--blanc);
    }

    100% {
      box-shadow: 0 0 -10px var(--blanc);
    }
  }

  @-webkit-keyframes blinker {
    from {
      opacity: 1.0;
    }

    to {
      opacity: 0.0;
    }
  }

  .led#id# {
    position: relative;
    margin: 1em auto;
    width: var(--element-size);
    height: var(--element-size);
    border-radius: 50%;
    color: #fff;
    background: var(--couleuractualisee#id#);
    line-height: var(--element-size);
    border: 3px solid var(--couleuractualisee#id#);
    text-align: center;
  }

  .led#id#:after {
    content: '';
    position: absolute;
    top: var(--offset);
    bottom: var(--offset);
    left: var(--offset);
    right: var(--offset);
    border-radius: 50%;
    border: 2px solid var(--couleuractualisee#id#);
  }

  div.NomCmd {
    font-size: 1em;
    font-weight: bold;
    position: absolute;
    vertical-align: bottom;
    top: 65%;
    left: 0%;
    z-index: 2;
    padding: 0px;
    margin: 0px;
    width: 85px;
    height: 25px;
    text-align: center;
  }
</style>
<script>
  jeedom.cmd.update['#id#'] = function(_options) {
    var cmd = $('.cmd[data-cmd_id=#id#]');
    var blink#id# = ('#blink#'   !='#'+'blink#') ?   parseInt("#blink#")  :0;

    // Récupération des valeurs
    var valeur = _options.display_value;

    if (valeur == 0) {
      document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--rouge');
      if (blink#id#==0)
      {
        cmd.find('.led#id#').css('animation', 'blinker 0.8s linear infinite');
      }
    } else if (valeur == 1) {
      document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--vert');
      cmd.find('.led#id#').css('animation', 'none');
    }
    $('.cmd[data-cmd_id=#id#]').attr('title', 'Valeur du ' + _options.valueDate + ', collectée le ' + _options.collectDate);
  }
  jeedom.cmd.update['#id#']({
    display_value: '#state#',
    valueDate: '#valueDate#',
    collectDate: '#collectDate#',
    alertLevel: '#alertLevel#'
  });
</script>
</div>

[Furaxworld]

A tester

<div style="margin:0px; padding:0px; width:85px; height: 80px;" class="cmd #history# container-fluid tooltips cmd-widget netatmodisplay" data-type="info" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-subtype="other" data-cmd_id="#id#"   data-cmd_uid="#uid#">

<!--
Maj: 28 04 2020 14:13:13

Tarlak :
Version  0.1 :

Avec l'aide de Domotech pour l'amélioration css, grand merci a lui : http://youtube.com/domotech
** Paramètres option du widget

blink : si valeur à 1 alors la pastille rouge ne clignotera plus
-->

  <div class="led#id#">

  </div>
  <div class="NomCmd #hide_name#">#name_display#</div>


<style>
  :root {
    --couleuractualisee#id#: #838383;
    --rouge: #da3037;
    --vert: #30b455;
    --gris: #838383;
    --noir: #000000;
    --blanc: #ffffff;
    --offset: -8px;
    --element-size: 8px;

  }

  @keyframes glowing {
    0% {
      box-shadow: 0 0 -10px var(--blanc);
    }

    40% {
      box-shadow: 0 0 20px var(--blanc);
    }

    60% {
      box-shadow: 0 0 20px var(--blanc);
    }

    100% {
      box-shadow: 0 0 -10px var(--blanc);
    }
  }

  @-webkit-keyframes blinker {
    from {
      opacity: 1.0;
    }

    to {
      opacity: 0.0;
    }
  }

  .led#id# {
    top: 25px;
    position: relative;
    margin: 1em auto;
    width: var(--element-size);
    height: var(--element-size);
    border-radius: 50%;
    color: #fff;
    background: var(--couleuractualisee#id#);
    line-height: var(--element-size);
    border: 3px solid var(--couleuractualisee#id#);
    text-align: center;
  }

  .led#id#:after {
    content: '';
    position: absolute;
    top: var(--offset);
    bottom: var(--offset);
    left: var(--offset);
    right: var(--offset);
    border-radius: 50%;
    border: 2px solid var(--couleuractualisee#id#);
  }

div.NomCmd {
    font-size: 1em;
    font-weight: bold;
    position: absolute;
    vertical-align: bottom;
}
</style>
<script>
  jeedom.cmd.update['#id#'] = function(_options) {
    var cmd = $('.cmd[data-cmd_id=#id#]');
    var blink#id# = ('#blink#'   !='#'+'blink#') ?   parseInt("#blink#")  :0;

    // Récupération des valeurs
    var valeur = _options.display_value;

    if (valeur == 0) {
      document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--rouge');
      if (blink#id#==0)
      {
        cmd.find('.led#id#').css('animation', 'blinker 0.8s linear infinite');
      }
    } else if (valeur == 1) {
      document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--vert');
      cmd.find('.led#id#').css('animation', 'none');
    }
    $('.cmd[data-cmd_id=#id#]').attr('title', 'Valeur du ' + _options.valueDate + ', collectée le ' + _options.collectDate);
  }
  jeedom.cmd.update['#id#']({
    display_value: '#state#',
    valueDate: '#valueDate#',
    collectDate: '#collectDate#',
    alertLevel: '#alertLevel#'
  });
</script>
</div>

[Asfalt]

Merci pour la réponse.
Ca a bougé mais pas encore cela !

[Furaxworld]

réglages → système → configuration → cache

[Asfalt]

Super, c’était le cache !!! Un grand merci !
Est-il possible de modifier l’écart entre le nom et l’icone ?

[Furaxworld]

15 px au lieu de 25px

  .led#id# {
    top: 15px;

<div style="margin:0px; padding:0px; width:85px; height: 80px;" class="cmd #history# container-fluid tooltips cmd-widget netatmodisplay" data-type="info" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-subtype="other" data-cmd_id="#id#"   data-cmd_uid="#uid#">

<!--
Maj: 28 04 2020 14:13:13

Tarlak :
Version  0.1 :

Avec l'aide de Domotech pour l'amélioration css, grand merci a lui : http://youtube.com/domotech
** Paramètres option du widget

blink : si valeur à 1 alors la pastille rouge ne clignotera plus
-->

  <div class="led#id#">

  </div>
  <div class="NomCmd #hide_name#">#name_display#</div>


<style>
  :root {
    --couleuractualisee#id#: #838383;
    --rouge: #da3037;
    --vert: #30b455;
    --gris: #838383;
    --noir: #000000;
    --blanc: #ffffff;
    --offset: -8px;
    --element-size: 8px;

  }

  @keyframes glowing {
    0% {
      box-shadow: 0 0 -10px var(--blanc);
    }

    40% {
      box-shadow: 0 0 20px var(--blanc);
    }

    60% {
      box-shadow: 0 0 20px var(--blanc);
    }

    100% {
      box-shadow: 0 0 -10px var(--blanc);
    }
  }

  @-webkit-keyframes blinker {
    from {
      opacity: 1.0;
    }

    to {
      opacity: 0.0;
    }
  }

  .led#id# {
    top: 15px;
    position: relative;
    margin: 1em auto;
    width: var(--element-size);
    height: var(--element-size);
    border-radius: 50%;
    color: #fff;
    background: var(--couleuractualisee#id#);
    line-height: var(--element-size);
    border: 3px solid var(--couleuractualisee#id#);
    text-align: center;
  }

  .led#id#:after {
    content: '';
    position: absolute;
    top: var(--offset);
    bottom: var(--offset);
    left: var(--offset);
    right: var(--offset);
    border-radius: 50%;
    border: 2px solid var(--couleuractualisee#id#);
  }

div.NomCmd {
    font-size: 1em;
    font-weight: bold;
    position: absolute;
    vertical-align: bottom;
}
</style>
<script>
  jeedom.cmd.update['#id#'] = function(_options) {
    var cmd = $('.cmd[data-cmd_id=#id#]');
    var blink#id# = ('#blink#'   !='#'+'blink#') ?   parseInt("#blink#")  :0;

    // Récupération des valeurs
    var valeur = _options.display_value;

    if (valeur == 0) {
      document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--rouge');
      if (blink#id#==0)
      {
        cmd.find('.led#id#').css('animation', 'blinker 0.8s linear infinite');
      }
    } else if (valeur == 1) {
      document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--vert');
      cmd.find('.led#id#').css('animation', 'none');
    }
    $('.cmd[data-cmd_id=#id#]').attr('title', 'Valeur du ' + _options.valueDate + ', collectée le ' + _options.collectDate);
  }
  jeedom.cmd.update['#id#']({
    display_value: '#state#',
    valueDate: '#valueDate#',
    collectDate: '#collectDate#',
    alertLevel: '#alertLevel#'
  });
</script>
</div>

[Asfalt]

Merveilleux, merci beaucoup pour votre aide !