Bonjour,
J’ai ce virtuel:
Coté design cela fait ceci:
Je voudrais la police en blanc donc :
Pb les cercles deviennent blanc :-(. J’ai raté quelque chose ?
Hello,
sans doute le widget qui est dédié a ces commandes.
exact, je vais regarder
J’ai le plugin pipmyjeedom et pour un autre widget que tu as fait il me semble idem, mettre la police en blanc
et je regarde le code et j’ai modifié ceci mais sans succès:
.font-color#id# {
font=color: red;
/* color: var(--txt-color);*/
}
<div class="cmd cmd-widget reportModeHidden #history#" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
Création : @PhpVarious
Date : 22/03/2023
https://community.jeedom.com/t/comment-remonter-etat-dun-toggle-dans-un-virtuel/104185
-->
<div class="tuile#id# align-items-center#id#">
<span class="iconCmd bg-icone#id# rounded-circle#id# execute"></span>
<div class="margin-left#id#">
<div class="d-flex#id# align-items-center#id#">
<div class="margin-bottom#id# h3-#id#" id="titre#id#"></div>
</div>
<p class="font-color#id# margin-bottom#id# state#id#"></p>
</div>
</div>
<template>
<div>widthTuile : Largueur de la tuile [Défaut : 170]</div>
<div>radiusTuile : Arrondi de la tuile [Défaut : 15]</div>
<div>titleTuile : Titre du widget [Défaut : le nom de la commande état]</div>
<div>texteIfOn : Texte affiché si Etat = 1 [Défaut : Allumé | accepte une valeur vide]</div>
<div>texteIfOff : Texte affiché si Etat = 0 [Défaut : Éteint| accepte une valeur vide]</div>
<div>radiusIcone : Arrondi de l'icone [Défaut : 50 (rond)]</div>
<div>darkBackground : couleur de fond en thème Dark [Défaut : rgb(47, 47, 47)]</div>
<div>lightBackground : couleur de fond en thème Light [Défaut : rgb(199 199 199)]</div>
<div>darkBackgroundIcone : couleur de fond de l'icone en thème Dark [Défaut : rgb(69, 70, 72)]</div>
<div>lightBackgroundIcone : couleur de fond de l'icone en thème Light [Défaut : rgb(100, 100, 100)]</div>
<div>colorIconeIfOn : couleur de l'icone si Etat = 1</div>
<div>colorIconeIfOff : couleur de l'icone si Etat = 0</div>
<div>-------------------------------------------------</div>
<div>iconeIfOn : icone à afficher dans le widget si Etat = 1 [ ex : icon jeedomapp-prise ]</div>
<div>iconeIfOff : icone à afficher dans le widget si Etat = 0 [ ex : icon jeedomapp-prise ]</div>
<div>si ces paramètres ne sont pas précisés, le widget affichera l'icône affecté a la commande.</div>
<div>et si il n'y a pas d'icône affecté a la commande, le widget affichera un icone prédéfini en fonction du generic type.</div>
</template>
<script>
var debug#id# = ('#debug#' != '#' + 'debug#' && '#debug#' == 1) ? true : false;
var cmd#id# = $('.cmd[data-cmd_id=#id#]')
var width#id# = is_numeric('#widthTuile#') ? parseFloat('#widthTuile#'):170;
var title#id# = ('#titleTuile#' != '#' + 'titleTuile#') ? "#titleTuile#" : "#name#";
var radiusIcone#id# = is_numeric('#radiusIcone#') ? parseFloat('#radiusIcone#'):50;
var radiusTuile#id# = is_numeric('#radiusTuile#') ? parseFloat('#radiusTuile#'):15;
var darkBackground#id# = ('#darkBackground#' != '#' + 'darkBackground#') ? '#darkBackground#' : 'rgb(47, 47, 47)';
var lightBackground#id# = ('#lightBackground#' != '#' + 'lightBackground#') ? '#lightBackground#' : 'rgb(199 199 199)';
var darkBackgroundIcone#id# = ('#darkBackgroundIcone#' != '#' + 'darkBackgroundIcone#') ? "#darkBackgroundIcone#" : 'rgb(69, 70, 72)';
var lightBackgroundIcone#id# = ('#lightBackgroundIcone#' != '#' + 'lightBackgroundIcone#') ? "#lightBackgroundIcone#" : 'rgb(100, 100, 100)';
var theme#id# = jeedom.widgets.getThemeImg("Light","Dark")
var icone#id# = ('#icone#' != '#' + 'icone#') ? '<i class="#icone#"></i>' : '#name_display#';
var iconeIfOn#id# = ('#iconeIfOn#' != '#' + 'iconeIfOn#') ? '<i class="#iconeIfOn#"></i>' : '#name_display#';
var iconeIfOff#id# = ('#iconeIfOff#' != '#' + 'iconeIfOff#') ? '<i class="#iconeIfOff#"></i>' : '#name_display#';
if ('#colorIconeIfOn#' != '#' + 'colorIconeIfOn#') document.documentElement.style.setProperty('--colorIconeIfOn#id#', '#colorIconeIfOn#');
if ('#colorIconeIfOff#' != '#' + 'colorIconeIfOff#') document.documentElement.style.setProperty('--colorIconeIfOff#id#', '#colorIconeIfOff#');
var texteIfOn#id# = 'Allumé'
var texteIfOff#id# = 'Éteint'
var themeJeedom#id# = "light"
if (document.body.hasAttribute('data-theme')) {
if (document.body.getAttribute('data-theme').endsWith('Dark')) themeJeedom#id# = "dark";
}
else if (isset(jeedom.theme.currentTheme)) {
console.log('jeedom.theme.currentTheme')
if (jeedom.theme.currentTheme.endsWith('Dark')) themeJeedom#id# = "dark";
}
if (debug#id#) console.log('┌─────────────────── Chargement Widget (cmd:#id#) en debug')
if (debug#id#) console.log('| generictype : #generic_type#');
if(iconeIfOn#id#.indexOf('<i ') === -1) {
if (debug#id#) console.log('| icone [on] absent');
if ('#generic_type#'.indexOf('ENERGY_STATE') !== -1) iconeIfOn#id# = '<i class="icon jeedomapp-prise"></i>'
else if ('#generic_type#'.indexOf('THERMOSTAT_STATE') !== -1) iconeIfOn#id# = '<i class="icon jeedom-pilote-conf"></i>'
else if ('#generic_type#'.indexOf('MEDIA_STATE') !== -1) iconeIfOn#id# = '<i class="fas fa-tv"></i>'
else if ('#generic_type#'.indexOf('LOCK_STATE') !== -1) {
iconeIfOn#id# = '<i class="fas fa-lock"></i>'
texteIfOn#id# = 'Ouvert'
texteIfOff#id# = 'Fermé'
}
else if ('#generic_type#'.indexOf('OPENING') !== -1) {
iconeIfOn#id# = '<i class="icon jeedom-porte-ferme"></i>'
texteIfOn#id# = 'Ouverte'
texteIfOff#id# = 'Fermée'
}
else iconeIfOn#id# = '<i class="icon jeedom-lumiere-on"></i>'
}
if(iconeIfOff#id#.indexOf('<i ') === -1) {
if (debug#id#) console.log('| icone [off] absent');
if ('#generic_type#'.indexOf('ENERGY_STATE') !== -1) iconeIfOff#id# = '<i class="icon jeedomapp-prise"></i>'
else if ('#generic_type#'.indexOf('THERMOSTAT_STATE') !== -1) iconeIfOff#id# = '<i class="icon jeedom-pilote-off"></i>'
else if ('#generic_type#'.indexOf('MEDIA_STATE') !== -1) iconeIfOff#id# = '<i class="fas fa-tv"></i>'
else if ('#generic_type#'.indexOf('LOCK_STATE') !== -1) {
iconeIfOff#id# = '<i class="fas fa-lock-open"></i>'
texteIfOn#id# = 'Ouvert'
texteIfOff#id# = 'Fermé'
}
else if ('#generic_type#'.indexOf('OPENING') !== -1) {
iconeIfOff#id# = '<i class="icon jeedom-porte-ouverte"></i>'
texteIfOn#id# = 'Ouverte'
texteIfOff#id# = 'Fermée'
}
else iconeIfOff#id# = '<i class="icon jeedom-lumiere-off "></i>'
}
if (debug#id#) console.log('| icone [on] : ' + iconeIfOn#id#);
if (debug#id#) console.log('| icone [off] : ' + iconeIfOff#id#);
texteIfOn#id# = ('#texteIfOn#' != '#' + 'texteIfOn#') ? "#texteIfOn#" : texteIfOn#id#;
texteIfOff#id# = ('#texteIfOff#' != '#' + 'texteIfOff#') ? "#texteIfOff#" : texteIfOff#id#;
radiusIcone#id# = radiusIcone#id# > 50 ? 50 : radiusIcone#id#;
document.documentElement.style.setProperty('--width#id#', width#id#+'px');
document.documentElement.style.setProperty('--border-radius-icone#id#', radiusIcone#id#+'%');
if (jeedom.widgets.getThemeImg("Light","Dark") == "Light") {
document.documentElement.style.setProperty('--bg-tuile#id#', lightBackground#id#);
document.documentElement.style.setProperty('--bg-icone#id#', lightBackgroundIcone#id#);
}
else {
document.documentElement.style.setProperty('--bg-tuile#id#', darkBackground#id#);
document.documentElement.style.setProperty('--bg-icone#id#', darkBackgroundIcone#id#);
}
document.documentElement.style.setProperty('--border-radius-tuile#id#', radiusTuile#id#+'px');
cmd#id#.find('#titre#id#').empty().append(title#id#)
if (debug#id#) console.log('└───────────────────────────')
jeedom.cmd.update['#id#'] = function(_options){
cmd#id#.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
if (debug#id#) console.log('widget (id:#id#) jeedom.cmd.update [#name#] : _options.display_value = ' + _options.display_value)
if (_options.display_value == '1' || _options.display_value >= 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
cmd#id#.find('.state#id#').empty().append(texteIfOn#id#)
cmd#id#.find('.iconCmd').removeClass('color-off#id#').addClass('color-on#id#')
cmd#id#.find('.iconCmd').empty().append(iconeIfOn#id#)
} else {
cmd#id#.find('.state#id#').empty().append(texteIfOff#id#)
cmd#id#.find('.iconCmd').removeClass('color-on#id#').addClass('color-off#id#')
cmd#id#.find('.iconCmd').empty().append(iconeIfOff#id#)
}
if (themeJeedom#id# == 'light') changeTheme#id#()
else changeTheme#id#('Dark')
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate: '#valueDate#', collectDate: '#collectDate#'});
$('body').on('changeThemeEvent', function (event, theme) {
if (debug#id#) console.log('body on changeThemeEvent : ' + theme)
if (theme.endsWith('Dark')) changeTheme#id#('Dark')
else changeTheme#id#()
})
/* Changement Thème */
function changeTheme#id#(theme='Light'){
if (theme == 'Light')
{
if (debug#id#) console.log('widget (id:#id#) : Passage en Light')
document.documentElement.style.setProperty('--bg-tuile#id#', lightBackground#id#);
document.documentElement.style.setProperty('--bg-icone#id#', lightBackgroundIcone#id#);
}
else
{
if (debug#id#) console.log('widget (id:#id#) : Passage en Dark')
document.documentElement.style.setProperty('--bg-tuile#id#', darkBackground#id#);
document.documentElement.style.setProperty('--bg-icone#id#', darkBackgroundIcone#id#);
}
}
</script>
<style>
:root {
--width#id#: 170px;
--bg-icone#id#: var(--btn-default-color);
--border-radius-icone#id# : 50%;
--border-radius-tuile#id# : 15px;
--bg-tuile#id#: var(--form-bg-color);
--colorIconeIfOn#id# : var(--lb-yellow-color);
--colorIconeIfOff#id# : var(--sc-lightTxt-color);
}
.tuile#id# {
background-color: var(--bg-tuile#id#);
padding: 10px;
border-radius: var(--border-radius-tuile#id#);
margin-bottom: 0;
display: flex;
width: var(--width#id#);
min-width: 150px;
}
.rounded-circle#id# {
border-radius: var(--border-radius-icone#id#);
width: 50px;
height: 50px;
text-align: center;
}
.bg-icone#id# {
background-color: var(--bg-icone#id#);
}
.tuile#id# i:first-child {
line-height: 50px;
font-size: 24px;
/* color: var(--sc-lightTxt-color);*/
}
.margin-left#id# {
margin-left: 10px;
}
.align-items-center#id# {
align-items: center;
}
.d-flex#id# {
display: flex;
}
.margin-bottom#id# {
margin-bottom: 0;
text-align: left;
}
.h3-#id# {
font-size: 18px;
margin-top: 0;
line-height: 18px;
color: var(--link-color);
}
.font-color#id# {
font=color: red;
/* color: var(--txt-color);*/
}
.color-on#id# i {
color: var(--colorIconeIfOn#id#);
}
.color-off#id# i {
color: var(--colorIconeIfOff#id#);
}
</style>
</div>
Hello,
Ta modif nest pas bonne, test ceci :
.font-color#id# {
color: red;
}
Helloo,
Moi, à ta place, je demanderai à l’auteur du widget de l’ajouter en paramètre 
1 « J'aime »
j’ai testé sans succès meme en vidant le cache.
J’adore la proposition de @noodom , hein @Phpvarious 
Bizarre. Tu peux tester ça :
.font-color#id# {
color: red!important;
}
J’y ai bien pensé mais jai préfèré rester simple et utiliser les couleur du core, ce qui permet de basculer de thème sans compliquer le code. J’ai prévu de revoir mes widgets en les rendant compatible que 4.4. Ce qui permettra de rendre plus personnalisable sans code a rallonge…
bonne idée mais toujours pas :=(