Changement de police dans les tableaux CSS ou Widget?

TiTom_59 · Avril 27, 2020, 10:18

Salut,
j’ai besoin de l’avis d’expert en widget.
Je suis en train d’avancer dans mon design mais il s’avère que le police d’écriture de base sur jeedom ne me convient que moyennement, visuellement cela ne me colle pas.

Je souhaiterais par exemple reprendre les bases du widget core « line » ou « tile » mais avec la possibilité d’y changer la police, je pense que c’est possible mais je ne sais pas ecrire le CSS.
Ou alors peut-etre faut-il tout simplement y rentrer ses style css dans le tableau car en effet la plupart de mes widget ont une disposition de tableau.
voir exemple cidessous avec la capture, je veux garder la forme juste changer le Font.
Annotation 2020-04-27 120919
Merci par avance.

mich0111 · Avril 27, 2020, 11:33

Salut,
As-tu essayé les propriétés CSS font ou font-family dans les propriétés générales CSS de tes tableaux ?

TiTom_59 · Avril 27, 2020, 11:36

Du coup faut-il que la police soit dispo dans jeedom? car la je voudrai roboto par exemple.

En faite j’y arrive par exemple avec la police calibri.
y a til une liste de police dispo sans faire appel a des ressources exterieur?

mich0111 · Avril 27, 2020, 11:41

Elle fait partie des standards des navigateurs celle-là ?

TiTom_59 · Avril 27, 2020, 11:45

Ah ça doit être pour ça que j’arrive a l’appeler.
Car roboto c’est une Font google.

Salvialf · Avril 27, 2020, 11:50

Salut,

Roboto est déjà la police utilisée par jeedom

github.com

jeedom/core/blob/alpha/desktop/css/desktop.main.css

/*/*
Theme Core 2021 @Jeedom
Desktop
*/

/* ______Commons */
  ::-webkit-scrollbar {
    width:10px;
    height:10px;
  }
  ::-webkit-scrollbar-track-piece {
    background-color: transparent !important;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--linkHover-color) !important;
  }

  html {
    height: 100%;
  }

This file has been truncated. show original

TiTom_59 · Avril 27, 2020, 11:51

Bon en fait ca ne me convient pas non plus car dans la case générale css car en effet cela applique la meme chose sur le nom de la commande la valeur et l’unité.
Je vais de voir passer par un widget je pense.

@Salvialf toi qui est expert dans le widget, penses tu qu’il serait possible de garder le widget de base par exemple line est d’integrer des styles pour la police?

TiTom_59 · Avril 27, 2020, 11:52

ah bah en effet je souhaite juste jouer avec les lighter bold etc alors.

mich0111 · Avril 27, 2020, 11:53

Si tu veux utiliser des polices différentes dans les cases, il va falloir que tu les appliques à chaque case

TiTom_59 · Avril 27, 2020, 11:54

bah pour le coup c’est même pas pour différente cases, c’est entre le nom de la cmd la valeur et l’unit.
je pense que le widget s’impose pour ca!

De façon à pouvoir choisir le style pour le nom de la cmd par exemple: font-family: roboto; font-weight: bold. puis valeur font-family: roboto; font-weight: 100 et unit font-family: roboto; font-weight: bold

Salvialf · Avril 27, 2020, 11:57

C’est bon les enfants sont à la sieste j’ai réintégré le PC

En fait tu ne veux pas que la valeur soit en gras sur le widget core « line » c’est ça ?

TiTom_59 · Avril 27, 2020, 11:58

Oui par exemple ou l’inverse. je sais pas ce qui conviendrais le mieux pour mon design. ou peut-etre une font-size superieur sur la valeur

Je suis difficile ahahah

Salvialf · Avril 27, 2020, 12:06

Alors plusieurs exemples pour que tu puisses adapter:

Le mieux est effectivement de reprendre le code du widget core « line » dans un widget code perso.

github.com

jeedom/core/blob/alpha/core/template/dashboard/cmd.info.numeric.line.html

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="line" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <div class="content-xs">
    <span class="cmdName #hide_name#">#name_display# </span> <strong class="state"></strong>
  </div>
  <template></template>
  <script>
    jeedom.cmd.update['#id#'] = function(_options) {
      var cmd = $('.cmd[data-cmd_id=#id#]')
      cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate)
      cmd.find('.state').empty().append(_options.display_value+' '+_options.unit);
      if(_options.alertLevel){
        if(_options.alertLevel == 'warning'){
          cmd.find('.content-xs').addClass('label label-warning')
          cmd.attr('data-alertlevel','warning');
        }else if(_options.alertLevel == 'danger'){
          cmd.find('.content-xs').addClass('label label-danger')
          cmd.attr('data-alertlevel','danger');
        }else{
          cmd.find('.content-xs').removeClass('label label-warning label-danger')
          cmd.attr('data-alertlevel','none');

This file has been truncated. show original

Tout se passe sur cette ligne:

<span class="cmdName #hide_name#">#name_display# </span> <strong class="state"></strong> #unite#

C’est la balise <strong> xxxxx </strong> qui met la valeur en gras.

Du coup tu peux remplacer le <strong> par un <span> (ce qui n’est pas plus mal), ce qui donne:

<span class="cmdName #hide_name#">#name_display# </span> <span class="state"></span> #unite#

A l’inverse si tu veux tout passer en gras, tu peux essayer sous cette forme:

<strong><span class="cmdName #hide_name#">#name_display# </span> <span class="state"></span> #unite#</strong>

Pour changer la taille du texte tu ajoutes un attribut style:

<strong><span class="cmdName #hide_name#">#name_display# </span> <span class="state" style="font-size:16px!important;"></span> #unite#</strong>

J’espère que ça pourra t’aider et que je n’ai pas fait d’erreur car je n’ai rien testé.

TiTom_59 · Avril 27, 2020, 12:10

OK je vais tester tous ca quand je serais devant le PC merci beaucoup tu geres

TiTom_59 · Avril 27, 2020, 12:26

Génial ça marche au top il me suffisais juste de savoir ou entrer les styles et la je peux faire tout ce que je veux c’est super. Encore merci je peux même y changer la couleur etc…

Salvialf · Avril 27, 2020, 12:29

Cool !! Si c’est bon pour toi n’hésites pas à sélectionner le message au-dessus comme solution

TiTom_59 · Avril 27, 2020, 12:48

Dernière chose @Salvialf après je ne t’embête plus comment puis ajouter egalement un attribut style a #unit# ?

Salvialf · Avril 27, 2020, 12:50

Tu ne m’embêtes pas.

Il faut le coller dans une balise:

<span class="cmdName #hide_name#">#name_display# </span> <span class="state" style="font-size:16px!important;"></span> <span style="font-size:16px!important;">#unite#<span>

system · Avril 28, 2020, 12:50

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