Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

Design : Template de Fenêtres (HTML/CSS)

Cette partie est réservée à l'utilisation de l'interface web de configuration de JEEDOM
Répondre
Djal94
Actif
Messages : 1228
Inscription : 09 août 2016, 09:21

Design : Template de Fenêtres (HTML/CSS)

Message par Djal94 » 19 nov. 2018, 21:31

Bonjour à tous,

Parce que le design a le vent en poupe ces derniers temps (merci benj29 ;) ), je poste ici ce que j’avais déjà posté mais qui s’est perdu dans le fil de 70 pages. Beaucoup de monde cherche un truc clé en main et facile à mettre en place.

Je fais une copie à peu de choses près du message que j’avais déjà posté.

J’ai joué un peu avec HTML et CSS et je vous propose un template de fenêtre qui je trouve est assez sympa, avec ses explications. C’est pas du grand code, certains rirons peut, être, mais ca fonctionne :)

Voilà ce que ca donne :
fenetre.jpeg
fenetre.jpeg (26.47 Kio) Consulté 9659 fois
fenetre1.jpeg
fenetre1.jpeg (26.08 Kio) Consulté 9659 fois
Un code HTML pour gérer les blocs et le texte, un .CSS pour gérer la mise en forme globale et un autre pour le petit ruban en haut à gauche de la fenêtre.
Le code HTML contient 4 blocs : (Sur un design, clic-droit "Insérer un texte/html", et vous copiez le code dedans.

- Un premier bloc titre avec l'icône, qui prend 20% de la hauteur totale.
- Un autre bloc pour le ruban avec couleur changeable.
- Un troisième bloc contour qui prend 80% de la hauteur totale.
- Un quatrième bloc fenêtre inclus dans le troisième contour avec un effet type "creusé" et de transparence, dont on peut changer la couleur.

Pour les fichier .css, vous les copiez ou vous voulez, tant que vous mettez le bon chemin au debut du code HTML.Pour le créer, depuis le plugin "outil de développement" ou bien en SSH.

Et tout cela se dimensionne automatiquement :)


Voici le HTML :

Code : Tout sélectionner

<link rel="stylesheet" href="montheme/monstyle.css" />
<link href="montheme/corner.css" rel="stylesheet" type="text/css">

<div class="ribbonB"><span>resume</span></div> <!-- ruban, on peut remplacer B(bleu) par R(rouge),V(vert),O(orange),G(gris) -->
<div class="titre"><h1>salon</h1><!-- Titre de la fenetere-->
<img src="montheme/images/canape.png" height=40px width=40px><!-- chemin de l'icône -->
  </div>
<div class="contourB"><!-- fenêtre de contour, on peut remplacer B(bleu) par R(rouge),V(vert),O(orange),G(gris) -->
  <div class="fenetreB"><!-- fenêtre intérieure, on peut remplacer B(bleu) par R(rouge),V(vert),O(orange),G(gris) -->
  </div>   
</div>
- le .CSS pour l'affichage de le fenêtre. Pour la police du titre, c’est la propriété font-family tout en bas.

Code : Tout sélectionner

.titre{

	display: table;
	border:solid 1px black;
	text-align: center;
    border-radius:5px 5px 0px 0px;
    color: white;
  	text-transform: uppercase;
  	z-index:-1;
	height:20%;
	width:100%;
	background-color: #3E3E3C;

  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
  	
}
.contour{
	border-left:solid 1px black;
  	border-right:solid 1px black;
  border-top:solid 2px #BEBEBE;
  	border-bottom:solid 1px black;
	width:100% ;
	height: 80%;
	text-align: center;
  	color: white;
  	text-transform: uppercase;
 	display: flex;
    background-color: #BEBEBE;
  	/*background-color: #448DFC;*/
  	border-radius:0px 0px 5px 5px;
  opacity:0.9;
  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
  	
     
}
.contourB{
	border-left:solid 1px black;
  	border-right:solid 1px black;
  	border-top:solid 2px #2058AD;
  	border-bottom:solid 1px black;
	width:100% ;
	height: 80%;
	text-align: center;
  	color: white;
  	text-transform: uppercase;
 	display: flex;
    background-color: #2058AD;
  	/*background-color: #448DFC;*/
  	border-radius:0px 0px 5px 5px;
  opacity:0.9;
  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
  	
     
}

.contourR{
	border-left:solid 1px black;
  	border-right:solid 1px black;
  	border-top:solid 2px #A50E0E;
  	border-bottom:solid 1px black;
	width:100% ;
	height: 80%;
	text-align: center;
  	color: white;
  	text-transform: uppercase;
 	display: flex;
    background-color: #A50E0E;
  	/*background-color: #448DFC;*/
  	border-radius:0px 0px 5px 5px;
  opacity:0.9;
  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
  	
     
}
.contourV{
	border-left:solid 1px black;
  	border-right:solid 1px black;
  	border-top:solid 2px #155F15;
  	border-bottom:solid 1px black;
	width:100% ;
	height: 80%;
	text-align: center;
  	color: white;
  	text-transform: uppercase;
 	display: flex;
    background-color: #155F15;
  	/*background-color: #448DFC;*/
  	border-radius:0px 0px 5px 5px;
  opacity:0.9;
  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
  	
     
}
.contourO{
	border-left:solid 1px black;
  	border-right:solid 1px black;
  	border-top:solid 2px #A36814;
  	border-bottom:solid 1px black;
	width:100% ;
	height: 80%;
	text-align: center;
  	color: white;
  	text-transform: uppercase;
 	display: flex;
    background-color: #A36814;
  	/*background-color: #448DFC;*/
  	border-radius:0px 0px 5px 5px;
  opacity:0.9;
  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
  	
     
}
.fenetre{
	
     margin:auto;
     margin-top: 20;
     margin-right: 2;
     margin-bottom: 2;
     margin-left: 2;
     width: 95%;
     height: 95%;
    border-radius: 2px;
  background-color: #838383;
  opacity:0.9;
 box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
 
  
     
}

.fenetreR{
	
     margin:auto;
     margin-top: 20;
     margin-right: 2;
     margin-bottom: 2;
     margin-left: 2;
     width: 95%;
     height: 95%;
    border-radius: 2px;
  background-color: #E75440;
  opacity:0.9;
 box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
 
  
     
}

.fenetreB{
	
     margin:auto;
     margin-top: 20;
     margin-right: 2;
     margin-bottom: 2;
     margin-left: 2;
     width: 95%;
     height: 95%;
    border-radius: 2px;
  background-color: #448DFC;
  opacity:0.8;
 box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
 
  
     
}

.fenetreV{
	
     margin:auto;
     margin-top: 20;
     margin-right: 2;
     margin-bottom: 2;
     margin-left: 2;
     width: 95%;
     height: 95%;
    border-radius: 2px;
  background-color: #5AA664;
  opacity:0.9;
 box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
 
  
     
}

.fenetreO{
	
     margin:auto;
     margin-top: 20;
     margin-right: 2;
     margin-bottom: 2;
     margin-left: 2;
     width: 95%;
     height: 95%;
    border-radius: 2px;
  background-color: #E29F3D;
  opacity:0.9;
 box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
 
  
     
}

h1{
    display: table-cell;
    vertical-align: middle;
    text-align:center;
text-indent: 50px;
   font-size: 200%;
  font-family: Georgia,Chalkduster,"Brush Script MT",Georgia, Serif;
  text-shadow: 5px 5px 10px #000000;
    

}
Le .CSS pour l'affichage du ruban :

Code : Tout sélectionner

<style>
.boxT {
  width: 190px; height: 661px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  background-color: rgba(0,0,0,0.6);
}
.ribbonB {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 2;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonB span {
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbonB span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbonB span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
</style>
<style>
.boxTT {
  width: 190px; height: 661px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  background-color: rgba(0,0,0,0.6);
}
.ribbonR {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonR span {
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#D61919 0%, #931515 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbonR span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #931515;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #931515;
}
.ribbonR span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #931515;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #931515;
}
</style>
<style>
.boxTT {
  width: 190px; height: 661px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  background-color: rgba(0,0,0,0.6);
}
.ribbonV {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonV span {
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#0F8C46 0%, #064D25 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbonV span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #064D25;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #064D25;
}
.ribbonV span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #064D25;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #064D25;
}
</style>
<style>
.boxTT {
  width: 190px; height: 661px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  background-color: rgba(0,0,0,0.6);
}
.ribbonO {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonO span {
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#CF8C0E 0%, #6F4B08 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbonO span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #6F4B08;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #6F4B08;
}
.ribbonO span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #6F4B08;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #6F4B08;
}
</style>
<style>
.boxTT {
  width: 190px; height: 661px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  background-color: rgba(0,0,0,0.6);
}
.ribbonG {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonG span {
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#B5B5B5 0%, #6F6F6F 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbonG span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #6F6F6F;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #6F6F6F;
}
.ribbonG span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #6F6F6F;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #6F6F6F;
}
</style>

Il vous suffit de remplacer les icônes par les vôtres, les couleurs dans le code HTML
Merci a ceux de qui je me suis inspiré, ils se reconnaitront ;)

Dans une autres style en jouant un peu avec le CSS, vous pouvez faire ca. :
Fenetre4.jpg
Fenetre4.jpg (12.6 Kio) Consulté 9659 fois
Le code du .CSS de la fenêtre :

Code : Tout sélectionner

.haut{

	display: table;
		border-left:solid 1px black;
  	border-right:solid 1px black;
  border-top:solid 1px black;
   border-bottom:solid 0px black;
	text-align: right;
    border-radius:5px 5px 0px 0px;
    color: white;
  	text-transform: uppercase;
  	z-index:-1;
	height:20%;
	width:100%;
	background-color: #3E3E3C;
  opacity:1;

 /* box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);*/
  	
}
.milieu{
	border-left:solid 1px black;
  	border-right:solid 1px black;
  border-top:solid 2px #BEBEBE;
  	border-bottom:solid 1px black;
	width:100% ;
	height: 80%;
	text-align: center;
  	color: white;
  	text-transform: uppercase;
 	display: flex;
    background-color: #BEBEBE;
  	/*background-color: #BEBEBE;*/
  	border-radius:0px 0px 5px 5px;
  opacity:0.9;
 /* box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);*/
  	
     
}
.milieuN{
	border-left:solid 1px black;
  	border-right:solid 1px black;
  border-top:solid 2px #BEBEBE;
  	border-bottom:solid 1px black;
	width:100% ;
	height: 80%;
	text-align: center;
  	color: white;
  	text-transform: uppercase;
 	display: flex;
    background-color: #505050;
  	/*background-color: #BEBEBE;*/
  	border-radius:0px 0px 5px 5px;
  opacity:0.9;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5);
  	
     
}
.milieuB{
	border-left:solid 1px black;
  	border-right:solid 1px black;
  	border-top:solid 2px #2058AD;
  	border-bottom:solid 1px black;
	width:100% ;
	height: 80%;
	text-align: center;
  	color: white;
  	text-transform: uppercase;
 	display: flex;
    background-color: #505050;
  	/*background-color: #2058AD;3E3E3C,BEBEBE*/
  	border-radius:0px 0px 5px 5px;
  opacity:1;
  /*box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);*/
  	
     
}

.milieuR{
	border-left:solid 1px black;
  	border-right:solid 1px black;
  	border-top:solid 2px #A50E0E;
  	border-bottom:solid 1px black;
	width:100% ;
	height: 80%;
	text-align: center;
  	color: white;
  	text-transform: uppercase;
 	display: flex;
    background-color: #505050;
  	/*background-color: #808080;*/
  	border-radius:0px 0px 5px 5px;
  opacity:1;
  /*box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);*/
  	
     
}
.milieuV{
	border-left:solid 1px black;
  	border-right:solid 1px black;
  	border-top:solid 2px #155F15;
  	border-bottom:solid 1px black;
	width:100% ;
	height: 80%;
	text-align: center;
  	color: white;
  	text-transform: uppercase;
 	display: flex;
    background-color: #505050;
  	/*background-color: #155F15;*/
  	border-radius:0px 0px 5px 5px;
  opacity:1;
 /* box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);*/
  	
     
}
.milieuO{
	border-left:solid 1px black;
  	border-right:solid 1px black;
  	border-top:solid 2px #A36814;
  	border-bottom:solid 1px black;
	width:100% ;
	height: 80%;
	text-align: center;
  	color: white;
  	text-transform: uppercase;
 	display: flex;
    background-color: #505050;
  	/*background-color: #A36814;*/
  	border-radius:0px 0px 5px 5px;
  opacity:1;
 /* box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);*/
  	
     
}
.fenetre{
	
     margin:auto;
     margin-top: 20;
     margin-right: 2;
     margin-bottom: 2;
     margin-left: 2;
     width: 95%;
     height: 95%;
    border-radius: 2px;
  background-color: #838383;
  /*background-color:#FEFEFE;*/
  opacity:0.6;
 box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,1px 1px 1px #fff;
 
  
     
}

.fenetreR{
	
     margin:auto;
     margin-top: 20;
     margin-right: 2;
     margin-bottom: 2;
     margin-left: 2;
     width: 95%;
     height: 95%;
    border-radius: 2px;
  background-color: #E75440;
  opacity:0.9;
 /*box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;*/
 
  
     
}

.fenetreB{
	
     margin:auto;
     margin-top: 20;
     margin-right: 2;
     margin-bottom: 2;
     margin-left: 2;
     width: 95%;
     height: 95%;
    border-radius: 2px;
  background-color: #448DFC;
  opacity:0.8;
 box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
 
  
     
}

.fenetreV{
	
     margin:auto;
     margin-top: 20;
     margin-right: 2;
     margin-bottom: 2;
     margin-left: 2;
     width: 95%;
     height: 95%;
    border-radius: 2px;
  background-color: #3E3E3C;
  opacity:0.9;
 box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
 
  
     
}

.fenetreO{
	
     margin:auto;
     margin-top: 20;
     margin-right: 2;
     margin-bottom: 2;
     margin-left: 2;
     width: 95%;
     height: 95%;
    border-radius: 2px;
  background-color: #A36814;
  opacity:0.9;
 box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
 
  
     
}

.fenetreN{
	
     margin:auto;
     margin-top: 20;
     margin-right: 2;
     margin-bottom: 2;
     margin-left: 2;
     width: 95%;
     height: 95%;
    border-radius: 2px;
  background-color: #3E3E3C;
  opacity:0.9;
 box-shadow: 5px 5px 20px #000000 inset,-2px -2px 2px #000,2px 2px 2px #fff;
 
  
     
}



h1{
    display: table-cell;
    vertical-align: middle;
    text-align:center;
	text-indent: 50px;
   font-size: 150%;
  
/* text-shadow: 5px 5px 10px #000000;*/
  
    /*font-family:Breathe,Arial,Breathe,"Segoe Script","Viner Hand ITC","Monotype Corsiva","Brush Script MT",Georgia,Serif;*/
	 font-family:MontSerrat-Bold,Georgia,Serif;


}
Voilà amusez vous bien, partagez et améliorez ;)

Merci à vous!
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Design : Template de Fenêtres (HTML/CSS)

Message par Salvialf » 26 nov. 2018, 20:29

;) Encore merci
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Djal94
Actif
Messages : 1228
Inscription : 09 août 2016, 09:21

Re: Design : Template de Fenêtres (HTML/CSS)

Message par Djal94 » 28 nov. 2018, 08:53

Avec plaisir :)
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

minipouch
Timide
Messages : 356
Inscription : 29 août 2017, 23:02

Re: Design : Template de Fenêtres (HTML/CSS)

Message par minipouch » 30 nov. 2018, 18:48

Salut,

Tu sais me dire comment intégrer les css à Jeedom. J'ai bien une petite idée mais j'ai peur de faire une boulette.
J'ai le plugin administration.
En fait, je ne sais pas quel nom donner à chacun des css pour qu'ils soit repris dans le html.
Lequel est "monstyle et lequel est corner?
Il faut bien recréer 2 nouveaux css dans "montheme"???

Je te remercie

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Design : Template de Fenêtres (HTML/CSS)

Message par Salvialf » 30 nov. 2018, 18:52

Salut,

un seul fichier (pour ma part "ruban.css") que j'ai mis dans le répertoire /montheme via le plugin "outils de développement" et appelé via le code html de mes cadres:

Code : Tout sélectionner

<!-- RUBAN -->
<link href="montheme/ruban.css" rel="stylesheet" type="text/css">
Ok ?
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Djal94
Actif
Messages : 1228
Inscription : 09 août 2016, 09:21

Design : Template de Fenêtres (HTML/CSS)

Message par Djal94 » 30 nov. 2018, 19:34

minipouch a écrit :Salut,

Tu sais me dire comment intégrer les css à Jeedom. J'ai bien une petite idée mais j'ai peur de faire une boulette.
J'ai le plugin administration.
En fait, je ne sais pas quel nom donner à chacun des css pour qu'ils soit repris dans le html.
Lequel est "monstyle et lequel est corner?
Il faut bien recréer 2 nouveaux css dans "montheme"???

Je te remercie
Salut, pour créer les fichiers? Depuis le plugin Outils de développement ou bien en ssh.
Tu crée un fichier en .css et tu colle le code dedans c’est tout.
Tu les mets où tu veux tant que le chemin est bien renseigné en html.
Monstyle est celui de la fenêtre et corner celui du ruban (coin)



Envoyé de mon iPad en utilisant Tapatalk
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

minipouch
Timide
Messages : 356
Inscription : 29 août 2017, 23:02

Re: Design : Template de Fenêtres (HTML/CSS)

Message par minipouch » 30 nov. 2018, 21:15

Salut,

Je me suis mal exprimé.
Je voulais savoir si il fallait rajouter le code css dans le css original ou s'il fallait recréer 2 nouveaux css mais tu viens de me répondre.
tu as répondu à mes question, je t'en remercie

GéraldB
Timide
Messages : 108
Inscription : 05 mai 2017, 12:32

Re: Design : Template de Fenêtres (HTML/CSS)

Message par GéraldB » 18 déc. 2018, 17:08

Bonjour,

J'ai essayer d'ajouter une couleur (mauve) au ruban (.ribbonM) sans succès.

Voici le code :

Code : Tout sélectionner

<style>
.boxT {
  width: 190px; height: 661px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  background-color: rgba(0,0,0,0.6);
}
.ribbonB {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 2;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonB span {
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbonB span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbonB span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
</style>
<style>
.boxTT {
  width: 190px; height: 661px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  background-color: rgba(0,0,0,0.6);
}
.ribbonR {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonR span {
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#D61919 0%, #931515 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbonR span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #931515;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #931515;
}
.ribbonR span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #931515;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #931515;
}
</style>
<style>
.boxTT {
  width: 190px; height: 661px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  background-color: rgba(0,0,0,0.6);
}
.ribbonV {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonV span {
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#0F8C46 0%, #064D25 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbonV span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #064D25;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #064D25;
}
.ribbonV span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #064D25;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #064D25;
}
</style>
<style>
.boxTT {
  width: 190px; height: 661px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  background-color: rgba(0,0,0,0.6);
}
.ribbonO {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonO span {
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#CF8C0E 0%, #6F4B08 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbonO span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #6F4B08;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #6F4B08;
}
.ribbonO span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #6F4B08;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #6F4B08;
}
</style>
<style>
.boxTT {
  width: 190px; height: 661px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  background-color: rgba(0,0,0,0.6);
}
.ribbonG {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonG span {
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#B5B5B5 0%, #6F6F6F 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbonG span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #6F6F6F;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #6F6F6F;
}
.ribbonG span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #6F6F6F;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #6F6F6F;
}
</style>
<style>
.boxTT {
  width: 190px; height: 661px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  background-color: rgba(0,0,0,0.6);
}
.ribbonM {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonM span {
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#FD02DF 0%, #C100AA 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbonM span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #C100AA;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #C100AA;
}
.ribbonM span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #C100AA;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #C100AA;
}
</style>
Est-ce que quelqu'un pourrais m'aider ?
Par avance merci.

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Design : Template de Fenêtres (HTML/CSS)

Message par Salvialf » 18 déc. 2018, 18:48

Salut,

tu devais avoir une erreur dans un de tes codes couleurs hexadécimaux.

Du coup là ça fonctionne:

Code : Tout sélectionner

<style>
.boxTT {
  width: 190px; height: 661px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  background-color: rgba(0,0,0,0.6);
}
.ribbonM {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonM span {
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#FD02DF 0%, #C100AA 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbonM span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #C100AA;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #C100AA;
}
.ribbonM span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #C100AA;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #C100AA;
}
</style>
Par contre c'est plutôt rose que mauve si je peux me permettre:
RibbonRose.jpg
RibbonRose.jpg (8.59 Kio) Consulté 9300 fois
Si tu veux j'avais déjà fait un violet (RibbonP):
ribbonViolet.jpg
ribbonViolet.jpg (9.83 Kio) Consulté 9300 fois

Code : Tout sélectionner

<style>
.boxTT {
  width: 190px; height: 661px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
  background-color: rgba(0,0,0,0.6);
}
.ribbonP {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonP span {
  font-size: 12px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#B017D6 0%, #7B1594 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbonP span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #7B1594;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #7B1594;
}
.ribbonP span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #7B1594;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #7B1594;
}
</style>
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

GéraldB
Timide
Messages : 108
Inscription : 05 mai 2017, 12:32

Re: Design : Template de Fenêtres (HTML/CSS)

Message par GéraldB » 18 déc. 2018, 20:28

Merci Salvialf,

Effectivement ça marche, mais j'ai du mettre le code de la nouvelle couleur avant ton code (avec les couleurs R, B, V, O)
Et c'est vrai que c'est plutôt rose fuchsia ….
Encore merci ;)

Avatar de l’utilisateur
HollyFredD
Timide
Messages : 92
Inscription : 14 janv. 2018, 12:54

Re: Design : Template de Fenêtres (HTML/CSS)

Message par HollyFredD » 05 janv. 2019, 15:48

Salut Djal94,

Merci pour le partage de ce template, je vais jouer un peu avec pour mettre à jour les miens pour un affichage tablette.
Par contre pourrais-tu nous partager ta bibliothèque d'icones utilisés ?

Merci,

Djal94
Actif
Messages : 1228
Inscription : 09 août 2016, 09:21

Re: Design : Template de Fenêtres (HTML/CSS)

Message par Djal94 » 05 janv. 2019, 18:18

Les icônes? Celle du canapé ?


Envoyé de mon iPad en utilisant Tapatalk
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

trane51100
Timide
Messages : 5
Inscription : 31 déc. 2018, 08:45

Re: Design : Template de Fenêtres (HTML/CSS)

Message par trane51100 » 08 janv. 2019, 17:37

Salut Djal94,

Déjà bravo pour ce design, super boulot! Petite question, je suis en train de me créer mon design mais en responsive, as-tu dejà essayer les rubans en responsive? parce que j'ai tenté plusieurs adaptations sans grande réussite...

Merci,

Magnifly
Timide
Messages : 8
Inscription : 14 mai 2019, 18:08

Re: Design : Template de Fenêtres (HTML/CSS)

Message par Magnifly » 14 mai 2019, 18:10

Hey !

Super ce design. Par contre, je débute et je n'ai pas de réelles idées comment procéder et j'aurais donc voulu savoir s'il était possible d'avoir un peu d'aide.

Merci par avance !

adb26
Timide
Messages : 67
Inscription : 05 févr. 2017, 12:52

Re: Design : Template de Fenêtres (HTML/CSS)

Message par adb26 » 28 déc. 2019, 23:48

Djal94 a écrit :
19 nov. 2018, 21:31
- Un premier bloc titre avec l'icône, qui prend 20% de la hauteur totale.
...
- Un troisième bloc contour qui prend 80% de la hauteur totale.
Bonjour,

quelle est la modification pour avoir le bloc titre de 30px par exemple la hauteur du contour qui s'ajuste (100% - 30px) ?

Cordialement
Cordi@lement
< OrangePiPlus2e + Teracom + Z-Wave Plus + EnOcean+ >

adb26
Timide
Messages : 67
Inscription : 05 févr. 2017, 12:52

Re: Design : Template de Fenêtres (HTML/CSS)

Message par adb26 » 29 déc. 2019, 04:11

adb26 a écrit :
28 déc. 2019, 23:48
quelle est la modification pour avoir le bloc titre de 30px par exemple la hauteur du contour qui s'ajuste (100% - 30px) ?
Je me réponds:

.titre{
height: 30px;

.contour{
height: calc(100% - 30px);
Cordi@lement
< OrangePiPlus2e + Teracom + Z-Wave Plus + EnOcean+ >

Répondre

Revenir vers « Portail web classique (Desktop) »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 5 invités