[S'inspirer] Postez vos Customisations (Javascipt / CSS)
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
Bonjour,
Je voudrais modifier toute la police. C'est possible, je n'y arrive pas.
Merci d'avance
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 / ...
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 / ...
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
dans le bloc css
ou
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
Code : Tout sélectionner
body{
font: xxxx !important;
}
Code : Tout sélectionner
body{
font-family: xxxx !important;
}
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)
Protocole : Z-Wave (Fibaro & Qubino), Ikea, Bluetooth
Méteo : Netatmo
Audio : Sonos (Play 1 et 5)
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
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 / ...
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 / ...
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
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" 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
Combinateurs et pseudo-classes CSS
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" 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>
Dernière édition par winhex le 03 juin 2019, 20:09, édité 1 fois.
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
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;
}
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
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
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
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;
}
via lien 2 messages qui precedent celui là et
viewtopic.php?f=24&t=39028&p=649704#p649704
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
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)
même si on voit plus
le clic est tonjours possible
Code : Tout sélectionner
#span_nbUpdate {
/* display:none;
*/ visibility:hidden;
}
le clic est tonjours possible
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
Merci @winhex,winhex a écrit : ↑07 avr. 2019, 10:25pour 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)même si on voit plusCode : Tout sélectionner
#span_nbUpdate { /* display:none; */ visibility:hidden; }
le clic est tonjours possible
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)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
Super cette astuce, merci bienwinhex a écrit : ↑23 sept. 2018, 16:46j'ai l'impression d'être un peu seul sur le coup !
pour un tooltip d'un historique
sans la commande qui precede la valeur
20180923_164815.jpgCode : Tout sélectionner
.highcharts-label:nth-child(2)>.highcharts-label-box+text>tspan:not(:nth-of-type(3)) { display:none; }
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
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
BLEA :
Autostart au boot : viewtopic.php?t=28608#p500124
Relance auto (Monit) : https://www.the-hawkes.de/monitor-your- ... monit.html
Alternative : viewtopic.php?t=25492
Autostart au boot : viewtopic.php?t=28608#p500124
Relance auto (Monit) : https://www.the-hawkes.de/monitor-your- ... monit.html
Alternative : viewtopic.php?t=25492
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
De mémoire
nth-child(2) c'est ta 1er courbe
ajout
.highcharts-label:nth-child(3) ...
tu peux le faire dans le titre aussi
Le data-plan = design n°
c'etait pour tester (c'est resté)
nth-child(2) c'est ta 1er courbe
ajout
.highcharts-label:nth-child(3) ...
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 (50.52 Kio) Consulté 4177 fois
-
- design_historique1.png (87.91 Kio) Consulté 4177 fois
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
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.
Effectivement, le 1 c'est le tooltip sur l'échelle de temps, le 2 la première courbe, le 3 la seconde courbe, etc.
BLEA :
Autostart au boot : viewtopic.php?t=28608#p500124
Relance auto (Monit) : https://www.the-hawkes.de/monitor-your- ... monit.html
Alternative : viewtopic.php?t=25492
Autostart au boot : viewtopic.php?t=28608#p500124
Relance auto (Monit) : https://www.the-hawkes.de/monitor-your- ... monit.html
Alternative : viewtopic.php?t=25492
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
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?
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
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
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
Code : Tout sélectionner
[data-highcharts-chart="4"] .highcharts-button {
visibility:hidden;
}
- Pièces jointes
-
- css2.png (168.88 Kio) Consulté 4028 fois
-
- css1.png (201.27 Kio) Consulté 4028 fois
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
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:
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
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
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
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
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
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
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!
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
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
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
j'utilise peu la vue
mais on peux joindre une commande, donc un widget, ... qui sera ton historiqye
mais on peux joindre une commande, donc un widget, ... qui sera ton historiqye
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
ok compris.
J'ai pas eu le réflexe du widget, je ne les utilise pas (encore!)
Merci bien
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
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
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
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).
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
Quelqu'un saurait me dire quels éléments je dois mettre dans cette balise style SVP pour modifier la couleur du texte ?
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).
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>
BLEA :
Autostart au boot : viewtopic.php?t=28608#p500124
Relance auto (Monit) : https://www.the-hawkes.de/monitor-your- ... monit.html
Alternative : viewtopic.php?t=25492
Autostart au boot : viewtopic.php?t=28608#p500124
Relance auto (Monit) : https://www.the-hawkes.de/monitor-your- ... monit.html
Alternative : viewtopic.php?t=25492
Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)
Personne ne sait me dire quel élément modifier ?
BLEA :
Autostart au boot : viewtopic.php?t=28608#p500124
Relance auto (Monit) : https://www.the-hawkes.de/monitor-your- ... monit.html
Alternative : viewtopic.php?t=25492
Autostart au boot : viewtopic.php?t=28608#p500124
Relance auto (Monit) : https://www.the-hawkes.de/monitor-your- ... monit.html
Alternative : viewtopic.php?t=25492
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités