Modèles de notification GLPI pour les mails

Submitted by ddurieux on Sat, 08/27/2011 - 00:27

Mise à jour du 17 Novembre 2011 :
Lemodèle a été mis à jour pour GLPI 0.80.x

Nous présentons un modèle de notification pour les tickets dans GLPI (disponible depuis GLPI 0.78)

Nous présentons 2 couleurs dans cette disposition.

GLPI avec ses couleurs par défaut :

et
GLPI dans une teinte bleue

Pour créer cette notification :

1. Se rendre dans le menu Configuration > Notifications > Modèles de notifications

2. Ajouter un nouveau modèle :
a. Définir le type : ticket
b. Définir css
Pour GLPI avec les couleurs par défaut, mettez : 

body {
   font-family: 'Bitstream Vera Sans', arial, Tahoma, 'Sans serif';
   font-size: 12px;
   margin: 0;
   padding: 0;
   background:  #dfdfdf repeat-x;
}

ul, li, dt, dl, dd, form, img, input {
   margin: 0;
   padding: 0;
}

ul {
   list-style-type: none;
}

small {
   font-family: verdana;
   font-size: 10px;
} 

.b {
   font-weight: bold;
}

.center {
   text-align:center;
}

.left {
   text-align:left;
}

.right {
   text-align:right;
}

.center-h {
   margin:auto;
}

.middle {
   vertical-align:middle;
}

.bottom {
   vertical-align:bottom;
}

.top {
   vertical-align:top;
}

.relative {
   position: relative;
}


.red { 
   color:red;
}

.blue {
   color:blue;
}

.green {
   color:green;
}


a, a:link {
   font-weight: bold;
   text-decoration: none;
   color : #659900;
   font-size : 12px;
}

a:hover {
   color: black;
}

table {
   font-size: 11px;
   border:0;
}

th { }

td { }

.tab_glpi {
   margin: 0 auto;
}

.tab_cadre {
   margin: 0 auto;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   -o-border-radius: 4px;
   border: 1px solid #cccccc;
   z-index:1;
   text-align: left;
   font-size: 11px;
   background-color: #ffffff;
}

.tab_cadre_fixe, .tab_cadre_fixehov {
   margin: 0 auto 10px auto;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   -o-border-radius: 4px;
   background: #f2f2f2;
   z-index:1;
   text-align: left;
   font-size: 11px;
   width:950px;
}

.tab_cadre_fixe img {
   vertical-align: middle;	
}

.tab_cadrehov, .tab_cadrehov_pointer {
   margin: 0 auto;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   -o-border-radius: 4px;
   border: 1px solid #cccccc;
   text-align: left;
   font-size: 11px;
   width: 80%;
   background-color: #ffffff;
   -moz-box-shadow: 0px 2px 5px #666;
   -webkit-box-shadow: 0px 2px 5px #666;
   box-shadow: 0px 2px 5px #666;
}

.tab_cadre th, .tab_cadre_fixe th, .tab_cadre_fixehov th, .tab_cadrehov th, .tab_cadrehov_pointer th, .tab_cadre_report th {
   font-size: 12px;
   font-weight: bold;
   background-color: #e1cc7b;
   text-align: center;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   -o-border-radius: 4px;
   padding: 2px;
   border-bottom:1px solid #cccccc;
   padding: 2px;
}

.tab_cadre td, .tab_cadre_fixe td, .tab_cadre_fixehov td, .tab_cadrehov td, .tab_cadrehov_pointer td, .tab_cadre_report td  {
   padding: 3px 5px;
}

.tab_cadrehov tr:hover, .tab_cadre_fixehov tr:hover {
   background-color: #FFF4DF;
}

.tab_cadrehov_pointer tr:hover {
   cursor: pointer;
   background-color: #FFF4DF;
}

.tab_check {
   text-align:center;
   margin: 20px;
   margin-left: auto;
   margin-right: auto;
   width: 90%;
   border: 1px solid #aaaaaa;
   padding:10px;
}

.tab_check th {
   font-size: 12px;
   font-weight: bold;
   color: #fccc6f;
   vertical-align:bottom;
}

.tab_check td {
   font-size:11px;
   border-bottom:1px solid #bbbbbb;
}

.tab_cadrehov_pointer tr {
   cursor: pointer;
}

.tab_bg_1 {
   background-color: #f2f2f2;
}

.tab_bg_1_2 {
   background-color: #cf9b9b;
}

.tab_bg_2 {
   background-color: #f2f2f2;
}

.tab_bg_2_2 {
   background-color: #cf9b9b;
}

.tab_bg_3 {
   background-color: #e7e7e2;
}

.tab_bg_4 {
   background-color: #e4e4e2;
}

.tab_bg_5 {
   background-color: #f2f2f2;
}

.tab_find {
   background-color: #ccccc7;
}

.tab_find:hover {
   background-color:#FFF2C2;
   cursor:pointer;
}


Pour GLPI avec la teinte bleue, mettez : 

body {
   font-family: 'Bitstream Vera Sans', arial, Tahoma, 'Sans serif';
   font-size: 12px;
   margin: 0;
   padding: 0;
   background:  #dfdfdf repeat-x;
}

ul, li, dt, dl, dd, form, img, input {
   margin: 0;
   padding: 0;
}

ul {
   list-style-type: none;
}

small {
   font-family: verdana;
   font-size: 10px;
} 

.b {
   font-weight: bold;
}

.center {
   text-align:center;
}

.left {
   text-align:left;
}

.right {
   text-align:right;
}

.center-h {
   margin:auto;
}

.middle {
   vertical-align:middle;
}

.bottom {
   vertical-align:bottom;
}

.top {
   vertical-align:top;
}

.relative {
   position: relative;
}


.red { 
   color:red;
}

.blue {
   color:blue;
}

.green {
   color:green;
}


a, a:link {
   font-weight: bold;
   text-decoration: none;
   color : #1a7ad0;
   font-size : 12px;
}

a:hover {
   color: black;
}

table {
   font-size: 11px;
   border:0;
}

th { }

td { }

.tab_glpi {
   margin: 0 auto;
}

.tab_cadre {
   margin: 0 auto;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   -o-border-radius: 4px;
   border: 1px solid #cccccc;
   z-index:1;
   text-align: left;
   font-size: 11px;
   background-color: #ffffff;
}

.tab_cadre_fixe, .tab_cadre_fixehov {
   margin: 0 auto 10px auto;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   -o-border-radius: 4px;
   background: #f2f2f2;
   z-index:1;
   text-align: left;
   font-size: 11px;
   width:950px;
}

.tab_cadre_fixe img {
   vertical-align: middle;	
}

.tab_cadrehov, .tab_cadrehov_pointer {
   margin: 0 auto;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   -o-border-radius: 4px;
   border: 1px solid #cccccc;
   text-align: left;
   font-size: 11px;
   width: 80%;
   background-color: #ffffff;
   -moz-box-shadow: 0px 2px 5px #666;
   -webkit-box-shadow: 0px 2px 5px #666;
   box-shadow: 0px 2px 5px #666;
}

.tab_cadre th, .tab_cadre_fixe th, .tab_cadre_fixehov th, .tab_cadrehov th, .tab_cadrehov_pointer th, .tab_cadre_report th {
   font-size: 12px;
   font-weight: bold;
   background-color: #8cb0d0;
   text-align: center;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   -o-border-radius: 4px;
   padding: 2px;
   border-bottom:1px solid #cccccc;
   padding: 2px;*/
}

.tab_cadre td, .tab_cadre_fixe td, .tab_cadre_fixehov td, .tab_cadrehov td, .tab_cadrehov_pointer td, .tab_cadre_report td  {
   padding: 3px 5px;
}

.tab_cadrehov tr:hover, .tab_cadre_fixehov tr:hover {
   background-color: #FFF4DF;
}

.tab_cadrehov_pointer tr:hover {
   cursor: pointer;
   background-color: #FFF4DF;
}

.tab_check {
   text-align:center;
   margin: 20px;
   margin-left: auto;
   margin-right: auto;
   width: 90%;
   border: 1px solid #aaaaaa;
   padding:10px;
}

.tab_check th {
   font-size: 12px;
   font-weight: bold;
   color: #fccc6f;
   vertical-align:bottom;
}

.tab_check td {
   font-size:11px;
   border-bottom:1px solid #bbbbbb;
}

.tab_cadrehov_pointer tr {
   cursor: pointer;
}

.tab_bg_1 {
   background-color: #f2f2f2;
}

.tab_bg_1_2 {
   background-color: #cf9b9b;
}

.tab_bg_2 {
   background-color: #f2f2f2;
}

.tab_bg_2_2 {
   background-color: #cf9b9b;
}

.tab_bg_3 {
   background-color: #e7e7e2;
}

.tab_bg_4 {
   background-color: #e4e4e2;
}

.tab_bg_5 {
   background-color: #f2f2f2;
}

.tab_find {
   background-color: #ccccc7;
}

.tab_find:hover {
   background-color:#FFF2C2;
   cursor:pointer;
}


3. Cliquez sur le bouton d'ajout
4. Editer ce modèle et Ajouter une nouvelle traduction
5. Mettez dans Corps du courriel HTML et cliquez sur l'icone "html" (c'est la même chose pour les couleurs par défaut et la teinte bleue) : 

##IFticket.storestatus=solved##
<table class="tab_cadre" width="700">
<tbody>
<tr>
   <th colspan="2"><a href="##ticket.urlapprove##">##lang.ticket.solution.description##</a></th>
</tr>
      
<tr class="tab_bg_1">
   <td colspan="2"><strong>##lang.ticket.autoclosewarning##</strong></td>
</tr>
      
<tr class="tab_bg_1">
   <td>##lang.ticket.solvedate## :</td>
   <td>##ticket.solvedate##</td>
</tr>

<tr class="tab_bg_1">
   <td>##lang.ticket.solution.type## :</td>
   <td>##ticket.solution.type##</td>
</tr>

<tr class="tab_bg_1">
   <td>##lang.ticket.solution.description## :</td>
   <td>##ticket.solution.description##</td>
</tr> 
      
</tbody>
</table>
##ENDIFticket.storestatus##

<br />

<table class="tab_cadre" width="700">
<tbody>
<tr>
   <th colspan="2"><a href="##ticket.url##">##ticket.title##</a></th>
   <th>
##IFticket.numberoffollowups## 
<a href="#followups">##lang.ticket.numberoffollowups## : ##ticket.numberoffollowups##</a>
##ENDIFticket.numberoffollowups##
   </th>
   <th>
##IFticket.numberoftasks##  
<a href="#tasks">##lang.ticket.numberoftasks## : ##ticket.numberoftasks##</a>
##ENDIFticket.numberoftasks##
   </th>
</tr>

<tr class="tab_bg_1">
   <td>##lang.ticket.authors## :</td>
   <td>
      ##IFticket.authors## 
         ##ticket.authors## 
      ##ENDIFticket.authors## 
      ##ELSEticket.authors##
      --
      ##ENDELSEticket.authors##</td>
   <td colspan="2"></td>
</tr>

<tr class="tab_bg_1">
   <td>##lang.ticket.creationdate## :</td>
   <td>##ticket.creationdate##</td>
   <td colspan="2"></td>
</tr>

<tr class="tab_bg_1">
   <td>##lang.ticket.closedate## :</td>
   <td>##ticket.closedate##</td>
   <td colspan="2"></td>
</tr>

##IFticket.requesttype##
<tr class="tab_bg_1">
   <td>##lang.ticket.requesttype## :</td>
   <td>##ticket.requesttype##</td>
   <td colspan="2"></td>
</tr>
##ENDIFticket.requesttype##


##IFticket.itemtype##
<tr class="tab_bg_1">
   <td>##lang.ticket.item.name## :</td>
   <td>##ticket.itemtype## - ##ticket.item.name## 
   ##IFticket.item.model## - ##ticket.item.model## ##ENDIFticket.item.model## 
   ##IFticket.item.serial## - ##ticket.item.serial## ##ENDIFticket.item.serial##  
   ##IFticket.item.otherserial## - ##ticket.item.otherserial## ##ENDIFticket.item.otherserial##</td>
   <td colspan="2"></td>
</tr>
##ENDIFticket.itemtype## 

##IFticket.assigntousers##
<tr class="tab_bg_1">
   <td>##lang.ticket.assigntousers## : </td>
   <td>##ticket.assigntousers##</td>
   <td colspan="2"></td>
</tr>
##ENDIFticket.assigntousers##

<tr class="tab_bg_1">
   <td>##lang.ticket.status## : </td>
   <td>##ticket.status##</td>
   <td colspan="2"></td>
</tr>

##IFticket.assigntogroups##
<tr class="tab_bg_1">
   <td>##lang.ticket.assigntogroups## : </td>
   <td>##ticket.assigntogroups##</td>
   <td colspan="2"></td>
</tr>
##ENDIFticket.assigntogroups##

<tr class="tab_bg_1">
   <td>##lang.ticket.urgency## : </td>
   <td>##ticket.urgency##</td>
   <td colspan="2"></td>
</tr>

<tr class="tab_bg_1">
   <td>##lang.ticket.impact## : </td>
   <td>##ticket.impact##</td>
   <td colspan="2"></td>
</tr>

<tr class="tab_bg_1">
   <td>##lang.ticket.priority## : </td>
   <td>##ticket.priority##</td>
   <td colspan="2"></td>
</tr>
   
<tr class="tab_bg_1">
   <td>##lang.ticket.category## : </td>
   <td>##IFticket.category##
      ##ticket.category## 
      ##ENDIFticket.category## 
      ##ELSEticket.category## 
      ##lang.ticket.nocategoryassigned## 
      ##ENDELSEticket.category##</td>
   <td colspan="2"></td>
</tr>

<tr class="tab_bg_1">
   <td>##lang.ticket.content## : </td>
   <td colspan="3">##ticket.content##</td>
</tr>

##IFticket.storestatus=closed##
<tr class="tab_bg_1">
   <td>##lang.ticket.solvedate## : </td>
   <td colspan="3">##ticket.solvedate##</td>
</tr>

<tr class="tab_bg_1">
   <td>##lang.ticket.solution.type## : </td>
   <td colspan="3">##ticket.solution.type##</td>
</tr>

<tr class="tab_bg_1">
   <td>##lang.ticket.solution.description## : </td>
   <td colspan="3">##ticket.solution.description##</td>
</tr>
##ENDIFticket.storestatus##</p>

<tr class="tab_bg_1">
   <td>##lang.ticket.numberoffollowups## : </td>
   <td colspan="3">##ticket.numberoffollowups##</td>
</tr>

##IFticket.numberoffollowups## 
<tr>
   <th colspan="4" id="followups">##lang.ticket.numberoffollowups## : ##ticket.numberoffollowups##</th>
</tr>
##ENDIFticket.numberoffollowups##

<tr>
	<td colspan='4'>
##FOREACHfollowups##
		<table class="tab_cadre" width="700">
			<tr class="tab_bg_3">
			   <td colspan="4" align="center"><strong>[##followup.date##]</strong></td>
			</tr>
			
			<tr class="tab_bg_1">
			   <td>##lang.followup.isprivate## :</td>
			   <td colspan="3">##followup.isprivate##</td>
			</tr>
			 
			<tr class="tab_bg_1">
			   <td>##lang.followup.author## :</td>
			   <td colspan="3">##followup.author##</td>
			</tr>
			
			<tr class="tab_bg_1">
			   <td>##lang.followup.description## :</td>
			   <td colspan="3">##followup.description##</td>
			</tr>
			
			<tr class="tab_bg_1">
			   <td>##lang.followup.date## :</td>
			   <td colspan="3">##followup.date##</td>
			</tr>
			
			<tr class="tab_bg_1">
			   <td>##lang.followup.requesttype## :</td>
			   <td colspan="3">##followup.requesttype##</td>
			</tr>
		</table>
##ENDFOREACHfollowups##
	</td>
</tr>

##IFticket.numberoftasks## 
<tr>
   <th colspan="4" id="tasks">##lang.ticket.numberoftasks## : ##ticket.numberoftasks##</th>
</tr>
##ENDIFticket.numberoftasks##

<tr>
	<td colspan='4'>

##FOREACHtasks##
		<table class="tab_cadre" width="700">
			<tr class="tab_bg_3">
			   <td colspan="4" align="center"><strong>[##task.date##]</strong></td>
			</tr>
			
			<tr class="tab_bg_1">
			   <td>##lang.task.isprivate## :</td>
			   <td colspan="3">##task.isprivate##</td>
			</tr>
			
			<tr class="tab_bg_1">
			   <td>##lang.task.author## :</td>
			   <td colspan="3">##task.author##</td>
			</tr>
			
			<tr class="tab_bg_1">
			   <td>##lang.task.description## :</td>
			   <td colspan="3">##task.description##</td>
			</tr>
			
			<tr class="tab_bg_1">
			   <td>##lang.task.time## :</td>
			   <td colspan="3">##task.time##</td>
			</tr>
			
			<tr class="tab_bg_1">
			   <td>##lang.task.category## :</td>
			   <td colspan="3">##task.category##</td>
			</tr>
		</table>
##ENDFOREACHtasks##

	</td>
</tr>

</tbody>
</table>

Vous pouvez associer ce modèle à vos notifications de tickets :)