Augmenter la font-size d'un seul élément (badge)

[Tony_Bigdream]

Bonjour,
Je souhaite simplement augmenter la taille d’un des élément type badge sur mon dashboard, de ce que j’ai pu lire y a rien de simple pour effectuer cela quel dommage Je suis obligé d’apprendre le CSS ? Je souhaiterai juste agrandire un peu la valeur « puissance actuelle » ci dessous:

J’ai fouillé dans l’onglet « affichage » de la commande mais la taille de la font n’est pas un paramètre optionnel disponible :

[Furaxworld]

Salut,
Rechercher l’ID de ce badge avec l’outil de développement.
Mettre ceci avec VOTRE ID dans custom.css

[data-cmd_id= "8699"] .value {
    font-size: 30px
}

[Tony_Bigdream]

Merci @Furaxworld je vais essayer cela , dommage qu’il n’y ait pas une méthode plus simple pour un réglage aussi basique que la taille d’un texte

EDIT: Ca fonctionne très bien ! Par contre le « nom » de la commande ne prend pas en compte la taille du texte et la valeur se superpose au nom.

Faut-il que je rajoute un « margin » ou un « border » sur ma valeur en css pour résoudre cela ? J’ai essayé sans succès :

Si je retire l’affichage du « nom » ce n’est pas propre non plus :

EDIT 2 : Padding fonctionne pour le deuxième cas sans le nom affiché. Je cherche encore pour le 1er cas.

EDIT 3 : Je vais passer par la création de widget, cependant si quelqu’un à la réponse je laisse le sujet ouvert quelques temps

[jpty]

Bonsoir,
En plus du font-size, il faut changer le line-height qui est à 12px.

[Tony_Bigdream]

Merci pour l’astuce !

[jpty]

J’utilise un widget dérivé de celui du core. J’y ai ajouté 2 params optionnels precision et fontsize

Mon widget cmd.info.numeric.jptyBadge.html

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="badge" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="min-width:40px">
  <div class="title #hide_name#">
    <div  class="cmdName">#name_display#</div>
  </div>
  <div class="content" style="min-height: 20px">
    <div class="label label-info state" style="line-height:14px"><span class="value"></span> <span class="unit"></span></div>
  </div>
  <div class="timeCmd label label-default #history#" data-type="info"></div>
  <div class="cmdStats #hide_history#">
    <span title="{{Minimum}}" class="tooltips">#minHistoryValue#</span>|<span title="{{Moyenne}}" class="tooltips">#averageHistoryValue#</span>|<span title="{{Maximum}}" class="tooltips">#maxHistoryValue#</span> <i class="#tendance#"></i>
  </div>
  <template>
    <div>color: rgb(20,20,20) ({{Couleur de fond}})</div>
    <div>fontcolor: rgb(20,20,20) ({{Couleur du texte}})</div>
    <div>fontsize: 12px ({{Taille du texte de la valeur}})</div>
    <div>time: duration|date ({{Affiche durée ou date de la valeur}})</div>
    <div>precision: 1 ({{Nombre de décimales. Défaut pas d'arrondi}})</div>
  </template>
  <script>
    jeedom.cmd.addUpdateFunction('#id#', function(_options) {
      if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
        cmd.querySelector('.content').setAttribute('title', '{{Date de valeur}}: ' + _options.valueDate + '<br>{{Date de collecte}}: ' + _options.collectDate)
        if ('#time#' == 'duration' || '#time#' == 'date') {
          jeedom.cmd.displayDuration(_options.valueDate, cmd.querySelector('.timeCmd'), '#time#')
        }

        if (is_numeric(_options.value)) {
          if (domUtils.issetWidgetOptParam('#precision#', 'precision')) {
            let precision = Math.abs(parseInt('#precision#'));
            cmd.querySelector('.value').innerHTML = Intl.NumberFormat(undefined,{minimumFractionDigits: precision,maximumFractionDigits: precision}).format(_options.display_value);
          }
          else cmd.querySelector('.value').innerHTML = Intl.NumberFormat().format(_options.display_value);
          cmd.querySelector('.unit').innerHTML = _options.unit;
        } else {
          cmd.querySelector('.value').innerHTML = '<span class="label label-danger">' + _options.value + '</span>'
        }

        if (_options.alertLevel == 'warning') {
          cmd.querySelector('.value').innerHTML = '<span class="label label-warning"><i class="fas fa-bell"></i> ' + _options.value + '</span>'
        } else if (_options.alertLevel == 'danger') {
          cmd.querySelector('.value').innerHTML = '<span class="label label-danger"><i class="fas fa-exclamation"></i> ' + _options.value + '</span>'
        }
      }
    })

    jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])

    if (domUtils.issetWidgetOptParam('#color#', 'color')) {
      document.querySelector('.cmd[data-cmd_uid="#uid#"] .label').style.setProperty('background-color', '#color#', 'important')
    }
    if (domUtils.issetWidgetOptParam('#fontcolor#', 'fontcolor')) {
      document.querySelector('.cmd[data-cmd_uid="#uid#"] .label').style.setProperty('color', '#fontcolor#', 'important')
    }
    if (domUtils.issetWidgetOptParam('#fontsize#', 'fontsize')) {
      document.querySelector('.cmd[data-cmd_uid="#uid#"] .value').style.setProperty('font-size', '#fontsize#', 'important')
      document.querySelector('.cmd[data-cmd_uid="#uid#"] .value').style.setProperty('line-height', '#fontsize#', 'important')
    }
  </script>
</div>

Fichier à placer dans data/customTemplates/dashboard

[jpty]

J’ai modifié le code du widget ci-dessus pour avoir le séparateur décimal et les séparateurs des milliers suivant la langue du navigateur.
Ça donne pour le navigateur en french / german / english
/ /
Les valeurs ne sont modifiées qu’à l’affichage.