Améliorer son design Jeedom avec un style light

Améliorer son design Jeedom avec un style light

J’espère que votre confinement se passe bien, de mon côté, j’en profite pour repenser et refaire mon design Jeedom (ou en tout cas réaliser des alternatives et vous les partager par la même occasion :)).

L’idée est de partir sur un style assez light dans les tons gris pour coller avec un potentiel affichage sur Google Nest Hub Max. Je vais essayer de vous partager étape par étape mes avancées.

Un menu dans les tons « Light »

Ce menu vertical a pour objectif d’être relativement fin pour maximiser l’usage horizontal de l’écran pour afficher vos équipement. Toutefois quand on touche la partie basse ou passe la souris sur le menu il s’étend pour avoir les détails.

Vidéo de comment le menu peut fonctionner.

Et voici les sources de ce menu

Télécharger “Archive Menu Light” Archive-Menu-Light-V1.2.zip – Téléchargé 90 fois – 3 KB

Comment « installer » ce menu dans votre design Jeedom Light ?

En attendant, il vous faudra le plugin Jeexplorer pour déposer les fichiers css et js dans un dossier à la racine telle que sur la capture d’écran : mytheme/menu_light/ …

Vue Jeexplorer

Maintenant rendez vous dans le design en question, il vous faudra passer en mode édition en faisant clic droit au milieu de votre écran :

mode édition

Puis il vous faudra ajouter un élément Texte / Html toujours grâce au clic droit :

ajout texte / html

Il vous faudra ensuite faire un nouveau clic droit sur le texte qui est apparu pour afficher les paramètres :

Paramètre d'affichage

Comme nous sommes dans le cas d’un menu qui s’ouvrira au toucher ou au passage de la souris, et donc potentiellement passer au-dessus des box équipements ou de votre plan. De ce fait, il vous faudra passer la position à 3. Puis dans le champs texte vous pourrez copié/collé le contenu du fichier html :

ajout de l'html et changement de position

Il vous faudra être vigilant sur les chemins d’accès aux fichiers css. Dans mon cas, mytheme/menu_light/menu.css.

Si vous souhaitez changer ou ajouter des icônes … voici un article dédié à la librairie que j’utilise.

Personnaliser l’affichage des équipements

Toujours dans le même esprit, je souhaitais un style simple, moderne et gris pour afficher mes équipements dans mon design Jeedom.

Comment « installer » cette box ?

Même procédure pour ajouter un text/html et ouvrir les paramètres d’affichage.

Paramètre d'affichage

Veillez bien à ce que la position soit inférieure à 3 afin de permettre au menu de pouvoir se dérouler par dessus. Largeur et Hauteur vous permettront de manipuler la taille de votre box avec finesse. Dans le champ texte, il vous faudra ajouter le code suivant :

<div style= "width:100%; height:100%;
  background-color: #F7F7F7;
  border-radius: 5px;
  box-shadow: rgba(0,0,0,.2) 0 4px 4px -2px;
  color: #919495;
  font-weight: normal;
  text-align: left;
  overflow:auto;
  display:block;
  ">

  <!-- TITRE DE VOTRE BOX -->
  <p align="left" style= "
      border: 1px solid #999999;
      border-radius: 3px;
      padding: 0.3rem;
      margin-left:20px;
      margin-top:20px;
      text-transform: uppercase;
      font-family: Arial;
      font-size: 10px;
      display:inline-block;
  ">
TITRE DE VOTRE BOX
  </p>

  <!-- CONTENU DE VOTRE BOX-->
  <div style= "min-height:100px; margin-left: 20px"> 

  </div>

</div>

Et voilà votre box devrait avoir un rendu semblable à mes captures d’écran.

Augmenter la taille de vos icônes pour un affichage sur tablette simplifié.

Suite au super commentaire d’un utilisateur du menu, ça me semble pertinent de vous partager les modifications comment agrandir les icônes et texte pour améliorer l’usage sur tablette de ce design Jeedom Light.

<!-- ligne 53 du menu.css -->
<!-- changement de la taille de l'icône -->
font-size:20px;

<!-- ligne 104 du menu.css -->
<!-- augmentation de la hauteur de la ligne -->
height: 50px;

<!-- ligne 109 du menu.css -->
<!-- augmentation de la taille du libellé -->
font-size: 15px;

N’hésitez pas à me faire vos feedbacks !

A bientôt
/F

16 réactions au sujet de « Améliorer son design Jeedom avec un style light »

  1. Bonjour et merci pour ce partage, c’est exactement ce qu’il me fallait vous êtes au top.

    Avons nous la possibilité de changer un icone facilement ?

  2. Hello

    Juste pour info, on a un double loading de font-awesome et de la font google, une fois dans menu.css et une fois dans ton code.
    Faut l’enlever à un endroit, histoire d’optimiser un chouilla le truc.

    Par ailleurs, il faudrait prévoir un ou deux pixels sous le menu pour pouvoir avoir accès au layer du design et faire un clic droit / Edition en cas de souci.
    Du coup, j’ai mis un height:595px (sur une hauteur max de 600) et un fond de la même couleur que le menu.
    en hover le height est forcé à 600px

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *