Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

Widget - Tableau - CSS Jeedom v3.1.x

Réservé à l'utilisation et la création de widgets dans JEEDOM
GuillaumeDieppe
Actif
Messages : 635
Inscription : 27 janv. 2017, 10:53

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par GuillaumeDieppe » 14 juin 2018, 16:17

Hello,

J'ai tenté :
- float:left;height: 4em;line-height: 4em;white-space: nowrap;
- height: 4em;float:left;line-height: 4em;white-space: nowrap;
- height: 4em;line-height: 4em;float:left;white-space: nowrap;
- height: 4em;line-height: 4em;white-space: nowrap;float:left;

Sans succès
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis

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

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par winhex » 14 juin 2018, 16:20

une fois sauvegardé
ensuite ctrl-f5 plus vidé le cache
des fois que !

GuillaumeDieppe
Actif
Messages : 635
Inscription : 27 janv. 2017, 10:53

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par GuillaumeDieppe » 14 juin 2018, 16:39

J'ai fait :

- float:left;height: 4em;line-height: 4em;white-space: nowrap; puis vider cache puis sur mon plan CTRL + F5
- height: 4em;float:left;line-height: 4em;white-space: nowrap; puis vider cache puis sur mon plan CTRL + F5
- height: 4em;line-height: 4em;float:left;white-space: nowrap; puis vider cache puis sur mon plan CTRL + F5
- height: 4em;line-height: 4em;white-space: nowrap;float:left; puis vider cache puis sur mon plan CTRL + F5

Pas de changement (testé Chrome + Firefox)
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis

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

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par winhex » 14 juin 2018, 16:42

en ne mettant que float ?

GuillaumeDieppe
Actif
Messages : 635
Inscription : 27 janv. 2017, 10:53

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par GuillaumeDieppe » 14 juin 2018, 16:46

Comme ça ?

float;height: 4em;line-height: 4em;white-space: nowrap; puis vider cache puis sur mon plan CTRL + F5
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis

GuillaumeDieppe
Actif
Messages : 635
Inscription : 27 janv. 2017, 10:53

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par GuillaumeDieppe » 14 juin 2018, 16:48

Si oui, pas de changement
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis

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

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par winhex » 14 juin 2018, 16:50

float:left;
sans le reste
ou
float:left!important;
sinon je ne sais pas

GuillaumeDieppe
Actif
Messages : 635
Inscription : 27 janv. 2017, 10:53

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par GuillaumeDieppe » 14 juin 2018, 17:00

Non pas de changement.

C'est quand même incroyable qu'il ne soit pas possible en CSS de centrer sur la gauche !!!

Merci du énième coup de main winhex en tout cas !
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis

GuillaumeDieppe
Actif
Messages : 635
Inscription : 27 janv. 2017, 10:53

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par GuillaumeDieppe » 14 juin 2018, 17:17

J'ai trouvé une solution partielle
Pour mon affichage du nombre de colis/courriers/pubs j'utilisais le widget tile (core)
J'ai testé en changeant de widget, j'ai pris line (core) et l'alignement à gauche se fait bien !!!
Par contre c'est écrit tout petit. Du coup j'ai ajouté le paramètre CSS font-size: 200%; mais j'ai seulement l'unité qui change de taille (colis), pas le zéro.
Comment puis-je mettre le nombre de colis/courriers/pubs dans une taille personnalisée ?

Merci

Cdt
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2714
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par Theduck38 » 14 juin 2018, 18:27

Je demande juste parce que je m'étais fait avoir : tu n'as pas laissé l'option générale de centrage dans ton tableau (configuration générale / centrer dans les cases) ?
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

GuillaumeDieppe
Actif
Messages : 635
Inscription : 27 janv. 2017, 10:53

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par GuillaumeDieppe » 14 juin 2018, 19:36

En lisant ce qui t'étais arrivé, c'est la première chose que j'ai vérifié :mrgreen:
Je pense que c'est un paramètre du widget tile qui prévaut sur les paramètres du tableau. La preuve, cela ne le fait pas avec le widget line
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis

raphael_malin
Timide
Messages : 485
Inscription : 10 nov. 2014, 00:20
Localisation : Nouméa - Nouvelle-Calédonie

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par raphael_malin » 15 juil. 2018, 08:46

Hello,
J'ai besoin d'aide concernant du codage CSS.
J'ai récupéré du code pour effectuer des cases pour le design mais lorsque je change la couleur toutes les cases changent.
Au début le code était directement dans le texte/html, j'ai donc créé un fichier CSS et maintenant via un lien, je récupère le fichier.
J'ai donc créé un second fichier CSS avec des couleurs différentes, mais lorsque je l'ai ajouté dans le design, toutes les cases ont à nouveau changé :(

Comment faire pour les dissocier?
et comment puis je sortir certaines lignes de façon à les mettre dans le code html pour ne modifier qu'elles ? (comme le texte par ex qui est déjà comme ca)

Merci
Voici le css:

Code : Tout sélectionner

<style>
.boxT {
  width: 100%; 
  height: 100%;
  position: relative;
  border-radius: 0px;
  background: #EEE;
  background-color: rgba(0,0,50,0.6);
}
.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF; /*Couleur texte petit bandeau */
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%); /*Couleur ruban*/
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0,1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
</style>
et le html:

Code : Tout sélectionner

<link href="PERSO/fenetre+ruban perso/fenetre+ruban.css" rel="stylesheet" type="text/css">

<div class="boxT">
   <div class="ribbon"><span>SAINTS</span></div>
</div>
Jeedom smart avec en général toutes les mises à jour faites (système et plugin)

raphael_malin
Timide
Messages : 485
Inscription : 10 nov. 2014, 00:20
Localisation : Nouméa - Nouvelle-Calédonie

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par raphael_malin » 17 juil. 2018, 13:20

Personne pour m'aider? merci
Jeedom smart avec en général toutes les mises à jour faites (système et plugin)

dvb
Actif
Messages : 1442
Inscription : 15 févr. 2015, 22:50

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par dvb » 20 janv. 2019, 21:57

Bonsoir à tous,

Je rencontre un souci avec la fonctionnalité tableau et j'aimerais votre avis ...

Après paramétrage, j'ai passé le Dashboard en mode édition pour agrandir le tableau.
En mode édition, tout est OK:
Image

Mais lorsque je repasse en mode Dashboard, le tableau disparait (pas immédiatement), l'affichage passe en mode "basique" :
Image
Testé sous Chrome et Firefox, même souci en mode Dashboard et Design.
Ai-je loupé quelque chose ?

Merci.
DIY 4*2GHz - 4Go RAM - SSD
- ctrl 1-wire Dallas + IPX800 + X880
- ctrl RFXcom + Oregon (température) + Anémomètre
- ctrl Gen5 + Wallplug + fgrm-222 + Benext + Everspring AN157-6 + Aeon Key Fob+ ...

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

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par winhex » 20 janv. 2019, 22:49

non c'est normal, c'est pas le mode basique (preuve desactive le tableau "pas d'inquietude tous tes param reste")
je desactive quand je veux aggrandir la tuile et ensuite je réactive

si tu veux des lignes, tailles largeur,hauteur il faut joué du css.

dvb
Actif
Messages : 1442
Inscription : 15 févr. 2015, 22:50

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par dvb » 20 janv. 2019, 22:57

Ah OK !
J'ai vérifié entre temps, les commandes css comme la couleur de fond de la cellule sont fonctionnelles.
En revanche, tu sais juste me dire ou trouver un exemple de commande pour matérialiser les cellules du tableau ?
Je débute, cela me mettra sur la voie ...

Merci.
DIY 4*2GHz - 4Go RAM - SSD
- ctrl 1-wire Dallas + IPX800 + X880
- ctrl RFXcom + Oregon (température) + Anémomètre
- ctrl Gen5 + Wallplug + fgrm-222 + Benext + Everspring AN157-6 + Aeon Key Fob+ ...

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

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par winhex » 20 janv. 2019, 23:05

c'est quoi matérialiser ?
ça?
texte

Code : Tout sélectionner

Salle à <br/>manger
css

Code : Tout sélectionner

height:80px;font-weight: bold;text-align: center;transform: rotate(315deg);
ou l'info précédente

désactiver tableau
sauvegarde
retour objet de l'équipement (en bazar) dashboard
crayon "en haut à droite"
agrandir ou diminuer (hauteur/largeur) la tuile
désactiver le mode crayon
actualiser page (pour verif)
retour pour activation mode tableau
sauvegarde

dvb
Actif
Messages : 1442
Inscription : 15 févr. 2015, 22:50

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par dvb » 20 janv. 2019, 23:34

Avoir le look tableau en mode Dashboard et Design, c'est à dire voir la délimitation des cellules.

J'ai compris qu'il faut mettre du css à plusieurs endroits, en fonction du besoin : dans "style général des cases", "style du tableau", etc...).

J'ai commencé à tester en mettant ça dans style général :
padding:1px 1px;width:64px;line-height:4px;border:2px dotted white;
cela commence à prendre forme...

Je vais relire le post et m'imprégner des exemples, il me semble avoir vu un lien vers une page d'explications css.
DIY 4*2GHz - 4Go RAM - SSD
- ctrl 1-wire Dallas + IPX800 + X880
- ctrl RFXcom + Oregon (température) + Anémomètre
- ctrl Gen5 + Wallplug + fgrm-222 + Benext + Everspring AN157-6 + Aeon Key Fob+ ...

dvb
Actif
Messages : 1442
Inscription : 15 févr. 2015, 22:50

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par dvb » 21 janv. 2019, 23:45

Bon ça y est, j'ai compris les rouages... à moi de jouer maintenant.
(Il faut juste être mis sur la voie, et relire le post tranquillement).

Merci pour le coup de main ;)
DIY 4*2GHz - 4Go RAM - SSD
- ctrl 1-wire Dallas + IPX800 + X880
- ctrl RFXcom + Oregon (température) + Anémomètre
- ctrl Gen5 + Wallplug + fgrm-222 + Benext + Everspring AN157-6 + Aeon Key Fob+ ...

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

Re: Widget - Tableau - CSS Jeedom v3.1.x

Message par winhex » 22 janv. 2019, 00:09

déjà tu as fait le plus dur
trouver le bon sujet.

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

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