GLPI notification template for mail | siprossii : The GLPI & FusionInventory experts!

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

Update on 17 November 2011 :

The template is update for GLPI 0.80

We present a notification model for the tickets in GLPI (available since GLPI 0.78)

We present 2 colors set with same disposition.

GLPI default color :

and
GLPI blue color

To set this notification :

1. Go in menu Setup > Notifications > Notification templates

2. Add a new template :
a. Set type : ticket
b. Set css
For GLPI default color, put :

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;
}

For GLPI blue color, put :

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. Click on add button
4. Edit this template and Add a new translation
5. Put in Email body HTML and click on "html" button (same for default color and blue color) :

##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>

You can associate this template to your ticket notifications :)