Forum Communauté Jeedom

Florian33 a écrit : ↑

04 mars 2018, 12:28

J'ai pu voir un plugin thèmes dans des tuto mais... introuvable :/

benj29 a écrit : ↑

26 févr. 2018, 14:23

Trallius a écrit : ↑

23 févr. 2018, 15:39

Bonjour benj29,

Débutant sous Jeedom depuis quelques semaines, mais ayant mis en place déjà pas mal de choses, je m'attaque maintenant au design iPhone et je vous avouerai que je trouve le votre excellent !!! Et j'ai du coup quelques questions

- Tous les cadres sont bien dans l'image de fond ou ce sont des contours de virtuel ?
- Tous les petits icônes (résumé, présence) sont fait comment ? (X virtuel pour X icônes ? ou 1 avec gestion de colonnes et lignes ?)
- Concernant les icônes justement, pouvez-vous me dire où vous les avez trouvé ? ils sont simple et je serais intéressé pour les utiliser
- Et la barre de menu du haut est gérée comment ? inclus dans le fond avec des liens ? ...

Merci d'avance pour votre réponse !

Salut, alors dans l'ordre.

Non les cadres viennent de l'excellent travail de FB33$. Chacun est redimensionnable. Je les ai juste modifié en fonction de mon utilisation : fond blanc, fond noir, avec titre, sans titre etc.

exemple : fond noir (téléphone) avec titre (ajoute un texte et mets ce code) :
Tu peux modifier l'épaisseur de l'ombre (3/3) ou sa couleur (255x3)
Pareil pour le titre (opacité à 0.8, 30 de haut)
Et pareil pour le corps du cadre (0x3 .5 d'opacité)

Code : Tout sélectionner

<div style=" width:100%; box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.5);">
                <div style=" height:30px; width:30px; position:absolute; margin-top:6px; margin-left:5px; opacity:0.8; max-width:100%; height:auto;">
                <i class="fa fa-lock" style="font-size:15px;color:white;"></i>
                </div>
                <div align=center style="color:rgba(255,255,255,0.8); font-size:16px; height:30px; background-color: rgba(0,0,0,0.6); padding-top:5px; font-family:Trebuchet MS; font-variant: small-caps; font-weight:normal;">
                <strong>Alarme</strong>
                </div>
                <div style="height:189px;  background-color: rgba(0,0,0,0.5);">
                
                </div>
</div>

qui donne le cadre alarme de la copie d'écran plus haut.

Par exemple un autre cadre que j'utilise pour mes tablettes domotiques en fond blanc (je t'ai mis des commentaires) :

Code : Tout sélectionner

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

<!-- cadre global --> 
<div style=" width:100%; box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.3);">

      <!-- icone à gauche --> 
      <div style=" height:30px; width:30px; position:absolute; margin-top:6px; margin-left:5px; opacity:0.8; max-width:100%; height:auto;">
	  <i class="icon meteo-nuage-soleil-pluie" style="font-size:20px;color:black;"></i>
      </div>
      
      <!-- barre de titre  --> 
      <div align=center style="color:rgba(0,0,0,1); font-size:20px; height:30px; background-color: rgba(0,0,0,0.2); padding-top:0px; font-family:Montserrat, Arial; font-variant: small-caps; font-weight:normal;">
      <strong>Météo & Today</strong>
      </div>
      
      <!-- carré de sélection pour le déplacer  --> 
      <div style="height:170px;  background-color: rgba(255,255,255,0.3);">
      </div>
  
</div>

qui donne ça :



Pour travailler les couleurs rdv ici :
https://htmlcolorcodes.com/fr/tableau-de-couleur/

les petites icones ça dépend : soit je les avais dans mes virtuels, soit je les ai ajoutées.

J'ai trois sources :
- jeedom
dans ce cas tu mets ce code et tu choisis ton icone (son nom) :

Code : Tout sélectionner

<i class="icon techno-heating3" style="font-size:20px;color:white;"></i>

- awesome plus complet et google
tu fais le link adéquat puis tu peux utiliser :

Code : Tout sélectionner

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

et tu les appelles :

Code : Tout sélectionner

<i class="material-icons" style="font-size:20px;color:white;">ondemand_video</i>
<i class="	fa fa-video-camera-o" style="font-size:20px;color:red;"></i>

Plus d'info là :
https://www.w3schools.com/icons/icons_reference.asp

Même principe pour les polices :
https://fonts.google.com/?selection.fam ... i,900,900i

Et enfin pour le menu, du html qui appelle des icones... comme dit plus haut !

Code : Tout sélectionner

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="index.php?v=d&p=plan&plan_id=10"><i class="fa fa-home fa-lg" aria-hidden="true"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="index.php?v=d&p=plan&plan_id=12"><i class="fa fa-map-marker fa-lg" aria-hidden="true"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="index.php?v=d&p=plan&plan_id=13"><i class="fa fa-video-camera fa-lg" aria-hidden="true"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="index.php?v=d&p=plan&plan_id=14"><i class="fa fa-thermometer-three-quarters fa-lg" aria-hidden="true"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="index.php?v=d&p=plan&plan_id=16"><i class="fa fa-bolt fa-lg" aria-hidden="true"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="index.php?v=d&p=plan&plan_id=17"><i class="fa fa-lightbulb-o fa-lg" aria-hidden="true"></i></a>
  </li>
    <li class="nav-item">
    <a class="nav-link" href="index.php?v=d&p=plan&plan_id=18"><i class="fa fa-cogs fa-lg" aria-hidden="true"></i></a>
  </li>
</ul>

Autre exemple, j'ai fait mes icones en partie pour mes tablettes et ça donne ça :



Je débute aussi sur les designs... j'ai appris peu à peu et en lisant les posts des autres !