Forum Domoticz en français

Reprenez le contrôle de votre domotique
https://easydomoticz.com/forum/

Rajout d'une page a monitor et la modifier

https://easydomoticz.com/forum/viewtopic.php?t=8828

Page 1 sur 1

Rajout d'une page a monitor et la modifier

Publié : 19 août 2019, 18:41
par Paldor
Bonjour, j'ai copier une page que j'ai renommer page6.html de même avec page6.css voici les codes
page6.html

Code : Tout sélectionner

<!-- load page stylesheet -->
<script>
$('head').append('<link rel="stylesheet" href="css/page6.css">');
</script>

<!-- Page -->
<div class="cnt v-wrap">
<div class="v-box">
<!-- contenu -->  

<!--
le contenu de votre page ne doit pas dépasser les dimensions suivantes
largeur: 962px
hauteur: 541px
-->


<div>
<div class="frame">
	<div id="ls_cell6_1"></div><div id="cell6_1"></div><div id="desc_cell6_1">cell6_1</div>
	<div id="ls_cell6_2"></div><div id="cell6_2"></div><div id="desc_cell6_2">cell6_2</div>
	<div id="ls_cell6_3"></div><div id="cell6_3"></div><div id="desc_cell6_3">cell6_3</div>
	<div id="ls_cell6_4"></div><div id="cell6_4"></div><div id="desc_cell6_4">cell6_4</div>
	<div id="ls_cell6_5"></div><div id="cell6_5"></div><div id="desc_cell6_5">cell6_5</div>
	<div id="ls_cell6_6"></div><div id="cell6_6"></div><div id="desc_cell6_6">cell6_6</div>
	<div id="ls_cell6_7"></div><div id="cell6_7"></div><div id="desc_cell6_7">cell6_7</div>
	<div id="ls_cell6_8"></div><div id="cell6_8"></div><div id="desc_cell6_8">cell6_8</div>
</div>
<div class="frame">
	<div id="ls_cell6_9"></div><div id="cell6_9"></div><div id="desc_cell6_9">cell6_9</div>
	<div id="ls_cell6_10"></div><div id="cell6_10"></div><div id="desc_cell6_10">cell6_10</div>
	<div id="ls_cell6_11"></div><div id="cell6_11"></div><div id="desc_cell6_11">cell6_11</div>
	<div id="ls_cell6_12"></div><div id="cell6_12"></div><div id="desc_cell6_12">cell6_12</div>
	<div id="ls_cell6_13"></div><div id="cell6_13"></div><div id="desc_cell6_13">cell6_13</div>
	<div id="ls_cell6_14"></div><div id="cell6_14"></div><div id="desc_cell6_14">cell6_14</div>
	<div id="ls_cell6_15"></div><div id="cell6_15"></div><div id="desc_cell6_15">cell6_15</div>
	<div id="ls_cell6_16"></div><div id="cell6_16"></div><div id="desc_cell6_16">cell6_16</div>
</div>
<div class="frame">
	<div id="ls_cell6_17"></div><div id="cell6_17"></div><div id="desc_cell6_17">cell6_17</div>
	<div id="ls_cell6_18"></div><div id="cell6_18"></div><div id="desc_cell6_18">cell6_18</div>
	<div id="ls_cell6_19"></div><div id="cell6_19"></div><div id="desc_cell6_19">cell6_19</div>
	<div id="ls_cell6_20"></div><div id="cell6_20"></div><div id="desc_cell6_20">cell6_20</div>
	<div id="ls_cell6_21"></div><div id="cell6_21"></div><div id="desc_cell6_21">cell6_21</div>
	<div id="ls_cell6_22"></div><div id="cell6_22"></div><div id="desc_cell6_22">cell6_22</div>
	<div id="ls_cell6_23"></div><div id="cell6_23"></div><div id="desc_cell6_23">cell6_23</div>
	<div id="ls_cell6_24"></div><div id="cell6_24"></div><div id="desc_cell6_24">cell6_24</div>
</div>
<div class="frame">
	<div id="ls_cell6_25"></div><div id="cell6_25"></div><div id="desc_cell6_25">cell6_25</div>
	<div id="ls_cell6_26"></div><div id="cell6_26"></div><div id="desc_cell6_26">cell6_26</div>
	<div id="ls_cell6_27"></div><div id="cell6_27"></div><div id="desc_cell6_27">cell6_27</div>
	<div id="ls_cell6_28"></div><div id="cell6_28"></div><div id="desc_cell6_28">cell6_28</div>
	<div id="ls_cell6_29"></div><div id="cell6_29"></div><div id="desc_cell6_29">cell6_29</div>
	<div id="ls_cell6_30"></div><div id="cell6_30"></div><div id="desc_cell6_30">cell6_30</div>
	<div id="ls_cell6_31"></div><div id="cell6_31"></div><div id="desc_cell6_31">cell6_31</div>
	<div id="ls_cell6_32"></div><div id="cell6_32"></div><div id="desc_cell6_32">cell6_32</div>
</div>


<!-- fin contenu -->
</div>
</div>
<!-- fin page -->
Et page6.css

Code : Tout sélectionner

#ls_cell6_1, #ls_cell6_2, #ls_cell6_3, #ls_cell6_4,#ls_cell6_5, #ls_cell6_6, #ls_cell6_7, #ls_cell6_8, 
#ls_cell6_9, #ls_cell6_10, #ls_cell6_11, #ls_cell6_12, #ls_cell6_13, #ls_cell6_14, #ls_cell6_15, #ls_cell6_16, 
#ls_cell6_17, #ls_cell6_18, #ls_cell6_19, #ls_cell6_20, #ls_cell6_21, #ls_cell6_22, #ls_cell6_23, #ls_cell6_24, 
#ls_cell6_25, #ls_cell6_26, #ls_cell6_27, #ls_cell6_28, #ls_cell6_29, #ls_cell6_30, #ls_cell6_31, #ls_cell6_32,
 {
	font-family: arimo;
	font-weight: normal;
	color: #999;
	font-size: 12px;
	margin-top: -20px;
	height: 20px;
	line-height: 65px;
	text-shadow: 1px 1px 5px black;
	
}

#desc_cell6_1, #desc_cell6_2, #desc_cell6_3, #desc_cell6_4, #desc_cell6_5, #desc_cell6_6, #desc_cell6_7, #desc_cell6_8, 
#desc_cell6_9, #desc_cell6_10, #desc_cell6_11, #desc_cell6_12, #desc_cell6_13, #desc_cell6_14, #desc_cell6_15, #desc_cell6_16, 
#desc_cell6_17, #desc_cell6_18, #desc_cell6_19, #desc_cell6_20, #desc_cell6_21, #desc_cell6_22, #desc_cell6_23, #desc_cell6_24, 
#desc_cell6_25, #desc_cell6_26, #desc_cell6_27, #desc_cell6_28, #desc_cell6_29, #desc_cell6_30, #desc_cell6_31, #desc_cell6_32
 {
	font-family: arimo;
	font-weight: normal;
/*	color: #999; */
	color: #F2DDB6;
	font-size: 17px;
	margin-top: -20px;
	height: 25px;
	line-height: 15px;
	text-shadow: 1px 1px 4px black;
	
}
 
#cell6_1, #cell6_32 
{
	font-family: arimo;
	font-weight: bold;
	/*width: 277px;*/
	width: 252px;
	padding: 5px;
/*	border: 1px solid #1E1E1F; */
	border: 1px solid transparent;
	border-radius: 0px;
	height: 152.5px;	
	line-height: 170px; 
	font-size: 100px;	
	color: #999;
	margin: 0px ;
	text-shadow: 1px 1px 4px black;
	
}
 
#cell6_1, #cell6_2, #cell6_3, #cell6_4, #cell6_5, #cell6_6, #cell6_7, #cell6_8, 
#cell6_9, #cell6_10, #cell6_11, #cell6_12, #cell6_13, #cell6_14, #cell6_15, #cell6_16, 
#cell6_17, #cell6_18, #cell6_19, #cell6_20, #cell6_21, #cell6_22, #cell6_23, #cell6_24,
#cell6_25, #cell6_26, #cell6_27, #cell6_28, #cell6_29#cell6_30#cell6_31#cell6_32
     {
	font-family: arimo;
	font-weight: bold;
	/*width: 162px;*/
	width: 152px;
	padding: 10px;
/*	border: 1px solid #1E1E1F; */
	border: 1px solid transparent;
	border-radius: 0px;
	height: 58px;
	line-height: 55px; 		
	color: #999;
	font-size:40px;
	text-shadow: 1px 1px 4px black;
	
}

#cell6_8, #cell6_16, #cell6_24, #cell6_32,
{ 
	/*width: 184px; */
	width: 154px; 
}
Et voila se que j'obtient

Image

Mais je ne voie pas comment, décaler les cellules vers la gauche, et pourquoi après la cellule Cell6_27 se colle une sur l'autre.

Re: Rajout d'une page a monitor et la modifier

Publié : 19 août 2019, 18:53
par vil1driver
Salut,

Revoir la méthode de copie ;)

Renommer les cellules c'est ok, pour la structure, je suis incapable de savoir quelle page t'a servi de modèle :?

Re: Rajout d'une page a monitor et la modifier

Publié : 19 août 2019, 21:42
par Paldor
bonsoir, La page3

Re: Rajout d'une page a monitor et la modifier

Publié : 20 août 2019, 15:51
par Paldor
Bonjour vil1driver, OK histoire de virgule a la fin des lignes

Code : Tout sélectionner

#ls_cell6_1, #ls_cell6_2, #ls_cell6_3, #ls_cell6_4,#ls_cell6_5, #ls_cell6_6, #ls_cell6_7, #ls_cell6_8, 
#ls_cell6_9, #ls_cell6_10, #ls_cell6_11, #ls_cell6_12, #ls_cell6_13, #ls_cell6_14, #ls_cell6_15, #ls_cell6_16, 
#ls_cell6_17, #ls_cell6_18, #ls_cell6_19, #ls_cell6_20, #ls_cell6_21, #ls_cell6_22, #ls_cell6_23, #ls_cell6_24, 
#ls_cell6_25, #ls_cell6_26, #ls_cell6_27, #ls_cell6_28, #ls_cell6_29, #ls_cell6_30, #ls_cell6_31, [u]#ls_cell6_32[/u]
 {
	font-family: arimo;
	font-weight: normal;
	color: #999;
	font-size: 12px;
	margin-top: -20px;
	height: 20px;
	line-height: 65px;
	text-shadow: 1px 1px 5px black;
	
}

#desc_cell6_1, #desc_cell6_2, #desc_cell6_3, #desc_cell6_4, #desc_cell6_5, #desc_cell6_6, #desc_cell6_7, #desc_cell6_8, 
#desc_cell6_9, #desc_cell6_10, #desc_cell6_11, #desc_cell6_12, #desc_cell6_13, #desc_cell6_14, #desc_cell6_15, #desc_cell6_16, 
#desc_cell6_17, #desc_cell6_18, #desc_cell6_19, #desc_cell6_20, #desc_cell6_21, #desc_cell6_22, #desc_cell6_23, #desc_cell6_24, 
#desc_cell6_25, #desc_cell6_26, #desc_cell6_27, #desc_cell6_28, #desc_cell6_29, #desc_cell6_30, #desc_cell6_31, [u]#desc_cell6_32[/u]
 {
	font-family: arimo;
	font-weight: normal;
/*	color: #999; */
	color: #F2DDB6;
	font-size: 17px;
	margin-top: -20px; / Espace entre les lignes
	height: 25px;
	line-height: 15px; / Espace entre les lignes
	text-shadow: 1px 1px 4px black;
	
}
 
#cell6_1, #cell6_32 
{
	font-family: arimo;
	font-weight: bold;
	/*width: 277px;*/
	width: 252px;
	padding: 5px;
/*	border: 1px solid #1E1E1F; */
	border: 1px solid transparent;
	border-radius: 0px;
	height: 152.5px;	
	line-height: 170px; 
	font-size: 100px;	
	color: #999;
	margin: 0px ;
	text-shadow: 1px 1px 4px black;
	
}
 
#cell6_1, #cell6_2, #cell6_3, #cell6_4, #cell6_5, #cell6_6, #cell6_7, #cell6_8, 
#cell6_9, #cell6_10, #cell6_11, #cell6_12, #cell6_13, #cell6_14, #cell6_15, #cell6_16, 
#cell6_17, #cell6_18, #cell6_19, #cell6_20, #cell6_21, #cell6_22, #cell6_23, #cell6_24,
#cell6_25, #cell6_26, #cell6_27, #cell6_28, #cell6_29, #cell6_30, #cell6_31, [u]#cell6_32[/u]
     {
	font-family: arimo;
	font-weight: bold;
	/*width: 162px;*/
	width: 152px;
	padding: 10px;
/*	border: 1px solid #1E1E1F; */
	border: 1px solid transparent;
	border-radius: 0px;
	height: 58px;
	line-height: 55px; 		
	color: #999;
	font-size:40px;
	text-shadow: 1px 1px 4px black;
	
}

#cell6_8, #cell6_16, #cell6_24, #cell6_32,
{ 
	/*width: 184px; */
	width: 154px; 
}


Image

Mais maintenant pour déplacer les cellules vers la gauche je ne voie pas ou faire la modif

Re: Rajout d'une page a monitor et la modifier

Publié : 23 août 2019, 16:21
par Paldor
Bonjour, vil1driver c'est la page3 qui ma servie de modèle, mais j'ai beau cherché je ne vois pas comment déplacer les cellule vers la gauche rien dans fichier page6.css ni page6.html et rien dans index.html ?

Re: Rajout d'une page a monitor et la modifier

Publié : 23 août 2019, 17:19
par vil1driver
vil1driver a écrit : 19 août 2019, 18:53 Salut,

Revoir la méthode de copie ;)

Renommer les cellules c'est ok, pour la structure, je suis incapable de savoir quelle page t'a servi de modèle :?
Je reformule..

Le code de ta page ne ressemble à aucune des pages du projet, et n'est sûrement pas née d'un copier coller..

Peux vérifier que ta page6 à bien la même structure que la page3 avant toute chose ?

https://github.com/vil1driver/monitor/b ... page3.html

Re: Rajout d'une page a monitor et la modifier

Publié : 24 août 2019, 12:09
par Paldor
Bonjour vil1driver, j'ai copier la page3 et modifier toute les cellules bon je repart sur la page3 sans trop faire de modif voila ce que j'obtient

Image

et le fichier page6.css

Code : Tout sélectionner

#ls_cell6_1, #ls_cell6_2, #ls_cell6_3, #ls_cell6_4,
#ls_cell6_5, #ls_cell6_6, #ls_cell6_7, #ls_cell6_8, #ls_cell6_9,
#ls_cell6_10, #ls_cell6_11, #ls_cell6_12, #ls_cell6_13, #ls_cell6_14,
#ls_cell6_15, #ls_cell6_16, #ls_cell6_17, #ls_cell6_18, #ls_cell6_19,
#ls_cell6_20, #ls_cell6_21, #ls_cell6_22, #ls_cell6_24, #ls_cell6_26, #ls_cell6_23, #ls_cell6_24, #ls_cell6_25,
#ls_cell6_27, #ls_cell6_28, #ls_cell6_29, #ls_cell6_30, #ls_cell6_31
 {
	font-family: arimo;
	font-weight: normal;
	color: #999;
	font-size: 12px;
	margin-top: -20px;
	height: 20px;
	line-height: 65px;
	text-shadow: 1px 1px 5px black;
	
}

#desc_cell6_1, #desc_cell6_2, #desc_cell6_3, #desc_cell6_4,
#desc_cell6_5, #desc_cell6_6, #desc_cell6_7, #desc_cell6_8, #desc_cell6_9,
#desc_cell6_10, #desc_cell6_11, #desc_cell6_12, #desc_cell6_13, #desc_cell6_14,
#desc_cell6_15, #desc_cell6_16, #desc_cell6_17, #desc_cell6_18, #desc_cell6_19,
#desc_cell6_20, #desc_cell6_21, #desc_cell6_22, #desc_cell6_24, #desc_cell6_26, #desc_cell6_23, #desc_cell6_24, #desc_cell6_25,
#desc_cell6_27, #desc_cell6_28, #desc_cell6_29, #desc_cell6_30, #desc_cell6_31
 {
	font-family: arimo;
	font-weight: normal;
/*	color: #999; */
	color: #F2DDB3;
	font-size: 17px;
	margin-top: -20px;
	height: 25px;
	line-height: 15px;
	text-shadow: 1px 1px 4px black;
	
}
 
#cell6_3, #cell6_25 
{
	font-family: arimo;
	font-weight: bold;
	/*width: 277px;*/
	width: 252px;
	padding: 5px;
/*	border: 1px solid #1E1E1F; */
	border: 1px solid transparent;
	border-radius: 0px;
	height: 152.5px;	
	line-height: 170px; 
	font-size: 100px;	
	color: #999;
	margin: 0px ;
	text-shadow: 1px 1px 4px black;
	
}
 
#cell6_1, #cell6_2, #cell6_4, #cell6_5, 
#cell6_6, #cell6_7, #cell6_8, #cell6_9, #cell6_10, 
#cell6_11, #cell6_12, #cell6_13, #cell6_14, #cell6_15, 
#cell6_16, #cell6_17, #cell6_18, #cell6_19, #cell6_20, 
#cell6_21, #cell6_22, #cell6_24, #cell6_26, #cell6_23,
#cell6_27, #cell6_28, #cell6_29, #cell6_30, #cell6_31
     {
	font-family: arimo;
	font-weight: bold;
	/*width: 162px;*/
	width: 152px;
	padding: 10px;
/*	border: 1px solid #1E1E1F; */
	border: 1px solid transparent;
	border-radius: 0px;
	height: 58px;
	line-height: 55px; 		
	color: #999;
	font-size:40px;
	text-shadow: 1px 1px 4px black;
	
}

#cell6_8, #cell6_13, #cell6_18, #cell6_24, #cell6_29
{ 
	/*width: 184px; */
	width: 154px; 
}
et le fichier page6.html

Code : Tout sélectionner

<!-- load page stylesheet -->
<script>
$('head').append('<link rel="stylesheet" href="css/page6.css">');
</script>

<!-- Page -->
<div class="cnt v-wrap">
<div class="v-box">
<!-- contenu -->  

<!--
le contenu de votre page ne doit pas dépasser les dimensions suivantes
largeur: 962px
hauteur: 541px
-->


<div>
<div class="frame">
	<div id="ls_cell6_1"></div><div id="cell6_1">--</div><div id="desc_cell6_1">cell6_1</div>
	<div id="ls_cell6_2"></div><div id="cell6_2">--</div><div id="desc_cell6_2">cell6_2</div>
</div>
<div class="frame">
	<div id="ls_cell6_3"></div><div id="cell6_3">--</div><div id="desc_cell6_3">cell6_3</div>
</div>
<div class="frame">
	<div id="ls_cell6_25"></div><div id="cell6_25">--</div><div id="desc_cell6_25">cell6_25</div>
</div>
<div class="frame">
	<div id="ls_cell6_4"></div><div id="cell6_4">--</div><div id="desc_cell6_4">cell6_4</div>
	<div id="ls_cell6_5"></div><div id="cell6_5">--</div><div id="desc_cell6_5">cell6_5</div>
</div>
</div>

<div>
<div class="frame">
	<div id="ls_cell6_6"></div><div id="cell6_6">--</div><div id="desc_cell6_6">cell6_6</div>
</div>
<div class="frame">
	<div id="ls_cell6_7"></div><div id="cell6_7">--</div><div id="desc_cell6_7">cell6_7</div>
</div>
<div class="frame">
	<div id="ls_cell6_8"></div><div id="cell6_8">--</div><div id="desc_cell6_8">cell6_8</div>
</div>
<div class="frame">
	<div id="ls_cell6_9"></div><div id="cell6_9">--</div><div id="desc_cell6_9">cell6_9</div>
</div>
<div class="frame">
	<div id="ls_cell6_10"></div><div id="cell6_10">--</div><div id="desc_cell6_10">cell6_10</div>
</div>
</div> 

<div>
<div class="frame">
	<div id="ls_cell6_11"></div><div id="cell6_11">--</div><div id="desc_cell6_11">cell6_11</div>
</div>
<div class="frame">
	<div id="ls_cell6_12"></div><div id="cell6_12">--</div><div id="desc_cell6_12">cell6_12</div>
</div>
<div class="frame">
	<div id="ls_cell6_13"></div><div id="cell6_13">--</div><div id="desc_cell6_13">cell6_13</div>
</div>
<div class="frame">
	<div id="ls_cell6_14"></div><div id="cell6_14">--</div><div id="desc_cell6_14">cell6_14</div>
</div>
<div class="frame">
	<div id="ls_cell6_15"></div><div id="cell6_15">--</div><div id="desc_cell6_15">cell6_15</div>
</div>
</div>

<div>
<div class="frame">
	<div id="ls_cell6_16"></div><div id="cell6_16">--</div><div id="desc_cell6_16">cell6_16</div>
</div>
<div class="frame">
	<div id="ls_cell6_17"></div><div id="cell6_17">--</div><div id="desc_cell6_17">cell6_17</div>
</div>
<div class="frame">
	<div id="ls_cell6_18"></div><div id="cell6_18">--</div><div id="desc_cell6_18">cell6_18</div>
</div>
<div class="frame">
	<div id="ls_cell6_19"></div><div id="cell6_19">--</div><div id="desc_cell6_19">cell6_19</div>
</div>
<div class="frame">
	<div id="ls_cell6_20"></div><div id="cell6_20">--</div><div id="desc_cell6_20">cell6_20</div>
</div>
</div>

<div>
<div class="frame">
	<div id="ls_cell6_21"></div><div id="cell6_21">--</div><div id="desc_cell6_21">cell6_21</div>
</div>
<div class="frame">
	<div id="ls_cell6_22"></div><div id="cell6_22">--</div><div id="desc_cell6_22">cell6_22</div>
</div>
<div class="frame">
	<div id="ls_cell6_24"></div><div id="cell6_24">--</div><div id="desc_cell6_24">cell6_24</div>
</div>
<div class="frame">
	<div id="ls_cell6_26"></div><div id="cell6_26">--</div><div id="desc_cell6_26">cell6_26</div>
</div>
<div class="frame">
	<div id="ls_cell6_23"></div><div id="cell6_23">--</div><div id="desc_cell6_23">cell6_23</div>
</div>
</div>

<div class="autoHide">
<div class="frame">
	<div id="ls_cell6_27"></div><div id="cell6_27">--</div><div id="desc_cell6_27">cell6_27</div>
</div>
<div class="frame">
	<div id="ls_cell6_28"></div><div id="cell6_28">--</div><div id="desc_cell6_28">cell6_28</div>
</div>
<div class="frame">
	<div id="ls_cell6_29"></div><div id="cell6_29">--</div><div id="desc_cell6_29">cell6_29</div>
</div>
<div class="frame">
	<div id="ls_cell6_30"></div><div id="cell6_30">--</div><div id="desc_cell6_30">cell6_30</div>
</div>
<div class="frame">
	<div id="ls_cell6_31"></div><div id="cell6_31">--</div><div id="desc_cell6_31">cell6_31</div>
</div>
</div>

<!-- fin contenu -->
</div>
</div>
<!-- fin page -->
Maintenant je voudrais enlever les deux grosse cellules en haut de façon que toute les cellules soit identique
Fuseau horaire sur UTC+02:00
Page 1 sur 1

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru