Forum GLPI-Project

LopStyle

Member

Registered: 2019-05-20

Posts: 4

[RESOLU] Rendu des notifications sur GLPI non fidèle sur outlook 2016

Bonjour tt le monde,

Voici mon pb :

J'ai fais mes modèles de notifications sur DreamWeaver, le rendu sur ce dernier est parfaist ainsi que sur le site codebetter par contre sur GLPI le rendu n'est pas vraiment identique ..
Par exemple, la commande border-radius n'a pas l'air d'etre prise en compte sur GLPI.

je suis en : GLPI 9.4.2 Copyright (C) 2015-2019 Teclib' and contributors
FusionInventory 9.4+1.1 - Copyleft © 2010-2019 by FusionInventory Team

J'ai des images a vous fournir pour que vous ayez un visu mais je ne peut insérer des liens

Ca serait super sympas de m'aider si vous savez d'ou le pb pourrait venir, car la j'ai beau tout essayé mais le rendu sur GLPI est systématiquement différent que sur les éditeurs html classiques ...
Je commence a perdre espoir
Merci d'avance

CODE CSS

/*************** BAS ET PIED DE PAGE ***************/
.header {
	font-weight: bold;
	padding: 3px;
	border-top-left-radius: 17px;
}

.footer {	
	font-weight: bold;
	padding: 3px;
	border-bottom-right-radius: 17px;
}

/*************** GLOBAL ***************/
.global {
	font-family: Century Gothic;
	padding: 0px 0px 0px 0px;
}

.logo {
	height: auto;
	width: 200px;
	padding: 10px 0px 10px 0px;
}

.cadre {
	width: 800px;
	padding: 0px 0px 0px 0px;;	
}

.titre {
	padding-left: 30px;	
}

.infoPrincipale {
	margin: auto;
	padding: 5px 30px 5px 5px;
}

.legende {
	padding: 30px 0px 20px 10px;
}

.souslegende {
	padding: 15px 0px 10px 30px;
}

.droitelegende {
	padding: 30px 0px 20px 0px;
}

/**************** SOLUTIION ***************/
.solution {	
	display: block;
}

/*************** LIGNE ***************/
.lignehaut {
	border-width: 3px;
	border-top-style: solid;
	padding: 0px 0px 0px 0px;
}

.lignebas {
	border-width: 3px;
	border-bottom-style: solid;
	padding: 0px 0px 0px 0px;
}
/*************** PERSONNALISATION ***************/
/*************** BAS ET PIED DE PAGE ***************/
.header {
	color : #d3bd80;
	background : #416b68;
	font-size: 17px;
	text-decoration: none;
}

.footer {
	color : #d3bd80;
	background : #968D85;
	font-size: 17px;
	text-decoration: none;
}

.header a {
	color: #d3bd80;
	font-weight: bold;
	font-size: 17px;
	text-decoration: none;
}

.footer a {
	color: #d3bd80;
	font-weight: bold;
	font-size: 17px;
	text-decoration: none;
}

/*************** GLOBAL ***************/
.global {
	color:#968D85;
	font-size: 12px;
}

.cadre {
	border: 3px solid #d3bd80;
	padding: 0px;
	border-radius: 20px 0px 20px 0px;
}

.titre {
	color : #416b68;	
	font-size: 15px;
	font-weight: bold;
	text-align: left;	
}

.infoPrincipale {
	font-size: 12px;
	text-align: right;
}

.legende {
	color: #416b68;
	font-size: 13px;
	font-weight: bold;	
}

.souslegende {
	font-size: 12px;
	color: #968d85;
}

.droitelegende {
	font-size: 12px;
	color: #968d85;
}	

/*************** LIGNE ***************/
.lignehaut {
	border-top-color: #d3bd80;
}

.lignebas {
	border-bottom-color: #d3bd80;
}

CODE HTML

<div class="global">
	<table class="cadre" cellspacing="0" cellpadding="0">
		  <tbody>
			<tr>
				<td colspan="2">
					<div class="lignebas"><div class="header" align="center"> 
						<a href="##ticket.url##">##ticket.action##</a>
					</div></div>
				</td>			
		    </tr>
			<tr>
				
				<td colspan="2">
					<div class="lignebas" align="center">
						<img class="logo" src="http://glpi/pics/notifications/mails-logo-meljac.png" alt="" />
					</div>
				</td>					
			</tr>
			
			<tr>
				<td align="left" width="300"><div class="titre">Ticket : ##ticket.title##</div></td>
				<td align="center">
					<div class="infoPrincipale">##lang.ticket.creationdate## : <b>##ticket.creationdate##</b>##IFticket.authors##
						<br/>##lang.ticket.authors## : <b>##ticket.authors##</b>##ENDIFticket.authors##
					</div>
				</td>
		    </tr>
			<tr>
				<td colspan="2">
					<div class="lignehaut"><div class="lignebas">						
						<div class="legende">##lang.ticket.description##</div>
						<div class="souslegende">##ticket.description##</div>
					</div></div>
				</td>
		    </tr>
			<tr valign="middle">
				<td width="400" align="center">
					<div class="legende">##lang.ticket.category## :</div>
				</td>
			  	<td width="400" align="center">
					<div class="droitelegende">##ticket.category##</div>
				</td>
			</tr>
			<tr valign="middle">
				<td width="400" align="center">
					<div class="ligne">
						<div class="legende">##lang.ticket.urgency## :</div>
					</div>
				</td>
			  	<td width="400" align="center">
					<div class="droitelegende">##ticket.urgency##</div>
				</td>
			</tr>
			<tr valign="middle">
				<td width="400" align="center">
					<div class="ligne">
						<div class="legende">##lang.ticket.location## :</div>
					</div>
				</td>
			  	<td width="400" align="center">
					<div class="droitelegende">##ticket.location##</div>
				</td>
			</tr>
			<tr>
			  	<td colspan="2">
					<div class="lignehaut"><div class="footer" align="center"> 
						<a href="##ticket.url##">Ticket ###ticket.id##</a>
					</div></div>
				</td>
			</tr>
		  </tbody>
	</table>
</div>

Last edited by LopStyle (2019-05-22 15:17:04)

Jean-Christophe

Moderator

Registered: 2007-08-22

Posts: 734

Re: [RESOLU] Rendu des notifications sur GLPI non fidèle sur outlook 2016

Le gros problème, ici, c'est que c'est peut-être le client mail qui ne le gère pas. :-)

Je ne dis pas que c'est le problème ici mais c'est une possibilité.

Comment le contenu html de sortie est-il récupéré?

LopStyle

Member

Registered: 2019-05-20

Posts: 4

Re: [RESOLU] Rendu des notifications sur GLPI non fidèle sur outlook 2016

On utilise le client outlook 2016 pour la plus part quelques 2010 sinon.
Qu'entends tu par "récupéré" ?
Le code html du mail reçu via outlook ?

Last edited by LopStyle (2019-05-20 14:31:42)

LopStyle

Member

Registered: 2019-05-20

Posts: 4

Re: [RESOLU] Rendu des notifications sur GLPI non fidèle sur outlook 2016

Le gros problème, ici, c'est que c'est peut-être le client mail qui ne le gère pas. :-)

Je ne dis pas que c'est le problème ici mais c'est une possibilité.

Comment le contenu html de sortie est-il récupéré?

Ta remarque par rapport au client de messagerie m'a fait réfléchir, du coup je suis aller sur le webmail pour test et la par miracle le mail de notifications GLPI apparaît correctement.
Cela vient donc du client de messagerie, par contre y aurait il une astuce pour éviter cela ?

Car m'envoyer de nouveaux tickets pour test mes notifications a chaque modifications css ou html ça va être fastidieux ...
Surtout qu'il n'y a pas que le border-radius qui pose pb, les padding aussi font des siennes ....

Jean-Christophe

Moderator

Registered: 2007-08-22

Posts: 734

Re: [RESOLU] Rendu des notifications sur GLPI non fidèle sur outlook 2016

Il n'y a pas grand chose à pouvoir faire du côté de GLPI.
C'est une limitation de Outlook.
Il y a des outils qui permettent de simuler les clients de messageries traditionnels pour faire des tests de layout (utilisés principalement pour les newsletter) mais je ne suis pas développeur web et je n'en connais pas.
Google est ton ami

LopStyle

Member

Registered: 2019-05-20

Posts: 4

Re: [RESOLU] Rendu des notifications sur GLPI non fidèle sur outlook 2016

Merci pour vos réponse,

en effet depuis que je sais que c'est du a Outlook, j'ai utiliser google et j'ai pu me débrouillé pour avoir un rendu a 90 % comme je le souhaitais.