[S'inspirer] Postez vos Customisations (Javascipt / CSS)

[fcna]

Bonjour,

Je voudrais modifier toute la police. C'est possible, je n'y arrive pas.

Merci d'avance

[Sartog]

dans le bloc css

Code : Tout sélectionner

body{
	font: xxxx !important;
}

ou

Code : Tout sélectionner

body{
	font-family: xxxx !important;
}

Exemple :
font: 300 14px/1.5em Lato !important;
ou
font-family: Lato !important;


Si ta police n'est pas déjà intégrée dans Jeedom, il te faudra la charger en amont

[fcna]

Merci ca marche bien

[winhex]

pour personnaliser les scénario dans un design (peu d'évolution pour cette fonction)

ne voulant pas créé des virtuels pour certains
mais savoir leur état (voir de les désactivés)
j'ai joué avec le css pour voir se qu'on pouvait faire "via content"

scenario sur design.png (7.84 Kio) Consulté 5267 fois

creation d'un html dans le même design
et on copie le code
data-scenario_id= qu'on retrouve en mode "outils de dev" navigateur ou id scenario
l'un avec l'image du widget "AutoManuSwitch_IMG" et l'autre des icones et inversement des couleurs (vert lorsqu'il est activé et rouge = désactivé)
j'ai volontairement caché le lancement manuel data-state="start" pour les 2

Code : Tout sélectionner

<style>
  /* tous = .scenario-widget sinon [data-scenario_id="9"]  [data-scenario_id="15"] */
.scenario-widget {
 background-color: #BDCFD9;
} 
  /* Off  f204  */ 
[data-scenario_id="9"] a.btn-success {
border-color:red;
    background-color: red;
  }
  [data-scenario_id="9"] [data-state="activate"] .fa-power-off::before {
    color: white !important;
    content: "\f204";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    }
  
    /* On  f205  */ 
[data-scenario_id="9"] a.btn-danger {
border-color:green;
    background-color: green;
  }
[data-scenario_id="9"] [data-state="deactivate"] .fa-power-off::before {
    color: white !important;
    content: "\f205";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    }
  [data-scenario_id="9"] [data-state="start"] {
display: none!important;
    }
    /* 2eme  */ 
[data-scenario_id="15"] a.btn-success {
border-color:transparent;
    background-color: transparent;
    content:url('plugins/widget/core/template/dashboard/cmd.action.other.AutoManuSwitch_IMG/AutoManuCircle_MANU.png');  
  height: 20px;
  }

[data-scenario_id="15"] a.btn-danger {
border-color:transparent;
    background-color: transparent;
    content:url('plugins/widget/core/template/dashboard/cmd.action.other.AutoManuSwitch_IMG/AutoManuCircle_AUTO.png');  
height: 20px;
  }

  [data-scenario_id="15"] [data-state="start"] {
display: none!important;
    }
</style>
    

Combinateurs et pseudo-classes CSS

[winhex]

modif name equipement.png (7.22 Kio) Consulté 5078 fois

dans un html ou config css (lié au sujet)
pour l'equipement 291 "plug jeelog" dans le design changer le css du nom
et ne pas pouvoir cliquer sur le nom

Code : Tout sélectionner

 
  [data-eqlogic_id="291"][data-version="dplan"]>.widget-name
 {
color: #ddd5c4!important;
  text-align: left; 
   font-weight: bold;
   font-size: 0.9em;
     pointer-events: none;
  }
  

ne pas oublier de vider le cache pour test (CTRL+MAJ+F5) avec chrome

[winhex]

j'ai l'impression d'être un peu seul sur le coup !

pour un tooltip d'un historique
sans la commande qui precede la valeur

Code : Tout sélectionner

.highcharts-label:nth-child(2)>.highcharts-label-box+text>tspan:not(:nth-of-type(3)) 
{
  display:none;
}

20180923_164815.jpg (62.08 Kio) Consulté 5019 fois

1er fois que je fais un truc si long, on y arrive
via lien 2 messages qui precedent celui là et
viewtopic.php?f=24&t=39028&p=649704#p649704

[winhex]

pour cacher le petit badge rouge avec le nombre de mise à jour dans la barre du haut (je garde une veille version 3.2.16) qui gère mon chauffage (l'up attendra)

Code : Tout sélectionner

#span_nbUpdate {
/*  display:none;
*/  visibility:hidden;
}

même si on voit plus
le clic est tonjours possible

[Salvialf]

pour cacher le petit badge rouge avec le nombre de mise à jour dans la barre du haut (je garde une veille version 3.2.16) qui gère mon chauffage (l'up attendra)

Code : Tout sélectionner

#span_nbUpdate {
/*  display:none;
*/  visibility:hidden;
}

même si on voit plus
le clic est tonjours possible

Merci @winhex,

Appliqué aussitôt pour rester aussi en 3.2.16 sans avoir les notifs en rouge !! Nickel !

[Jef73]

j'ai l'impression d'être un peu seul sur le coup !

pour un tooltip d'un historique
sans la commande qui precede la valeur

Code : Tout sélectionner

.highcharts-label:nth-child(2)>.highcharts-label-box+text>tspan:not(:nth-of-type(3)) 
	{
	  display:none;
	}

20180923_164815.jpg

1er fois que je fais un truc si long, on y arrive
via lien 2 messages qui precedent celui là et
viewtopic.php?f=24&t=39028&p=649704#p649704

Super cette astuce, merci bien
Du coup, j'ai ajouté ça dans un de mes cadres HTML en mode DESIGN :

Code : Tout sélectionner

<style>
.highcharts-label:nth-child(2)>.highcharts-label-box+text>tspan:not(:nth-of-type(3)) 
{
  display:none;
}
</style>

Par contre, si j'ai un graphique avec plusieurs courbes en même temps, ça n'enlève l'info que sur une des courbes. J'ai pas trouvé comment faire pour la supprimer de TOUTES les courbes

[winhex]

De mémoire
nth-child(2) c'est ta 1er courbe
ajout
.highcharts-label:nth-child(3) ...

design_historique3.png (22.58 Kio) Consulté 4086 fois

tu peux le faire dans le titre aussi
Le data-plan = design n°
c'etait pour tester (c'est resté)

Code : Tout sélectionner

Consommation d'eau sur 24 heures
<!--
https://www.highcharts.com/docs/chart-design-and-style/style-by-css
-->

<style>
.highcharts-button-symbol {
/*  display:none;
*/  visibility:hidden;
}
.highcharts-label:nth-child(2)>.highcharts-label-box+text>tspan:not(:nth-of-type(3)) 
{
  display:none;
}
.highcharts-label:nth-child(3)>.highcharts-label-box+text>tspan:not(:nth-of-type(3)) 
{
  display:none;
}

[data-plan_id="540"] tspan
  
  {color:#0f1012!important; font-family:oboto-Light,Helvetica Neue,Arial,sans-serif; font-size:13pt;}


.highcharts-yaxis-labels
    {
 display:none;
}

.highcharts-xaxis .highcharts-tick {
	stroke-width: 2px;
	stroke: #ccd6eb;
}
.highcharts-grid-line /** barre horizontal **/
{
opacity: 0.0; 
}
.highcharts-button-box
{
 display:none;
}

</style>

[Jef73]

Super, merci.

Effectivement, le 1 c'est le tooltip sur l'échelle de temps, le 2 la première courbe, le 3 la seconde courbe, etc.

[Loic74]

Bonjour,
Est-il possible de customiser un graphique dans une VUE (pas un DESIGN)?
Je voudrais changer le style d'un HighCharts. Je sais faire dans un design, mais quid d'un graphique d'une VUE?

Merci

[edit] visiblement on peut faire cela avec du css et/ou script via la "personnalisation avancée" mais je ne sais pas encore comment appliquer cela qu'à un seul graphique en particulier. Il doit y avoir un moyen de le sélectionner via un ID?

[winhex]

Code : Tout sélectionner

[data-highcharts-chart="4"] .highcharts-button  {
 visibility:hidden;
  }

[Loic74]

Super merci Winhex.
Je cherche à fixer l'échelle en Y d'un graphique mais je n'y arrive pas vraiment. Sur le site de HighCharts, je ne trouve pas d'exemples en CSS et ce que je trouve en JS est plutôt pour la création du graphique entier...

J'ai essayé cela mais sans succès:

Code : Tout sélectionner

<style>
[data-highcharts-chart="4"] .highcharts-yaxis {min:0;max:100;}
</style>

[winhex]

j'ai un grand doute
le css modifie l'apparence peux aussi remplacé mais de la à reconstruire se qui imposerait une modification entière du graphe ! c'est plus du côté création (voir sujet benj29 ou sujet graph camembert) que je me tournerai

[Loic74]

Merci Winhex,

tu as surement raison car j'ai bien gratté sur le net et pas trouvé grand chose coté CSS (mais bon en même temps je n'y connais pas grand chose dans ce domaine).

J'ai déjà un design qui implémente le code de Benj avec construction de HighChart et chargement des données depuis l'historique, donc ça c'est ok, par contre ce que j'essaie de faire dans ce cas précis c'est de figer l'échelle en Y d'un graphique d'une VUE, pas d'un DESIGN. Du coup, ma question devient "est-il possible de recréer un graphique de zero dans une VUE"? Si oui je suis preneur d'un petit coup demain pour démarrer!

[winhex]

j'utilise peu la vue
mais on peux joindre une commande, donc un widget, ... qui sera ton historiqye

[Loic74]

ok compris.
J'ai pas eu le réflexe du widget, je ne les utilise pas (encore!)

Merci bien

[Jef73]

Je cherche à modifier la couleur du texte de l'axe X d'un graphique, mais je n'y arrive pas
J'ai essayé en bricolant à partir des commandes trouvées plus avant pour masquer les boutons et autres, mais je suis incapable de trouver le bon élément à indiquer.

Sur ma capture d'écran (ne regardez pas les panachages de cadres, j'étais justement en train de les basculer du design "flat" au design "3D" ), on voit bien que l'axe est dans une espèce de gris, donc invisible sur le fond qui est aussi gris (mes ronds rouges).

J'ai modifié la propriété « fill » de la ligne en surbrillance bleue grâce à l'inspecteur de Chrome et ça marche bien en direct (le rectangle rouge).

Jeedom - Couleur texte axe X graphique - 2.png (765.2 Kio) Consulté 3733 fois

 
Du coup, j'ai tenté d'ajouter ce code dans mon cadre HTML, mais ça ne change rien du tout sur la couleur du texte. Je n'ai donc probablement pas pris les bons éléments, mais comme je n'y connais rien, ce n'est pas surprenant

Code : Tout sélectionner

<style>
  /* Modifications des graphiques, s'applique sur la page entière */
  .highcharts-label:nth-child(2)>.highcharts-label-box+text>tspan:not(:nth-of-type(3)) {
    display:none;} /* Retire le nom de l'équipement de la 1ère courbe */
  .highcharts-label:nth-child(3)>.highcharts-label-box+text>tspan:not(:nth-of-type(3)) {
    display:none;} /* Retire le nom de l'équipement de la 2nde courbe */
  .highcharts-button-symbol {
    display:none;} /* Masque le bouton d'export du graphique */
  .highcharts-button-box {
  	display:none;} /* Masque le masque du bouton d'export du graphique */
  .highcharts-axis-labels {
    color:#000000;fill:#000000;}  
  .highcharts-xaxis-labels  {
    color:#000000;fill:#000000;}
</style>

Quelqu'un saurait me dire quels éléments je dois mettre dans cette balise style SVP pour modifier la couleur du texte ?

[Jef73]

Personne ne sait me dire quel élément modifier ?