Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Toute la communauté vous remercie

[Présentation] F$B33

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
Avatar de l’utilisateur
Poumi
Timide
Messages : 301
Inscription : 21 mars 2019, 22:41

Re: [Présentation] F$B33

Message par Poumi » 01 juin 2019, 19:35

Antoinekl1 a écrit :
19 avr. 2019, 09:20
Bonjour à tous

Je me suis permis ces quelques modifications pour mon usage perso, alors je partage si ca peut intéresser qqun

Un CSS pour les fenêtres, vous pouvez ajouter d'autre div.icon_XXX et le copier à la racine de montheme

Attention, j'ai un peu modifié les styles pour mon usage, par rapport aux styles d'origines, il suffit de remettre les styles du html d'origine

fenetre.css

Code : Tout sélectionner

	div.bandeau {
		width: 100%;
		box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.5);
	}
	
	div.imagette {
		height: 30px;
		width: 30px;
		position: absolute;
		margin-top: 6px;
		margin-left: 5px;
		opacity: 0.8;
		max-width: 100%;
		height: auto;
	}


	div.titre {
      	text-align: center;
		color: rgba(0,0,0,1);
      	background-color: rgba(255,255,255,0.5);
		font-size: 16px;
		height: 20px;
		padding-top: 0px;
		font-family: "Arial";
		font-weight: normal;
	}
	
	div.contenu {
		background-color: rgba(0,0,0,0.5);
	}


	div.icon_home {
      background-image: url("images/icon_home.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

	div.icon_camera {
      background-image: url("images/icon_camera.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

	div.icon_chauffage {
      background-image: url("images/icon_chauffage.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

	div.icon_temp {
      background-image: url("images/icon_temp.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

	div.icon_detection {
      background-image: url("images/icon_detection.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

	div.icon_volets {
      background-image: url("images/icon_volets.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

	div.icon_light {
      background-image: url("images/icon_light.png");
      background-size: 30px 30px;
  	  width: 30px;
	  height: 30px;
    }

et le code HTML à mettre dans le design

Code : Tout sélectionner

<LINK href="montheme/fenetre.css" rel="stylesheet" type="text/css">
  
<div class="bandeau">
	<!-- Imagette  -->
	<div class="imagette">
      	<div class="icon_camera"></div> <!-- nom de l'icone -->
    </div>
	<!-- TITRE -->
	<div class="titre">Caméra Devant</div> <!-- Titre du CADRE -->
	<!-- CONTENU -->
	<div class="contenu" style="height: 250px;"> <!-- Modifiez height pour régler la hauteur du cadre -->
	</div>
</div>
plus light et il y a juste le nom de l'icone que vous souhaitez, le titre et la hauteur à modifier
tous le reste se fait dans le CSS, donc si un jour, vous voulez changer d'icone, de couleur, ... une modif dans le CSS est c'est bon partout


pour le menu, j'ai aussi centralisé le code dans un JS

menu_dashH.js

Code : Tout sélectionner

document.getElementById('menu').innerHTML = "<ul class='monmenu'><a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette1'></div></li></a><a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette2'></div></li></a><a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette3'></div></li></a><a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette4'></div></li></a><a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette5'></div></li></a><li class='monmenu_sep' ><div class='imagette0'></div></br></li></ul>";
un peu chiant car tout dans une même ligne mais vous pouvez le garder dans un bloc-note afin de le modifier plus facilement

Code : Tout sélectionner

document.getElementById('menu').innerHTML = "<ul class='monmenu'>
<a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette1'></div></li></a>
<a onClick='planHeader_id=ID_DESIGN displayPlan();'><li class='monmenu'><div class='imagette2'></div></li></a>
<a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette3'></div></li></a>
<a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette4'></div></li></a>
<a onClick='planHeader_id=ID_DESIGN; displayPlan();'><li class='monmenu'><div class='imagette5'></div></li></a>
<li class='monmenu_sep' ><div class='imagette0'></div></br></li></ul>";
le CCS menu_dashH.ccs (attention légèrement personnalisé)

Code : Tout sélectionner


div.menu_top {
	width:800px;
	height:70px;
	background-color:rgba(0,0,0,0.6);
	border-bottom:2px solid rgba(0,0,0,1);

}

div.imagette0 {
    background-image: url("images/icon_blank.png");
    background-size: 50px 50px;
	margin-bottom: 5px;
	opacity: 0.8;
  	width: 50px;
  	height: 50px;
}

div.imagette1 {
    background-image: url("images/icon_home.png");
    background-size: 50px 50px;
	margin-bottom: 0px;
	margin-left: 20px;  
	opacity: 0.8;
  	width: 50px;
  	height: 50px;  
}

div.imagette2 {
    background-image: url("images/icon_detection.png");
    background-size: 50px 50px;
	margin-bottom: 0px;
	margin-left: 20px;  
	opacity: 0.8;
  	width: 50px;
  	height: 50px;  
}

div.imagette3 {
    background-image: url("images/icon_reseau.png");
    background-size: 50px 50px;
	margin-bottom: 0px;
	margin-left: 20px;  
	opacity: 0.8;
  	width: 50px;
  	height: 50px;  
}

div.imagette4 {
    background-image: url("images/icon_cam.png");
    background-size: 50px 50px;
	margin-bottom: 0px;
	margin-left: 20px;  
	opacity: 0.8;
  	width: 50px;
  	height: 50px;  
}

div.imagette5 {
    background-image: url("images/icon_plan.png");
    background-size: 50px 50px;
	margin-bottom: 0px;
	margin-left: 20px;  
	opacity: 0.8;
  	width: 50px;
  	height: 50px;  
}

ul.monmenu ul.monmenu_sep {
	list-style-type:none;
	color:rgba(255,255,255,0.8);
	font-family: "Roboto";
	font-size: 16px;
	font-weight: normal;
  	text-align: center;
}

li.monmenu {
	display:inline-block;
	width: 90px;
	margin-left: 0px;
	text-align: center;
	height: 70px;
	padding-top: 5px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(0,0,0,0.2);
}

li.monmenu:hover {
	background-color: rgba(255,255,255,0.2);
}

li.selected {
	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(255,255,255,0.2);
}

li.monmenu_sep {
	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;
	border-right: 1px solid rgba(0,0,0,0.3);

}

div.bouton {
	opacity: 1;
}
et le code HTML du menu, que l'on met dans ces DESIGN et qui ne bougera plus

Code : Tout sélectionner

<LINK href="montheme/menu_dashH.css" rel="stylesheet" type="text/css">
<script src="montheme/menu_dashH.js"></script>
<div class="menu_top" id="menu">
</div>
je suis content, ca marche nickel
Bonjour,
Je suis parti sur ta méthode du coup, c’est mieux le menu centralisé :)

J’ai juste un soucis: la page en cours ne passe pas en selected sur le menu.
Je cherche mais je ne trouve pas où c’est fait...Si tu pouvais m’aiguiller Un peu ce serait cool 😎

Avatar de l’utilisateur
db2p
Timide
Messages : 129
Inscription : 08 nov. 2017, 13:25
Contact :

Re: [Présentation] F$B33

Message par db2p » 01 juin 2019, 22:37

Salvialf a écrit :
01 juin 2019, 00:18
Oui j'avais fait ces modifs aussi à l'époque :)
ok merci salviaff
merci les gars
jai modifie de mon cote et fonctonne top
moi javais fait d'aapres le 1er code donc garde le cron

mathatak
Timide
Messages : 100
Inscription : 05 juin 2018, 12:37

Re: [Présentation] F$B33

Message par mathatak » 11 juin 2019, 11:19

Bonjour, je tente aujourd'hui de créer mon propre design grâce à ce super Tuto, mais comment faire pour accéder à la racine de Jeedom car le widget "Outil de développement" est introuvable sur la boutique. Merci de votre aide

Avatar de l’utilisateur
noodom
Actif
Messages : 861
Inscription : 13 juil. 2014, 17:25
Contact :

Re: [Présentation] F$B33

Message par noodom » 11 juin 2019, 12:24

Salut,

Tu peux utiliser le plugin équivalent jeeXplorer pour aller dans ton arborescence jeedom.

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3491
Inscription : 23 mai 2015, 08:14

Re: [Présentation] F$B33

Message par Antoinekl1 » 11 juin 2019, 15:28

Poumi a écrit :
01 juin 2019, 19:35

Bonjour,
Je suis parti sur ta méthode du coup, c’est mieux le menu centralisé :)

J’ai juste un soucis: la page en cours ne passe pas en selected sur le menu.
Je cherche mais je ne trouve pas où c’est fait...Si tu pouvais m’aiguiller Un peu ce serait cool 😎

Bonjour

Oui en effet, j'avais pas fait attention à ca, faut que je regarde, ça fonctionne sur le thème d'origine ?
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Avatar de l’utilisateur
Poumi
Timide
Messages : 301
Inscription : 21 mars 2019, 22:41

Re: [Présentation] F$B33

Message par Poumi » 11 juin 2019, 20:21

Vu le tuto oui, il changeait le selected dans le menu en fonction de la vue.

mathatak
Timide
Messages : 100
Inscription : 05 juin 2018, 12:37

Re: [Présentation] F$B33

Message par mathatak » 12 juin 2019, 00:44

Quelqu'un peut il m'expliquer s'il est possible et comment faire pour prendre une info précise dans un plugin, par exemple dans le plugin DOMOGEEK, l'information SAINT DU JOUR et l'afficher dans mon design, style : "le saint du jour est = ....." sans avoir toutes les autres infos du plusgin.

Merci de votre aide

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3491
Inscription : 23 mai 2015, 08:14

Re: [Présentation] F$B33

Message par Antoinekl1 » 12 juin 2019, 10:39

Antoinekl1 a écrit :
11 juin 2019, 15:28
Poumi a écrit :
01 juin 2019, 19:35

Bonjour,
Je suis parti sur ta méthode du coup, c’est mieux le menu centralisé :)

J’ai juste un soucis: la page en cours ne passe pas en selected sur le menu.
Je cherche mais je ne trouve pas où c’est fait...Si tu pouvais m’aiguiller Un peu ce serait cool 😎

Bonjour

Oui en effet, j'avais pas fait attention à ca, faut que je regarde, ça fonctionne sur le thème d'origine ?

C'est plus compliqué, car comme le code du menu est centralisé et n'est plus différent sur chaque design, il n'est pas possible de positionner la class "Selected" sur le bon menu, comme dans le script d'origine

je pensais pouvoir faire le test dans le JS centralisé, avec pas exemple la récupération de la page web en cours, mais dans le design la page ne change pas, donc pas possible de récupérer l'ID

il faudrait alors dans le code du menu du design, pouvoir ajouter une variable qui indiquerait l'ID du design afin de la JS centralisé puisse positionner le selected sur le bon menu

mais j'ai pas trop le temps et perso ce ne me dérange pas de ne pas avoir le menu qui indique la page active, je vois la page en dessous.

si qqun veux s'y coller :-)
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3491
Inscription : 23 mai 2015, 08:14

Re: [Présentation] F$B33

Message par Antoinekl1 » 12 juin 2019, 10:41

mathatak a écrit :
12 juin 2019, 00:44
Quelqu'un peut il m'expliquer s'il est possible et comment faire pour prendre une info précise dans un plugin, par exemple dans le plugin DOMOGEEK, l'information SAINT DU JOUR et l'afficher dans mon design, style : "le saint du jour est = ....." sans avoir toutes les autres infos du plusgin.

Merci de votre aide
tu peux ajouter une commande dans les designs et ne sélectionner que celle ci

sinon tu passes par un virtuel intermédiaire, qui n'a que les quelques commandes que tu veux afficher et c'est lui que tu mets dans le design
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Répondre

Revenir vers « Présentation et Vitrine d'installations »

Qui est en ligne ?

Utilisateurs parcourant ce forum : nicosoft et 2 invités