Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Le groupe des Helpers est present pour vous aidez, n'hésitez pas à poser des questions ;)

Toute la communauté vous remercie

/!\ L’ancien forum passera en lecture seule en janvier 2020 (Si community a bien pris le relais) puis nous le fermerons définitivement en janvier 2021./!\
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

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

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
fcna
Actif
Messages : 825
Inscription : 15 mars 2015, 16:14
Localisation : Toulouse

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

Message par fcna » 25 avr. 2018, 17:54

Bonjour,

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

Merci d'avance
Mini +
Fibaro FGMS-001
Qubino Fil Pilote 6 / Module Vlts roulants
Aeon Labs mono G2 60A
Fibaro Wall Plug / Smoke Sensor

ImperiHome Standard System /Pushing Box/Energie/ Philips Hue / Agenda / Clock / Géolocalisation / Themes / ...

Sartog
Actif
Messages : 502
Inscription : 27 août 2015, 14:54

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

Message par Sartog » 25 avr. 2018, 17:58

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
Box : smart, mini+, pi 2 et 3, ipbx800 v4
Protocole : Z-Wave (Fibaro & Qubino), Ikea, Bluetooth
Méteo : Netatmo
Audio : Sonos (Play 1 et 5)

fcna
Actif
Messages : 825
Inscription : 15 mars 2015, 16:14
Localisation : Toulouse

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

Message par fcna » 25 avr. 2018, 18:35

Merci ca marche bien
Mini +
Fibaro FGMS-001
Qubino Fil Pilote 6 / Module Vlts roulants
Aeon Labs mono G2 60A
Fibaro Wall Plug / Smoke Sensor

ImperiHome Standard System /Pushing Box/Energie/ Philips Hue / Agenda / Clock / Géolocalisation / Themes / ...

winhex
Actif
Messages : 3743
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 06 août 2018, 00:43

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
scenario sur design.png (7.84 Kio) Consulté 2009 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
Dernière édition par winhex le 03 juin 2019, 20:09, édité 1 fois.

winhex
Actif
Messages : 3743
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 19 sept. 2018, 02:45

modif name equipement.png
modif name equipement.png (7.22 Kio) Consulté 1820 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
Actif
Messages : 3743
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 23 sept. 2018, 16:46

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
20180923_164815.jpg (62.08 Kio) Consulté 1761 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
Actif
Messages : 3743
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 07 avr. 2019, 10:25

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

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1317
Inscription : 24 févr. 2018, 09:37
Contact :

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

Message par Salvialf » 07 avr. 2019, 14:15

winhex a écrit :
07 avr. 2019, 10:25
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 !
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Jef73
Timide
Messages : 360
Inscription : 27 déc. 2017, 10:41
Localisation : Nantes

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

Message par Jef73 » 27 avr. 2019, 11:32

winhex a écrit :
23 sept. 2018, 16:46
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 :oops:

winhex
Actif
Messages : 3743
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 27 avr. 2019, 20:52

De mémoire
nth-child(2) c'est ta 1er courbe
ajout
.highcharts-label:nth-child(3) ...
design_historique3.png
design_historique3.png (22.58 Kio) Consulté 828 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>
Pièces jointes
design_historique2.png
design_historique2.png (50.52 Kio) Consulté 830 fois
design_historique1.png
design_historique1.png (87.91 Kio) Consulté 830 fois

Jef73
Timide
Messages : 360
Inscription : 27 déc. 2017, 10:41
Localisation : Nantes

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

Message par Jef73 » 28 avr. 2019, 08:04

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
Actif
Messages : 708
Inscription : 24 oct. 2017, 22:45
Localisation : Haute-Savoie
Contact :

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

Message par Loic74 » 13 mai 2019, 21:48

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?
---------------------------------------
Jeedom v3.3.19, VM sur Synology RS1619xs+, Arduinos, ETH-IO32B, MQTT, TTN, LoRa, Service Pack Power Ultimate
Ma présentation
Ma piscine connectée
ioBoard

winhex
Actif
Messages : 3743
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 13 mai 2019, 22:24

Code : Tout sélectionner

[data-highcharts-chart="4"] .highcharts-button  {
 visibility:hidden;
  }
Pièces jointes
css2.png
css2.png (168.88 Kio) Consulté 681 fois
css1.png
css1.png (201.27 Kio) Consulté 681 fois

Loic74
Actif
Messages : 708
Inscription : 24 oct. 2017, 22:45
Localisation : Haute-Savoie
Contact :

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

Message par Loic74 » 13 mai 2019, 23:06

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>
---------------------------------------
Jeedom v3.3.19, VM sur Synology RS1619xs+, Arduinos, ETH-IO32B, MQTT, TTN, LoRa, Service Pack Power Ultimate
Ma présentation
Ma piscine connectée
ioBoard

winhex
Actif
Messages : 3743
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 14 mai 2019, 00:53

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
Actif
Messages : 708
Inscription : 24 oct. 2017, 22:45
Localisation : Haute-Savoie
Contact :

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

Message par Loic74 » 14 mai 2019, 08:56

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!
---------------------------------------
Jeedom v3.3.19, VM sur Synology RS1619xs+, Arduinos, ETH-IO32B, MQTT, TTN, LoRa, Service Pack Power Ultimate
Ma présentation
Ma piscine connectée
ioBoard

winhex
Actif
Messages : 3743
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 14 mai 2019, 10:23

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

Loic74
Actif
Messages : 708
Inscription : 24 oct. 2017, 22:45
Localisation : Haute-Savoie
Contact :

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

Message par Loic74 » 14 mai 2019, 11:08

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

Merci bien
---------------------------------------
Jeedom v3.3.19, VM sur Synology RS1619xs+, Arduinos, ETH-IO32B, MQTT, TTN, LoRa, Service Pack Power Ultimate
Ma présentation
Ma piscine connectée
ioBoard

Jef73
Timide
Messages : 360
Inscription : 27 déc. 2017, 10:41
Localisation : Nantes

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

Message par Jef73 » 26 mai 2019, 08:52

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" :D ), 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
Jeedom - Couleur texte axe X graphique - 2.png (765.2 Kio) Consulté 475 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 :lol:

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
Timide
Messages : 360
Inscription : 27 déc. 2017, 10:41
Localisation : Nantes

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

Message par Jef73 » 04 juin 2019, 12:33

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

Répondre

Revenir vers « Présentation et Vitrine d'installations »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité