Bouton poussoir simple personnalisé

[benj]

Bonjour,

Peut-être une question bête mais je tourne en rond. Je souhaite pouvoir modifier un bouton tout simple appliquer sur une commande du style « Reboot ». Cela met un bouton rectangulaire par défaut avec le texte Reboot à l’intérieur.

J’aimerais pouvoir recréer ce bouton a ma façon. Du style : une bordure avec coins arrondis rouge, fond transparent et toujours le texte de nom de la commande à l’intérieur.

Merci à vous. Bonne journée !

[iPapy]

Bonjour,

Avec Jeedom 4 tu as l’outils widget qui te permet de faire cela, juste qu’il te faut les images

[benj]

Merci pour votre réponse, hors je n’ai besoin que de code CSS pour faire ce bouton et non d’images. Comment faire dans ce cas?

[nak]

c’est mon premier partage en espérant que ça va tu rendre service
nom de widget bouton Red Nak!

Capture d’écran 2020-10-28 à 02.39.54|162x141

Code

<div style="margin-top:5px;" class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="other" 
     data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" 
     data-eqLogic_id="#eqLogic_id#">
  <div class="content-xs">
    <a class="action" 
       style="border-radius: 2px;
			background: linear-gradient(315deg, #f7c1c1, #f23f3f); color: black!important;
			box-shadow:  -2px -2px 5px #5e5e5e, 
             2px 2px 5px #ffffff;
              margin:5px;line-height:25px; padding : 5px 10px 5px 10px; 
              
              text-align:center;">#name_display#</a>
  </div>
  <script>
    $('.cmd[data-cmd_uid=#uid#]:last .action').off('click').on('click', function () {
      jeedom.cmd.execute({id: '#id#'});
    });
    if ($('.cmd[data-cmd_uid=#uid#]').last().prev().data('subtype') 
        != undefined && $('.cmd[data-cmd_id=#id#]').last().prev().data('subtype') != 'other'
    && $('.cmd[data-cmd_uid=#uid#]').last().prev().css('display') != 'block') {
      $('.cmd[data-cmd_uid=#uid#]').last().prepend('<br/>');
    }
    if("#name#" != '#name_display#'){
      $('.cmd[data-cmd_uid=#uid#]:last .action').attr('title',"#name#")
    }
  </script>
</div>

cordialement

[olive]

[olive]

voilà c’est beaucoup plus beau comme ça
pour les images il te suffit de les glisser sur la fenêtre de rédaction …

[iPapy]

@benj

Merci pour votre réponse, hors je n’ai besoin que de code CSS pour faire ce bouton et non d’images.

Tu prouvera pleins d’exemple sur ce site, bon codage

[benj]

Merci @nak c’est pile ce que je cherchais !!!

[nak]

Merci Olive je ne savait pas faire

[nak]

et encore merci olive ça aussi je ne savais pas le faire