CSS / html pour les nuls - cas pratique mise en forme de widgets en cascade

[Seb54]

Salut la commu. Je patauge, je ne trouve rien qui me permette de me débrouiller.
Je voudrais quelques pistes svp pour que je puisse avancer.

Je cherche à appliquer une mise en forme sur plusieurs composants d’un design à la fois, par exemple sur mon design volets, je voudrais mettre arrondis/transparence/pourtour blanc… sur les widgets et les textes :

Apparemment on peut créer un fichier .css avec les paramètres et l’appeler en html dans la configuration des composants.

J’ai donc créé un fichier perso.css dans jeedom/html/montheme (dans mon cas) comprenant :

<style>
  .white-rounded {
    background-color: black;
    opacity 0.6;
    border: 1px solid white;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
</style>

Je sais que là vous saignez déjà des yeux mais svp attendez la fin pour voir si au moins la logique est bonne.

Puis j’appelle ces paramètres dans la configuration du composant (par exemple ici pour le cadre texte « cuisine » :

<div >
<p> Cuisine </p>
</div>

<LINK href="montheme/perso.css" rel="stylesheet" type="text/css">

Bien sûr ça ne fonctionne pas et j’ai trop d’inconnues pour avancer.

• est-ce la bonne logique?
• faut il créer le css dans un fichier ou dans le menu personnalisation avancée?
• pour les composants n’ayant pas de html, est il possible d’appeler un css extérieur dans la case CSSpersonnalisé, sans avoir à tout y détailler ?

Quand j’y verrai plus clair sur ces grands principes, je pourrai plus efficacement faire mes recherches.

Merci beaucoup pour vos conseils.

[pifou]

Bonjour,

Je ne suis pas un pro du css (et mes yeux vont bien merci) mais il me semble qu’il ne faut pas mettre les balises xml dans le fichier *.css
Ensuite, je ne sais pas si tu peux référencer n’importe où un fichier css avec <link …/> il me semble que ça devrait être dans le header de la page html, or toi tu l’ajoute dans le body…

Mais en fait je crois que tu n’a pas besoin de créer ton propre fichier, il te suffit de mettre ton code css dans le menu Réglage / Système / Configuration avancée, dans le fichier custom.css existant.

Mais, je ne sais pas comment tu devrais faire pour appliquer ton CSS, par exemple la classe de style .white-rounded sur un composant existant.

[Seb54]

ok merci pour ces commentaires

[Phpvarious]

Bonjour,

Je partirai aussi du fichier custom.css.

Avant tout il faudrait plutôt cibler la classe que tu souhaites atteindre :

exemple pour une info numerique avec le widget défaut du core

Je vais donc ajouter dans mon custom css :

[data-page="plan"] .content-xs {
  background-color: black;
  opacity 0.6;
  border: 1px solid white;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

[data-page="plan"] → permet d’appliquer le css que si on est sur un design.
.content-xs → selecteur sur lequel les styles vont s’appliquer.

Le css sera appliqué a tous les éléments qui contiennent la classe content-xs, donc même ceux qui sont autres que tes équipements volet.

Pour cela il existe un autre moyen de rajouter un selecteur perso, mais attention ceci fonctionne que si ton importe l’équipement globale et pas que la commande dans le design.

Donc on va rajouter le sélecteur perso, celui-ci sera ajouter dans l’équipement globale donc le css donnera ceci :

[data-page="plan"] .white-rounded .content-xs {
  background-color: black;
  opacity 0.6;
  border: 1px solid white;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

[data-page="plan"] → permet d’appliquer le css que si on est sur un design.
.white-rounded → selecteur perso qui permettra d’identifier les éléments ou appliquer le css.
.content-xs → selecteur sur lequel les styles vont s’appliquer.

une fois sauvegarder il faudra maintenant intégrer ce selecteur, rien de bien méchant, il suffit simplement d’ajouter un paramètre optionnel sur l’équipement, j’insiste bien sur équipement et pas sur la commande, dans mon cas je vais le faire que sur mon équipement Test_css_perso :

3. j’ajoute le paramètre dashboard_class, (attention ce nom de paramètre n’est pas un nom que j’ai choisi au hasard, c’est un paramètre qui est reconnu par le core) et je lui met la valeur de notre selecteur white-rounded

Et voila, plus cas verifier le résultat :

Il y a bien que mon équipement Test_css_perso qui est impacté par mon css custom

Pour aller plus loin il suffit maintenant de cibler tous les éléments :

[data-page="plan"] .white-rounded .content-xs,
[data-page="plan"] .white-rounded .content-sm {
  background-color: black;
  opacity 0.6;
  border: 1px solid white;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Résultat :

[Seb54]

ah ouais quand même! c’est plus velu que je pensais. En tout cas merci pour ce trésor d’informations, je me mets dessus dès que possible. Avec tout ça je ne peux que réussir

[Seb54]

@Phpvarious

Avant tout il faudrait plutôt cibler la classe que tu souhaites atteindre :

juste une question stp avant de plonger dans mes tests, comment connaître la classe d’un composant sur un design? quand je clic droit sur un texte par exemple, je n’ai pas « inspecter » comme j’ai depuis un widget par defaut :

[Phpvarious]

Normal, tu peux pas le faire a cet endroit, car il y a un contexMenu.
Fait le en bordure de design,
Ou touche rapide CTRL + Alt + i
Ou dans les paramètres du navigateur.

[noodom]

Ou F12.
Ou command-option-i sur Mac

[Seb54]

p####n ça marche merci !!
J’ai mis ce code

[data-page="plan"] .white-rounded .cmds ,
[data-page="plan"] .white-rounded .widget-name,
[data-page="plan"] .white-rounded .content-sm {
  background-color: black;
  opacity 0.6;
  border: 1px solid white;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Mais la transparence n’est pas prise en compte, et le name n’est pas arrondi.

et quand je mets « masquer le nom », la taille change et je me retrouve avec un ascenseur suer la droite

[noodom]

Tu peux essayer de remplacer :

background-color: black;
opacity 0.6;

par

background-color: rgba(0, 0, 0, 0.6);

et/ou ajouter !important (si avec le debugger, ton css est barré) :

background-color: rgba(0, 0, 0, 0.5); !important;

Pareil pour l’arrondi :

border-radius: 10px !important;

J’ai l’impression que c’est pareil pour ton box-shadow aussi qui ne semble pas pris en compte.

[Seb54]

vous êtes au top merci.
J’avance bien, mais je bute sur les textes. J’ai bien trouvé leur classe (text-widget), je l’ai ajouté au CSS :

[data-page="plan"] .white-rounded .cmds ,  /* bloc des commandes du widget natif */
[data-page="plan"] .white-rounded .widget-name,  /* ligne nom du widget natif */
[data-page="plan"] .white-rounded .text-widget,  /* bloc texte sur design */
[data-page="plan"] .white-rounded .content-sm {
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid white;
  border-radius: 10px !important;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  overflow-y: hidden !important; /* pour effacer l'ascenseur !! :D */
}

J’ai appelé le CSS dans la config du texte (sans le point devant) :

et rien n’y fait…

Je n’ai pas trouvé de post sur ce point précis, je ne vois pas ce qui m’échappe

[Phpvarious]

@Seb54

et rien n’y fait…

Tu as un text-widget sur cette capture ? car le texte semble provenir du widget !

@Seb54

J’ai appelé le CSS dans la config du texte (sans le point devant) :

Cette case sert a appliquer le css perso (case du dessus) a un sélecteur bien précis, donc pas adapté a ce que tu veux faire.

Il faut simplement que tu utilise les options disponibles, exemple :

[Seb54]

@Phpvarious

Tu as un text-widget sur cette capture ? car le texte semble provenir du widget !

oui sinon le titre natif du widget fait que le widget est trop grand : cuisine en text-widget, salon en titre natif (qui d’ailleurs n’est plus l’objet « salon » mais l’équipement « volet ») :

@Phpvarious

Il faut simplement que tu utilise les options disponibles,

ok mais l’idée est d’avoir tous les text-widget modifiés en même temps avec des paramètres « centralisés », ce n’est pas possible?

[Seb54]

j’ai trouvé quelque chose :

body[data-page="plan"] .text-widget {
  border-radius: 15px !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid white;
  overflow: hidden !important;
}

Mais ça applique le style en brutal sur tous les textes.
Je continue à chercher qqch du genre body[data-page="plan"] .text-widget.white-rounded et à cibler le white-rounded dans le texte, peut être avec link? je vais creuser

[Phpvarious]

[data-page="plan"] .text-widget .white-rounded {
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid white;
  border-radius: 10px !important;
  width: 100%;
  height: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  overflow-y: hidden !important; /* pour effacer l'ascenseur !! :D */
}

Puis direct dans le texte :

[Seb54]

t’es au top merci!!
C’est parfait.
Quand je vois comment j’ai galéré pour 3 paramètres, et quand je vois la multitude de paramètres disponibles, je me dis que je vais en rester là pour le moment.
Sinon j’ai de bonnes chances de tout faire planter

Je viens de trop loin, je vais me contenter de mes design tels quels, mais déjà beaucoup plus beaux!