3 cadres pour votre design Jeedom
Vous vous souvenez du menu « bubble » ? Il se trouve qu’il a connu un certain succès. Du coup, je vous propose aujourd’hui des cadres pour votre design Jeedom. L’idée est de compléter votre design en conservant ce même style dark avec des boxes qui pourront accueillir vos affichages d’équipements. (J’appelle box ce que d’autres appèleraient cadre, conteneur, ou frame, à vous de choisir :))
Petite démo des 3 cadres pour design Jeedom
Vous trouverez plus les sources de 3 styles de cadre pour compléter votre design qui se veulent responsive, dans les mêmes codes couleurs et adaptables à vos icônes.
Comment les « installer » ?
Télécharger “Archive Box Bubble” box-dark.css-1.zip – Téléchargé 798 fois – 2 Ko
Tout commence avec un fichier css à stocker avec jeexplorer dans le dossier mytheme, si vous avez suivi la même logique que moi dans l’article initial sur le menu.
Puis maintenant, rendez vous dans votre design, pour y ajouter un champ text/html après être passé en mode édition.
Box simple
Et voici le code html à ajouter.
<!-- import de la police Montserrat -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<!-- import du fichier css -->
<link rel="stylesheet" href="mytheme/box-dark.css" type="text/css" media="screen" />
<div class="light-box">
<!-- Titre -->
<p align="left" style= "">
Chambre
</p>
</div>Box complète – style 1
Et voici le code html à ajouter. L’import n’est pas obligatoire à chaque fois, à ma connaissance, du moment où vous l’avez fait lors de la création de votre première box.
<!-- import de la police Montserrat si besoin -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<!-- import du fichier css si besoin -->
<link rel="stylesheet" href="mytheme/box-dark.css" type="text/css" media="screen" />
<div class="content-box">
<div class="box-upper-section">
<div>
<i class="fa fa-home"></i> <!-- Icone à modifier -->
<span>LOREM</span> <!-- Titre -->
</div>
</div>
<div class="divider div-transparent div-arrow-down"/>
<div class="box-lower-section">
<span>IPSUM</span> <!-- Contenu -->
</div>
</div>Box complète – style 2
Et voici le code html à ajouter.
<!-- import de la police Montserrat si besoin -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<!-- import du fichier css si besoin -->
<link rel="stylesheet" href="mytheme/box-dark.css" type="text/css" media="screen" />
<div class="content-box">
<div class="box-upper-section">
<div>
<i class="fa fa-dark-round fa-home"></i> <!-- Icone à modifier -->
<span>LOREM</span> <!-- Titre -->
</div>
</div>
<div class="divider div-transparent div-arrow-down"/>
<div class="box-lower-section">
<span>IPSUM</span> <!-- Contenu -->
</div>
</div>Box complète – style 2 centré
Je vous propose ici une alternative au style 2 mais avec un titre de boîte centré. C’est un ajout récent qui vous nécessitera de télécharger la dernière version du fichier box-dark.css.
Et voici les sources :
<!-- import de la police Montserrat si besoin -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<!-- import du fichier css si besoin -->
<link rel="stylesheet" href="mytheme/box-dark.css" type="text/css" media="screen" />
<div class="content-box box-centered">
<div class="box-upper-section">
<i class="fa fa-dark-round fa-home"></i> <!-- Icone à modifier -->
<div class="box-upper-section-title">LOREM</div> <!-- Titre -->
</div>
<div class="divider div-transparent div-arrow-down"/>
<div class="box-lower-section">
<span>IPSUM</span> <!-- Contenu -->
</div>
</div>Conclusion
J’espère que ces 3 cadres pour votre design Jeedom vous aideront à avancer et stimuler votre créativité.
- Ils s’adapteront automatiquement aux dimensions de votre cadre
- les icônes sont tout à fait modifiables, que ce soit en utilisant une librairie comme dans cet article, ou vos propres icônes.
- les couleurs sont modifiables dans le fichier css
N’hésitez pas à poster vos feedback ou vos designs en commentaires ou sur ma page Facebook.
A bientôt
/F
18 réflexions sur « 3 cadres pour votre design Jeedom »
Hello,
Sur tes versions style 1 et 2, tu mets dans le code HTML « import fichier css si besoin », du coup j’ai essayé de supprimer la balise « Link […] css…] et….
j’ai pas vu de différence. Qu’est-ce qu’il aurait du se passer une fois cette balise supprimée du HTML ?
Sinon Beau travail encore une fois (Y)
Merci pour le feedback, je vais clarifier dans l’article.
Du moment ou tu fais un import du fichier css lors de la création du premier cadre, tu n’as pas besoin de remettre la balise link et donc importer le fichier à nouveau. Je voulais dire que c’est à chacun de voir s’il veut importer le css à chaque cadre où non. Le faire te permet en cas de suppression du cadre ou il y avait l’import de ne pas être embêter, ne pas le faire, te fait gagner très sensiblement en performance.
Hello,
Et du coup avec cette façon de procéder, est-il possible d’utiliser plusieurs cadres avec des variantes de CSS différentes sur un même design ? Parce que j’ai le résultat suivant :
– j’utilise ton CSS « box-dark » et j’ai créé une variante « box-dark-clair » (sur lequel je joue sur la transparence du titre)
– lorsque sur un design j’affecte à un 1er cadre « box-dark » et à un second cadre « box-dark-clair », le premier cadre se voit aussi appliqué « box-dark-clair ». Si j’édite le HTML du 1er (en faisant uniquement une sauvegarde, sans toucher au code », les 2 cadres se voient affecter le CSS « box-dark » (donc le CSS du dernier HTML sauvegardé se voit appliquer à tous mes cadres du design en question 🙁 )
– par contre sur 2 design différents pas de problème (enfin, j’arrive à avoir un design full « box-dark » et un full « box-dark-clair », mais pas les 2 variantes sur la même vue) (cette remarque me laisse penser que ça ne peut donc pas venir du cache).
Tu as une idée de ce qui cloche ?
Merci 😉
Roman
Bonjour Roman,
Désolé du retard de ma réponse, ton commentaire avait été considéré comme indésirable par le système. Etrange.
Oui je vois assez bien, plutôt que dupliqué le fichier, il faudrait changer le nom des classes css type : box-dark ou box-light car c’est elle qui appelle le style css. De plus, c’est le dernier style qui s’applique d’où le fait que quand tu appeles les 2, le dernier s’applique à l’ensemble des classes. Est-ce que ca répond à ta question ?
Euh moyen LoL.
« il faudrait changer le nom des classes css type : box-dark ou box-light »
Où ça ? (quelle ligne de quel fichier, HTML ou CSS ?)
« car c’est elle qui appelle le style css » => C’est pas le contenu du HREF de la ligne 4 du code HTML qui appelle le CSS ??
Merci
Ok 🙂
dans ton fichier box-dark, il faudrait que tu ajoute un suffixe à chaque classe du genre « -dark ». Puis tu dupliques dans le même fichier le contenu et tu changes le suffixe du contenu collé par « -light » et donc comme cela tu as des classes pour un thème dark et pour un thème light. Dans ton html, il te suffit d’utiliser le suffixe en ligne avec le thème que tu veux 🙂
Est-ce plus clair ?
aaaaaah mais punaise je comprend mieux maintenant, et ça ouvre le champ des possibilités cette histoire !!! (https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_de_classe m’a aussi bien aidé à imager ton explication, et aussi comprendre/découvrir les classe multiples)
C’est parfait, ça fonctionne !
Merci ! 😉 😀 🙂
Bonjour,
Je suis vraiment Fan de ton site et de ses explications. Parfait pour les débutants comme moi.
J’ai par contre une petite question sur comment mettre du contenu dans le cadre. En effet, aujourd’hui je fais le cadre, j’enlève le contenu et ensuite j’ajoute dans le design les éléments que je veux afficher.
Le problème est que le contenu et le cadre ne sont pas liés et quand je les bouge cela est vite galère.
Ma question était de savoir si on pouvait écrire directement dans le code HTML pour obtenir par exemple la température d’un capteur ?
Encore merci pour ton partage. On a vraiment besoin de gars comme toi.
Merci beaucoup pour le feedback 🙂
La solution que tu as choisis reste la plus facile d’implémentation et la plus modulable à l’heure d’aujourd’hui. Tu peux ensuite appliquer des widgets à tes équipements pour leur donner un style adapté à ton thème.
L’autre option que je vois est de structurer l’information de ton dashboard grâce à des virtuels rassemblant les informations à afficher par bloc et appliquer ces cadres dans des widgets ou style des virtuels.
Encore merci
Merci pour les explications.
Je reste comme cela alors.
Et merci de continuer à partager les supers Designs
Bonjour et encore merci pour ce partage !
Je trouve les cadres très pratique, je m’interroge néanmoins sur la modifications des couleurs,
Peut on modifier le fichier css directement depuis jeeexplorer ? même apres avoir créer des cadres, car j’ai tenté et ca ne semble pas modifier en temps réel mes cadres, (j’ai cru comprendre qu’il n’y avait qu’un import qu’une seule fois ? )
Et peut on dupliquer le fichier CSS en le renommant et avec des couleurs différents ? car les tests que j’ai fait j’ai constaté que des que je modifie un cadre ça semble les modifier tous,
Bref merci du coup de main si possible,
Bonsoir François,
Merci pour le feedback.
Oui tu peux directement modifier le fichier dans Jeexplorer, par contre, il te faudra bien rafraîchir la page avec Ctrl+F5 voir même vider le cache pour que les modifications soient prises en compte.
Oui tu peux dupliquer le fichier css, mais le mieux est de dupliquer les classes / changer leur nom à l’intérieur du fichier css, puis les modifier. Dis moi ce que tu souhaites faire et je pourrais peut être t’aider et te montrer un exemple 🙂
Hello,
J’ai le même problème avec le résultat suivant :
– j’utilise ton CSS « box-dark » et j’ai créé une variante « box-dark-clair » (sur lequel je joue sur la transparence du titre)
– lorsque sur un design j’affecte à un 1er cadre « box-dark » et à un second cadre « box-dark-clair », le premier cadre se voit aussi appliqué « box-dark-clair ». Si j’édite le HTML du 1er (en faisant uniquement une sauvegarde, sans toucher au code », les 2 cadres se voient affecter le CSS « box-dark » (donc le CSS du dernier HTML sauvegardé se voit appliquer à tous mes cadres du design en question 🙁 )
– par contre sur 2 design différents pas de problème (enfin, j’arrive à avoir un design full « box-dark » et un full « box-dark-clair », mais pas les 2 variantes sur la même vue) (cette remarque me laisse penser que ça ne peut donc pas venir du cache).
je vois pas ce que tu veux dire par « dupliquer les classes / changer leur nom à l’intérieur »
Merci 😉
Roman
Je tenais simplement à te remercier pour tout ton site, c’est super beau et c’est vraiment d’une grande aide.
Merci Anthony pour ce feedback 🙂
Si c’est utile, c’est chouette !
Merci, c’est vraiment appréciable d’avoir des personnes comme vous qui partagent leurs connaissances.
Merci pour le feedback 🙂
Merci, C’est top !
Depuis la dernière mise a jour en 4.1.20 le contenu du cadre est devenu blanc !
Si vous avez une idée pour régler le probleme =)
Merci !