Ce Forum passera en lecture seule en janvier 2020
Image
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
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 04 juin 2019, 16:59

par défit ça m'a pris moin de temps à tester que de te le détaillé

fait f12
tu y verras 2 class en pointant sur un chiffre
highcharts-yaxis-labels
highcharts-axis-labels
et les chiffres commence toujour par <text>
donc
.highcharts-xaxis-labels text
le html descriptif couleur brut

Code : Tout sélectionner

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <div class="line one">Nord</div>
  <div class="line two">Sud</div>
  <div class="line three">Serre</div>
<style>
.line {
  height:3px;
  width:250px;
  color: black;
  margin-bottom:10px;
  position: absolute;    
	border-radius : 10px;
box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}
.one {
   background: blue;
  width:50px;
  bottom:0;
  top: 0px;


}
.two {
   background: yellow;
  width:50px;
  bottom:10;
  top: 20px;

}
.three {
   background: orange;
  width:50px;
  bottom:10;
  top: 40px;
}

.highcharts-xaxis-labels text {
    stroke: #7cb5ec;
  stroke-width: 0.5px;
}
.highcharts-yaxis-labels text {
    stroke: red;
  stroke-width: 0.5px;
}

  tspan {
    font-family:oboto-Light,Helvetica Neue,Arial,sans-serif;
font-size:12pt;
}
   /**  
  {stroke:#000!important;stroke-width: 0.5px; font-family:oboto-Light,Helvetica Neue,Arial,sans-serif; font-size:12pt;}

	fill: #7cb5ec;
    https://www.highcharts.com/docs/chart-design-and-style/style-by-css
  
  .highcharts-plot-band {
    fill: none;
 }
  .highcharts-plot-background {
     fill:#900909;
  }

.highcharts-button-box {
	display: none;
}

  .highcharts-yaxis-grid .highcharts-grid-line,
.highcharts-yaxis-grid .highcharts-minor-grid-line {
	display: none;
}


.highcharts-plot-border {
    stroke-width: 2px;
    stroke: green;
}

  .highcharts-plot-background {
     fill:none;
  }

  .highcharts-plot-band {
    fill: #90094c;
 }

  **/

</style>
<!--
[data-plan_id="461"] tspan
-->
parfois il est préférable de supprimé sa personnalisation afin de s'assurer quelle ne bloque pas ses essais

pour info en joignant les pseudo-classes structurelles le comportement couleur zoom non zoom peux changé
Pièces jointes
Screenshot_20190604-165230_Chrome.jpg
Screenshot_20190604-165230_Chrome.jpg (133.84 Kio) Consulté 1444 fois

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

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

Message par Jef73 » 04 juin 2019, 19:01

Super, merci beaucoup :)
J'avais bien été dans l'inspecteur de Chrome et trouvé le bon élément, mais c'est le " text" qui me manquait.


Donc la propriété "stroke" que tu utilise ajoute une espèce de contour à l'objet (ici le texte). Ca fonctionne bien.
Mais du coup, j'obtiens un texte flou, quelle que soit la taille du stroke que je mets :
Annotation 2019-06-04 185409.jpg
Annotation 2019-06-04 185409.jpg (723.38 Kio) Consulté 1416 fois
Il ne semble pas possible de modifier directement la couleur ("color" ou "fill"), c'est bien ça ?

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

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

Message par Jef73 » 04 juin 2019, 19:30

winhex a écrit :
04 juin 2019, 16:59
[...]

Code : Tout sélectionner

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <div class="line one">Nord</div>
  <div class="line two">Sud</div>
  <div class="line three">Serre</div>
<style>
.line {
  height:3px;
  width:250px;
  color: black;
  margin-bottom:10px;
  position: absolute;    
	border-radius : 10px;
box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}
.one {
   background: blue;
  width:50px;
  bottom:0;
  top: 0px;


}
.two {
   background: yellow;
  width:50px;
  bottom:10;
  top: 20px;

}
.three {
   background: orange;
  width:50px;
  bottom:10;
  top: 40px;
}

.highcharts-xaxis-labels text {
    stroke: #7cb5ec;
  stroke-width: 0.5px;
}
.highcharts-yaxis-labels text {
    stroke: red;
  stroke-width: 0.5px;
}

  tspan {
    font-family:oboto-Light,Helvetica Neue,Arial,sans-serif;
font-size:12pt;
}
   /**  
  {stroke:#000!important;stroke-width: 0.5px; font-family:oboto-Light,Helvetica Neue,Arial,sans-serif; font-size:12pt;}

	fill: #7cb5ec;
    https://www.highcharts.com/docs/chart-design-and-style/style-by-css
  
  .highcharts-plot-band {
    fill: none;
 }
  .highcharts-plot-background {
     fill:#900909;
  }

.highcharts-button-box {
	display: none;
}

  .highcharts-yaxis-grid .highcharts-grid-line,
.highcharts-yaxis-grid .highcharts-minor-grid-line {
	display: none;
}


.highcharts-plot-border {
    stroke-width: 2px;
    stroke: green;
}

  .highcharts-plot-background {
     fill:none;
  }

  .highcharts-plot-band {
    fill: #90094c;
 }

  **/

</style>
<!--
[data-plan_id="461"] tspan
-->
En "bricolant" à partir de ton code, j'ai mis ça :

Code : Tout sélectionner

<style>
  tspan {
    color: white;
    fill: white;
  }
  .highcharts-xaxis-labels text {
    stroke: white;
    stroke-width: 0;
  }
  .highcharts-yaxis-labels text {
    stroke: white;
    stroke-width: 0;
  }
</style>
et ça me donne un texte parfait pour l'axe X, mais ça ne marche pas du tout pour l'axe Y : ce dernier reste uniquement avec le contour (stroke), la couleur interne n'est pas modifiée par le "span" qui marche pourtant sur l'axe X.

Et comme je n'y connais strictement rien en programmation web, le peu que j'arrive à comprendre grâce à Google, ben ça ne suffit pas à me dépanner, désolé :D

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

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

Message par winhex » 05 juin 2019, 00:01

remplace et joue avec
c'est brut beaucoup de truc à supprimer (car inutile)
une simple copie du code js demo (avec modif css background et plot bland)
https://www.highcharts.com/demo/line-basic/dark-unica
highcharts.png
highcharts.png (58.48 Kio) Consulté 1392 fois

Code : Tout sélectionner

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <div class="line one">Nord</div>
  <div class="line two">Sud</div>
  <div class="line three">Serre</div>
<style>
.line {
  height:3px;
  width:250px;
  color: black;
  margin-bottom:10px;
  position: absolute;    
	border-radius : 10px;
box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}
.one {
   background: blue;
  width:50px;
  bottom:0;
  top: 0px;


}
.two {
   background: yellow;
  width:50px;
  bottom:10;
  top: 20px;

}
.three {
   background: orange;
  width:50px;
  bottom:10;
  top: 40px;
}
     .highcharts-background {
  fill: #2a2a2b!important;

       }
 .highcharts-plot-band  
{
 //     display:none;
  //       fill: transparent;
        fill: none;
}
   /**  
.highcharts-xaxis-labels text {
    stroke: #7cb5ec;
  stroke-width: 0.5px;
}
.highcharts-yaxis-labels text {
    stroke: red;
  stroke-width: 0.5px;
}

  tspan {
    font-family:oboto-Light,Helvetica Neue,Arial,sans-serif;
font-size:12pt;
}

  {stroke:#000!important;stroke-width: 0.5px; font-family:oboto-Light,Helvetica Neue,Arial,sans-serif; font-size:12pt;}
https://la-cascade.io/combinateurs-et-pseudo-classes-css/
	fill: #7cb5ec;
    https://www.highcharts.com/docs/chart-design-and-style/style-by-css
  
  .highcharts-plot-band {
    fill: none;
 }
  .highcharts-plot-background {
     fill:#900909;
  }

.highcharts-button-box {
	display: none;
}

  .highcharts-yaxis-grid .highcharts-grid-line,
.highcharts-yaxis-grid .highcharts-minor-grid-line {
	display: none;
}


.highcharts-plot-border {
    stroke-width: 2px;
    stroke: green;
}

  .highcharts-plot-background {
     fill:none;
  }

  .highcharts-plot-band {
    fill: #90094c;
 }

  **/

</style>
<script>
  Highcharts.createElement('link', {
    href: 'https://fonts.googleapis.com/css?family=Unica+One',
    rel: 'stylesheet',
    type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
  
  Highcharts.theme = {
    colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066',
        '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
    chart: {

        style: {
            fontFamily: '\'Unica One\', sans-serif'
        },
        plotBorderColor: '#606063'
    },
    title: {
        style: {
            color: '#E0E0E3',
            textTransform: 'uppercase',
            fontSize: '20px'
        }
    },
    subtitle: {
        style: {
            color: '#E0E0E3',
            textTransform: 'uppercase'
        }
    },
    xAxis: {
        gridLineColor: '#707073',
        labels: {
            style: {
                color: '#E0E0E3'
            }
        },
        lineColor: '#707073',
        minorGridLineColor: '#505053',
        tickColor: '#707073',
        title: {
            style: {
                color: '#A0A0A3'

            }
        }
    },
    yAxis: {
        gridLineColor: '#707073',
        labels: {
            style: {
                color: '#E0E0E3'
            }
        },
        lineColor: '#707073',
        minorGridLineColor: '#505053',
        tickColor: '#707073',
        tickWidth: 1,
        title: {
            style: {
                color: '#A0A0A3'
            }
        }
    },
    tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.85)',
        style: {
            color: '#F0F0F0'
        }
    },
    plotOptions: {
        series: {
            dataLabels: {
                color: '#B0B0B3'
            },
            marker: {
                lineColor: '#333'
            }
        },
        boxplot: {
            fillColor: '#505053'
        },
        candlestick: {
            lineColor: 'white'
        },
        errorbar: {
            color: 'white'
        }
    },
    legend: {
        itemStyle: {
            color: '#E0E0E3'
        },
        itemHoverStyle: {
            color: '#FFF'
        },
        itemHiddenStyle: {
            color: '#606063'
        }
    },
    credits: {
        style: {
            color: '#666'
        }
    },
    labels: {
        style: {
            color: '#707073'
        }
    },

    drilldown: {
        activeAxisLabelStyle: {
            color: '#F0F0F3'
        },
        activeDataLabelStyle: {
            color: '#F0F0F3'
        }
    },

    navigation: {
        buttonOptions: {
            symbolStroke: '#DDDDDD',
            theme: {
                fill: '#505053'
            }
        }
    },

    // scroll charts
    rangeSelector: {
        buttonTheme: {
            fill: '#505053',
            stroke: '#000000',
            style: {
                color: '#CCC'
            },
            states: {
                hover: {
                    fill: '#707073',
                    stroke: '#000000',
                    style: {
                        color: 'white'
                    }
                },
                select: {
                    fill: '#000003',
                    stroke: '#000000',
                    style: {
                        color: 'white'
                    }
                }
            }
        },
        inputBoxBorderColor: '#505053',
        inputStyle: {
            backgroundColor: '#333',
            color: 'silver'
        },
        labelStyle: {
            color: 'silver'
        }
    },

    navigator: {
        handles: {
            backgroundColor: '#666',
            borderColor: '#AAA'
        },
        outlineColor: '#CCC',
        maskFill: 'rgba(255,255,255,0.1)',
        series: {
            color: '#7798BF',
            lineColor: '#A6C7ED'
        },
        xAxis: {
            gridLineColor: '#505053'
        }
    },

    scrollbar: {
        barBackgroundColor: '#808083',
        barBorderColor: '#808083',
        buttonArrowColor: '#CCC',
        buttonBackgroundColor: '#606063',
        buttonBorderColor: '#606063',
        rifleColor: '#FFF',
        trackBackgroundColor: '#404043',
        trackBorderColor: '#404043'
    },

    // special colors for some of the
    legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
    background2: '#505053',
    dataLabelsColor: '#B0B0B3',
    textColor: '#C0C0C0',
    contrastTextColor: '#F0F0F3',
    maskColor: 'rgba(255,255,255,0.3)'
};

// Apply the theme
Highcharts.setOptions(Highcharts.theme);
 
</script>
<!--
[data-plan_id="461"] tspan
-->
ça fait pas de moi un pro
parfois faut tenté pour voir et surtout avoir un peu de chance :D

grace à toi
perso highchart.png
perso highchart.png (66.03 Kio) Consulté 1378 fois

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

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

Message par Jef73 » 05 juin 2019, 11:25

C'est bon, j'ai réussi, merci pour l'aide ;)

J'ai fait comme tu as dit, j'ai recopié tout le code et supprimé bout par bout, jusqu'à ce que je tombe sur les deux éléments permettant de jouer sur les texte des axes.
Du coup il suffit de mettre ces 8 petites lignes dans son code HTML pour revenir à un texte standard et en fixer la couleur :

Code : Tout sélectionner

<script> // Modifie le texte des axes X et Y, s'applique sur la page entière
  Highcharts.theme = {
    xAxis: {labels: {style: {color: 'white'}}},
    yAxis: {labels: {style: {color: 'white'}}},
  };
  // Applique le thème :
  Highcharts.setOptions(Highcharts.theme);
</script>
J'ai toujours pas compris pourquoi le code de mon post précédent modifiait bien le texte de l'axe X, mais pas du tout celui de l'axe Y par contre :?:
Par curiosité, si quelqu'un sait, je suis preneur de l'info ...

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

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

Message par Jef73 » 05 juin 2019, 11:28

PS : à quoi sert le
<!--
[data-plan_id="461"] tspan
-->
SVP ?

J'ai modifié pour mettre l'ID de mon design, mais je n'ai pas constaté de différences avant ou après cette modif.

Avatar de l’utilisateur
GargouilleBL
Timide
Messages : 253
Inscription : 26 janv. 2017, 09:31
Localisation : Sprimont (Province de Liège - Belgique)

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

Message par GargouilleBL » 05 juin 2019, 11:36

Salut,
Jef73 a écrit :
05 juin 2019, 11:28
PS : à quoi sert le
<!--
[data-plan_id="461"] tspan
-->
SVP ?

J'ai modifié pour mettre l'ID de mon design, mais je n'ai pas constaté de différences avant ou après cette modif.
A rien, en HTML tous ce qui est entre <!-- et --> sont des commentaires
@+GargouilleBL
Jeedom V3.3.19 sur VM ProxMox - Clef Usb Z-Wave - Clef Usb RfxCom
Caméras D-Link + Reolink, Oeil Fibaro, Rubans Leds Yeelight, Variateurs Fibaro, Ampoules Led Z-Wave, Clavier RFID, Vannes Thermostat Danfoss, Ampoules IKEA, SNIPS, etc...

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

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

Message par winhex » 05 juin 2019, 16:18

reste de test permetant de dissocier pour plusieurs graphique sur un design

jai gardé plus de chose pour mon besoin
pop up "tooltip" sur fond noir, petite barre au axe "tick",..

Code : Tout sélectionner

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  <div class="line one">Nord</div>
  <div class="line two">Sud</div>
  <div class="line three">Serre</div>
<style>
.line {
  height:3px;
  width:250px;
  color: white;
  margin-bottom:10px;
  position: absolute;    
	border-radius : 10px;
box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
}
.one {
   background: blue;
  width:50px;
  bottom:0;
  top: 0px;


}
.two {
   background: yellow;
  width:50px;
  bottom:10;
  top: 20px;

}
.three {
   background: orange;
  width:50px;
  bottom:10;
  top: 40px;
}

 .highcharts-plot-band  
{fill: none;}
     /**  
  .highcharts-button
  {display:none;}
  
    
     .highcharts-background {
  fill: #2a2a2b!important;

       }
  
   /**  
.highcharts-xaxis-labels text {
    stroke: #7cb5ec;
  stroke-width: 0.5px;
}
.highcharts-yaxis-labels text {
    stroke: red;
  stroke-width: 0.5px;
}
**/
  tspan {
    font-family:oboto-Light,Helvetica Neue,Arial,sans-serif;
   // fill:white;
font-size:12pt;
}
/**
  
  {stroke:#000!important;stroke-width: 0.5px; font-family:oboto-Light,Helvetica Neue,Arial,sans-serif; font-size:12pt;}
https://la-cascade.io/combinateurs-et-pseudo-classes-css/
	fill: #7cb5ec;
    https://www.highcharts.com/docs/chart-design-and-style/style-by-css
  
  .highcharts-plot-band {
    fill: none;
 }
  .highcharts-plot-background {
     fill:#900909;
  }

.highcharts-button-box {
	display: none;
}

  .highcharts-yaxis-grid .highcharts-grid-line,
.highcharts-yaxis-grid .highcharts-minor-grid-line {
	display: none;
}


.highcharts-plot-border {
    stroke-width: 2px;
    stroke: green;
}

  .highcharts-plot-background {
     fill:none;
  }

  .highcharts-plot-band {
    fill: #90094c;
 }

  **/

</style>
<script>

 

  Highcharts.createElement('link', {
    href: 'https://fonts.googleapis.com/css?family=Unica+One',
    rel: 'stylesheet',
    type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
  
  Highcharts.theme = {

    xAxis: {

        labels: {
            style: {
                color: '#E0E0E3', // color bas
            }
        },
        lineColor: '#30ffad', // barre du bas

        tickColor: '#30ffad', // petit tick bas

    },
    yAxis: {
        gridLineColor: '#30ffad', // barre
        labels: {
            style: {
                color: '#e0e0e3', // color droite

            }
        },

        tickColor: '#30ffad', // petit tick droite
        tickWidth: 1,

    },
    tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.85)',
        style: {

            color: '#F0F0F0',


        }
    },

    navigation: {
        buttonOptions: {
            theme: {
                fill: 'none'
            }
        }
    },

}



// Apply the theme
Highcharts.setOptions(Highcharts.theme);
 
 
</script>
<!--
[data-plan_id="461"] tspan
-->
le graphe à l'option transparence
derrier un simple html avec une couleur gradient
https://mycolor.space/gradient?ori=circ ... EB12&sub=1

Code : Tout sélectionner

<div style="height:100%;background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);"> <!-- Modifiez height pour régler la hauteur du cadre -->
</div>
vu que je fais disparaître le graphe pour faire apparaître un résumé
20190605_163054.jpg
20190605_163054.jpg (122.72 Kio) Consulté 1322 fois
pour moi
tu ouvres ta pages
le design se construit dont le graphe par défaut
ton html modifie le visuel
.
le graphe s'actualise via script/api et il doit calculé pour avoir un axe toujours optimum au rendu visuel tes barres non trop petite ou trop grande
donc l'actualisation réforme le design par défaut
Dernière édition par winhex le 05 juin 2019, 16:32, édité 1 fois.

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

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

Message par Jef73 » 05 juin 2019, 16:30

Et pour ceux qui ont coché la case "fond transparent" mais se heurtent à l'affichage "jour" qui ajoute quand même des rectangles blanchâtres sur les données du jour :

Code : Tout sélectionner

<style>
  .highcharts-plot-bands-0 {
    display:none;} /* Masque les bandes pour le jour actuel si affichage "jour" */
</style>

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

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

Message par winhex » 05 juin 2019, 16:37

j avais des 2 côtés la bande blanche
c'est du code plus haut
.highcharts-plot-band
{fill: none;}

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

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

Message par Jef73 » 05 juin 2019, 17:01

Oui c'est ça : une bande fine sur la gauche et une autre plus large à droite (sur le jour actuel en fait).
La ligne que j'ai mise masque tout ça aussi.

C'est bien pratique cette possibilité de personnalisation d'un peu tout et n'importe quoi :D

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

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

Message par Jef73 » 21 juin 2019, 17:51

Merci pour cette citation de post, je ne l'avais pas vue et c'est super pratique :)

Nota : tu as un lien "bizarre" dans le début de ton post ;)

G0M
Timide
Messages : 97
Inscription : 12 avr. 2016, 15:28

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

Message par G0M » 02 juil. 2019, 17:56

Hello, j'ai suivi ce fil super utile pour créer une petite interface perso. Elle fonctionne bien mais j'ai quelques widgets qui ne se rafraichissent pas en temps réel. Obligé de recharger la page pou mettre à jour leur état. Une idée de ce que je devrais faire pour résoudre ce petit souci?
Merci!!!

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

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

Message par winhex » 05 sept. 2019, 00:57

c'est normal car c'est à la lecture de la page que le css s'actualise

sinon pour la couleur d'un widget (core) badge
badge couleur.png
badge couleur.png (11.82 Kio) Consulté 824 fois

Code : Tout sélectionner

[data-cmd_id="2550"] .label-info {
    background-color: rgba(255,0,0,1)!important;
}
les couleurs rgb
https://www.w3schools.com/colors/colors_picker.asp
pour le rgba c'est le dernier chiffre pour l'opacité,transparence 1 ou 0.xx

donc du transparant avec une police rouge donnerai

Code : Tout sélectionner

[data-cmd_id="2550"] .label-info {
    background-color: rgba(255,0,0,0)!important;
  color:red;
}
changeons pour arrondir fond beige et police rouge comme l'image

Code : Tout sélectionner

[data-cmd_id="2550"] .label-info {
    background-color: rgba(255,230,153,1)!important;
  border-radius:2em;
  color:red;
}

Avatar de l’utilisateur
raqpub
Timide
Messages : 275
Inscription : 04 juin 2015, 08:21
Localisation : Earth

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

Message par raqpub » 19 sept. 2019, 12:57

Bonjour,

Quelqu'un saurait me dire si il est possible d'intégrer le résultat d'un js (url externe) dans un widget qui lui offrirait la scrollbar car le résultat du js sera plus grand que le param de hauteur du widget ?

Le js en question (jai mis le data-height à 1070 et mon widget serait limité à 300px par exemple) :

Code : Tout sélectionner

<a class="widget-tv" href="https://tv-programme.com" data-type="ce-soir" data-color="#dff0d8" data-width="300px" data-height="1070px">Programme TV</a><script async type="text/javascript" src="https://tv-programme.com/widget.js"></script>
Merci

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

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

Message par winhex » 19 sept. 2019, 16:21

bonjour si je comprend ta question
via style overflow
https://developer.mozilla.org/fr/docs/Web/CSS/overflow
tu as un exemple avec nos log
overflow: auto
viewtopic.php?f=30&t=45196#p733755

Avatar de l’utilisateur
raqpub
Timide
Messages : 275
Inscription : 04 juin 2015, 08:21
Localisation : Earth

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

Message par raqpub » 21 sept. 2019, 09:19

Bonjour @winhex
oui tu as bien compris.

Si je fais juste un html avec tes infos :

Code : Tout sélectionner

<div>
  <p style="overflow: auto; display: inline-block; width: 20em; height: 16em; border: dotted;">
    <a class="widget-tv" href="https://tv-programme.com" data-type="ce-soir" data-color="#dff0d8" data-width="300px" data-height="1700px">Programme TV</a>
    <script async type="text/javascript" src="https://tv-programme.com/widget.js"></script>
  </p>
</div>
Et que je le charge sur mon navigateur, c'est bien ce que je veux :
Html.png
Html.png (24.88 Kio) Consulté 628 fois
Mais pour l'instant je n'ai pas réussi à le mettre dans un widget jeedom pour que ça scroll :
WidgetGuide.png
WidgetGuide.png (34.8 Kio) Consulté 628 fois
Donc c'est moi qui ne comprend pas ;-)

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

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

Message par Jef73 » 21 sept. 2019, 16:14

Et si tu l'encadrais dans un iframe en forçant la taille et l’ascenseur vertical ?

Avatar de l’utilisateur
raqpub
Timide
Messages : 275
Inscription : 04 juin 2015, 08:21
Localisation : Earth

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

Message par raqpub » 21 sept. 2019, 19:19

J'ai inspecté le virtuel résultat sur mon dash et je vois :
zoneresult.png
zoneresult.png (28.22 Kio) Consulté 585 fois
Apparemment ça force le overflow proposé par winhex à hidden et un param scrolling forcé aussi à no.


J'ai tenté de récup le js mais pas certain de tout avoir et on retrouve les param forcés :
n.setAttribute("style","overflow: hidden ...
n.setAttribute("scrolling","no"),

Code : Tout sélectionner

!function(){var r=function(){this.cursor=0};r.HOST="https://tv-programme.com",r.anchor="Programme TV",r.fn=r.prototype={newId:function(){return++this.cursor},init:function(){document.querySelectorAll("a.widget-tv").forEach(function(t){var i={href:t.getAttribute("href"),type:t.getAttribute("data-type"),nbchaines:t.getAttribute("data-nb-chaines"),height:t.getAttribute("data-height")||"380px",width:t.getAttribute("data-width")||"300px",color:t.getAttribute("data-color")||""},n=i.color?"&hover_color="+encodeURIComponent(i.color):"";i.nbchaines?(i.height=35+101*i.nbchaines+"px",e="&nb_chaines="+encodeURIComponent(i.nbchaines)):e="",r.HOST==i.href&&r.anchor==t.text&&this.build(t,r.HOST+"/widget.php?type="+i.type+n+e,i)}.bind(this))},build:function(t,e,i){var n=document.createElement("iframe");n.setAttribute("id","widget-tv-"+this.newId()),n.setAttribute("src",e),n.setAttribute("style","overflow: hidden; position: static; visibility: visible; display: inline-block; width: "+i.width+"; height: "+i.height+"; padding: 0px; border: none; max-width: 100%; min-width: 300px; margin-top: 0px; margin-bottom: 0px; min-height: 200px;"),n.setAttribute("scrolling","no"),n.setAttribute("frameBorder","0"),n.setAttribute("allowTransparency","true"),n.setAttribute("allowFullscreen","true"),t.parentNode.replaceChild(n,t)}},window.Widget=r}();var widget=new Widget;window.onload=widget.init.bind(widget);

Je ne connais pas suffisamment le code js pour savoir le récupérer en local et l'adapter.
ça me semble mort.

Merci pour votre aide.

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

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

Message par winhex » 21 sept. 2019, 20:58

rapidement (sans test)
dans le lien plus haut un overflow sur équipement (sondes dans tableau)
donc un widget sans limite de taille width, height
le crayon pour définir la tailletaille l'équipement
et un overflow soit via la config équipement soit via custom du sujet

Répondre

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

Qui est en ligne ?

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