Modifier la couleur du texte dans une tuile

testé marche po, je suis en train de chercher la class avec F12

Bon allez, la nuit porte conseil.
Bonne nuit et à demain

ouais idem parce que je trouve pas la class, ça me gonfle :smiley:
Bonne nuit

Bon en fait j’ai continué :smiley:
je suis pas du tout un pro des CSS, mais dans la console de CHrome, voilà ce que je trouve

La couleur des fonds des badges est définie par :

Inhérited from html,
color.css

–al-info-color

Par contre, je trouve pas pour le texte dans le badge

Voilà, je sais pas bien quoi faire de tout ca :smiley:

Salut,

Vous vous égarez sur l’autre post… énormément de choses sont réalisables avec Jeedom de diverses manières.

Par exemple pour ton widget badge, rien en t’empêche de te créer un widget perso sur la même base en modifiant ce qui te gène:

Widget badge core:

Tu enlèves label label-info ici:

<div class="content-sm ">
    <span class='label label-info state'></span>
  </div>

<div class="content-sm ">
    <span class='state'></span>
  </div>

on ajoute la classe value pour avoir en gras:

<div class="content-sm ">
    <span class='value state'></span>
  </div>

Et tu mets le code dans un widget code du menu outils/widgets

Problème résolu :sunglasses: !

Je n’ai vraiment pas le temps de tester immédiatement mais dans l’absolu modifier les classes label label-info en perso CSS avancée doit fonctionner aussi, dans l’idée:

.label, .label-info {
background-color: white!important;
color:black!important;
}

PS: Lire un cours en ligne sur le CSS c’est rapide et très instructif :nerd_face: :grin:

Merci pour les infos. Je savais même pas où trouver le code du badge actuellement. Concernant la dernière phrase, tu te doute bien que je suis passé par cette étape, puisque j’en suis à mon 3ème jour sur le problème :smiley:

Mais le CSS étant vraiment quelque chose de compliqué quand on connait pas (et pourtant je gère quelques codes comme le bash, php, html, etc), c’est pas aussi facile que cela peut te paraître :wink:

Merci encore, je test ce soir :wink:

Le changement de couleur de fond fonctionne, mais pas celui du texte. Par contre, evidement, ca me change tous les badges, donc pas trop adapté pour moi.

Alors avec ceci, cela passe bien le texte en gras, par contre la police d’écriture est noire, et y a plus de fond ^^ Et je vois pas du tout où modifier ces couleurs directement dans le code. C’est d’ailleurs bizarre, car si je ne m’abuse, il charge le template du badge classique, donc je devrais retrouver les mêmes couleurs :confused:

Mais je sens que je brule ^^

Il me semblait avoir compris que tu voulait le fond en blanc avec l’écriture en noir je me trompe ?

Tu peux essayer ce code que tu pourras modifier selon tes besoins:

<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#">
  <div class="title #hide_name#">
    <div  class="cmdName">#name_display#</div>
  </div>
  <div class="content-sm ">
    <span class='perso-label value state'></span>
  </div>
  <div class="cmdStats #hide_history#">
    <div class="col-xs-12 center-block">
      <span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
    </div>
  </div>
  <style>
  .perso-label {
  background-color: white!important;
  color:black!important;
  }
  </style>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
      $('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      $('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value +' #unite#');
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

J’ai ajouté une classe perso-label que tu peux modifier dans cette partie du code:

<style>
  .perso-label {
  background-color: white!important;
  color:black!important;
  }
  </style>

Dans cette configuration il doit être inutile d’ajouter les !important à la fin de chaque ligne mais je les ai laissé pour être certain que ce soit fonctionnel.

Concernant le couleur du texte, si tu es sur un design, il faut vérifier que tu aies bien décoché la case défaut de la ligne couleur du texte dans les paramètres d’affichage (mode Édition->clic droit sur le widget).

Merci.

j’ai retesté ce code là, et pareil, la couleur de fond fonctionne, mais pas celle du texte, elle reste en noir (j’ai mis bleu en fond et blanc en couleur pour tester)

image

En fait je voulais juste mettre la police à l’intérieur du badge en blanc, sans forcément toucher la couleur de fond. C’est la police noire dans le cadre qui rendrait le truc peu lisible

Tu es sur le dashboard ou sur un design ?

design. J’ai essayé en décochant tout dans les parametres du widget, en laissant defaut, etc sans succès

Grrrr t’abuses un peu c’est faisable directement par le core !!! Rien à modifier juste des paramètres à sélectionner correctement:
colTxtDesign

Pour info par défaut les couleurs des textes sont fonctions du thème en cours: thème clair → texte noir | thème sombre → texte clair

Un peu de tuile, de widget, de design, on mélange et personne ne comprend plus rien :smile:

Oui j’avoues c’est un peu le bazar :upside_down_face: ça prouve bien qu’il est possible d’arriver à ses fins de pleins de manières différentes :innocent: :smiley:

J’ai quand même relu le 1er post qui concernait à l’origine des modifications plus profondes que juste la couleur du texte

Lol oui c’est ce que j’ai fais, c’est pour ca que j’ai un texte noir dans la tuile :smiley:

Je suis sur un fond blanc (transparent, mais l’image derrière est blanche, un plan 3D).

Par défaut, les noms des widgets et le texte dans la tuile étaient blancs, donc on voyait pas le nom de la tuile. J’ai passé en noir, sauf que ca change et l’intérieur de la tuile, et le nom de la tuile.

Du coup j’ai le choix : ou je laisse blanc et on voit plus le nom de la tuile, ou je passe en noir et c’est l’intérieur de la tuile qu’on ne voit plus trop car noir dans bleu ^^

illustration :

En blanc
image

En noir
image

Moi je cherche à avoir le texte en noir, et l’intérieur de la tuile en blanc ^^

Pour résumer, je cherche à avoir ce résultat :

image
image

Personnalisation CSS avancée sur le widget badge core (le [data-eqLogic_id] est à personnaliser):

.eqLogic-widget[data-eqlogic_id="7"] span.label.label-info.state {
color:white!important;
}

pour avoir la valeur de eqLogic_id:


Paramètres de la commande → bouton « informations »

https://community.jeedom.com/t/personnalisation-simple-des-tuiles/15641/2?u=salvialf

1 « J'aime »

Au top, ça fonctionne :slight_smile:

Merci beaucoup !

1 « J'aime »

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.