DESIGN - CSS sur un design donné

Tags: #<Tag:0x00007fcbbb51b9c0>

Bonjour à tous,

Pour mon design, j’ai réussi à appliquer des CSS globaux via REGLAGES/SYSTEME/CONFIGURATION/INTERFACE/PERSONNALISATION AVANCEE sans problèmes et tout fonctionne en utilisant l’entête [data-page=« plan »].

J’aimerai toutefois que sur uniquement un design précis, la couleur du texte par défaut soit différentes.
J’ai essayé avec le planheader_id mais sans succès.

Quelqu’un pourrais t’il m’aider?

Merci à tous

Hello,

J’ai eu le même besoin que toi lors de la création de mes designs et n’ai malheureusement pas trouvé de façon « officielle » pour intégrer un style CSS dans un design.
Après quelque recherches, j’ai trouvé une solution:

  • Ajouter un composant « Texte/Html » à un endroit « vide » de ton design
  • Le configurer pour faire en sorte qu’il ne se voit pas (check box « transparent » ou simplement la couleur de fond)
  • Y mettre ta feuille de style CSS avec comme sélecteur de base #div_pageContainer pour que le style ne s’applique qu’au contenu du design et non à l’ensemble de la page (tu peux ajouter à la suite d’autre sélecteurs pour limiter l’application de ton style).

Et voilà, tu as la possibilité d’ajouter des styles personnalisés pour ton design. Pour ma part, je voulais donner une autre couleur automatiquement à tous les icones du design. Voilà ce que ça donne:
Dans la partie « Personalisation Jeedom », j’ai ajouté le style suivant:
:root { --galaxytab-txt-color: #f2f2f2; --galaxytab-link-color: #f2f2f2; --galaxytab-icon-color: #f2f2f2; --iphone-txt-color: white; --iphone-link-color: white; --iphone-icon-color: white; }

et dans le composant html des design pour mon galaxy tab:
<style> #div_pageContainer i.icon { color: var(--galaxytab-icon-color); } </style>

Maintenant tous mes icones ont la couleur « #f2f2f2 ». Il me suffit de changer la valeur de « galaxytab-icon-color » pour que tous les icones de mes designs pour le galaxy tab soient corrigés.

J’espère que ça va t’aider…

Jean-Philippe

Edit: il peut être nécessaire d’ajouter la propriété « !important » pour que le style soit bien pris en considération.