GLPI: Modelo de notificação para envio de E-Mail com CSS

Encontrei esse manual no blog do siprossii (ddurieux's blog) parceiro do Projeto do GLPI.

Notificação via E-Mail com CSS formatada nas cores padrões do GLPI.

Faça um backup do GLPI;

Passo a passo para configurar esse modelo de notificação:

1 - Vá no menu Configuração -> Notificações -> Modelos de Notificação;

2 - Icone + em Adicionar;

3 - Escolha um nome;

4 - Escolha Tipo: Chamado;

5 - Coloque o código abaixo em CSS;

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

6 - Clique em Adicionar;

7 - Na janela Template de tradução - Novo cartão, coloque a Tradução padrão ou vazio para todas;

8 - Em Assunto: coloque as TAGS de sua preferência ou clique em Lista de 'tags' disponíveis para visualizar as TAGS;

9 - Coloque o código abaixo em Corpo do e-mail HTML: ;

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

10 - Clique em adicionar;

Para modificar o padrão de notificações altere o modelo Tickets - Tipo: Chamado.

Sempre faça um backup do seu Banco de Dados. antes de alterar as notificaçòes

Você também pode associar este modelo para outros tipos de notificações.

Agradecimentos e creditos para siprossii (ddurieux's blog).

Fonte: http://www.siprossii.com/en/GLPI-notification-template-mail

Obrigado.