GLPI notificacao email com CSS

GLPI: Modelo de notificação para envio de Email com CSS


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

GLPI Notificação via Email com CSS formatada no  core padrão 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.