Rajout d'une page a monitor et la modifier

Ici tout ce qui concerne les interfaces personnalisables pour Domoticz : Custom Pages, Reacticz, Domoboard...

Modérateur : vil1driver

Répondre
Paldor
Messages : 34
Enregistré le : 06 mai 2019, 16:54

Rajout d'une page a monitor et la modifier

Message par Paldor » 19 août 2019, 18:41

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.
Fichiers joints
Monitor.jpg
Monitor.jpg (137.02 Kio) Vu 296 fois

Disable adblock

This site is supported by ads and donations.
If you see this text you are blocking our ads.
Please consider a Donation to support the site.


vil1driver
Messages : 5095
Enregistré le : 30 janv. 2015, 11:07
Localisation : Rennes (35)

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

Message par vil1driver » 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 :?

Paldor
Messages : 34
Enregistré le : 06 mai 2019, 16:54

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

Message par Paldor » 19 août 2019, 21:42

bonsoir, La page3

Paldor
Messages : 34
Enregistré le : 06 mai 2019, 16:54

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

Message par Paldor » 20 août 2019, 15:51

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
Fichiers joints
page6.png
page6.png (1.01 Mio) Vu 257 fois

Disable adblock

This site is supported by ads and donations.
If you see this text you are blocking our ads.
Please consider a Donation to support the site.


Paldor
Messages : 34
Enregistré le : 06 mai 2019, 16:54

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

Message par Paldor » 23 août 2019, 16:21

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 ?

vil1driver
Messages : 5095
Enregistré le : 30 janv. 2015, 11:07
Localisation : Rennes (35)

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

Message par vil1driver » 23 août 2019, 17:19

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

Paldor
Messages : 34
Enregistré le : 06 mai 2019, 16:54

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

Message par Paldor » 24 août 2019, 12:09

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
Fichiers joints
page6.png
page6.png (1.21 Mio) Vu 176 fois

Disable adblock

This site is supported by ads and donations.
If you see this text you are blocking our ads.
Please consider a Donation to support the site.


Répondre