Forum GLPI-Project

Boubou

Member

Registered: 2017-07-21

Posts: 3

CSS non effectif sur mes notification

Bonjour, je me suis récemment mis à l'utilisation de GLPI qui est formidable pour gérer les problèmes des clients mais j'ai remarqué qu'il lisent rarement les notifications...

J'ai donc voulu modifier un peu les notifications mais j'ai l'impression que le code CSS n'est pas pris en compte notamment pour les border, margin et padding. voici le code en question:

div.global {
    width: 600px;
    font-family: "Georgia", "Times New Roman";
    font-size: 14px;
    border: 2px solid #285a9f;
    border-bottom: 0px;
    border-radius: 20px;
    padding: 0;
    margin: 0 auto;
}

div.titrePrincipal {
    text-align: center;
}

div.infoPrincipale {
    margin-top: -10px;
    font-size: 16px;
    color: #000000;
}

div.infoCentre {
    color: #ffffff;
    background-color: #285a9f;
    padding: 15px 0px;
}

div.infoCentre div.legende {
    color: #ffffff;
    font-weight: bold;
    font-size: 18px;
    text-decoration: underline;
    margin: 0px 10px;
}

div.infoCentre p {
    color: #ffffff;
    font-size: 18px;
    margin: 0px 10px 0px 0px;
}


div.solution, div.pasDeSolution {
    margin: 10px 10px 10px 10px;
}

div.solution div {
    border: 0px;
    border-left: 3px solid #3366cc;
    margin-left: 70px;
    padding-left: 10px;
    color: #3366bb;
    font-size: 16px;
}

div.pasDeSolution div {
    border: 0px;
    border-left: 3px solid #c6250d;
    margin-left: 70px;
    padding-left: 10px;
    color: #c6250d;
    font-size: 16px;
}

div.autresInfos {
    margin: 10px 0px 20px 0px;
}

div.autresInfos div.legende {
    font-size: 16px;
    font-weight: bold;
    color: #285a9f;
    margin: 5px 10px;
}

div.autresInfos div.contenu {
    color: #444444;
    margin: 5px 10px;
}

div.piedPage {
    height: 30px;
    color: #ffffff;
    background: #285A9F repeat-x left bottom;
    padding: 0px;
    border-bottom-left-radius: 20px; 
    border-bottom-right-radius: 20px;
    border-bottom: 2px solid #3763a1;
    text-align: center;
}

div.piedPage div.infos {
    padding: 5px 10px 0px 10px;
}

div.suivis {
    margin-top: 15px;
    margin-bottom: -5px;
}

div.suivi {
    margin-bottom: 5px;
}

div.suivi div {
    border: 1px solid #888888;
    background-color: #eeeeee;
    margin: 5px 10px 5px 80px;
    color: #555555;
    padding: 10px;
    border-radius: 5px;
}

div.nbSuivis {
    text-align: center;
    color: #777777;
}

table.invisible {
    width: 100%;
    border: 0px;
}

table.invisible td {
    vertical-align: top;
}

img.logo {
    width: 125px;
    height: 60px;
    float: left;
    border: none;
    margin: 10px;
}


img.solution, img.pasDeSolution {
    width: 64px;
    height: 64px;
    float: left;
}

img.suivi {
    float: left;
    width: 64px;
    height: 64px;
    margin-left: 10px;
}

h2 a {
    text-decoration: none;
    font-weight: bold;
    color: #285a9f;
}

h2 {
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    padding: 0px 5px 0px 5px;
}

div.suivi h2 {
    color: #555555;
    font-weight: bold;
    font-size: 16px;
    padding: 0px;
    margin: 0px 0px 10px 0px;
}

div.piedPage a {
    color: #ffffff;
    text-decoration: none;
}

div.piedPage a:hover {
    text-decoration: underline;
}

span.legende {
    text-decoration: underline;
    font-weight: bold;
    color: #888888;
}

Et le code HTML associé:

<div class="global">
            <div class="titrePrincipal">
                <h2><a href="##ticket.url##">Ticket ouvert : ##ticket.title##</a></h2>
                <div class="infoPrincipale"><br /> Ouvert le ##ticket.creationdate## ##IFticket.authors##, par ##ticket.authors## ##ENDIFticket.authors##</div>
            </div>
            <div class="infoCentre">
                <table class="invisible">
                    <tbody>
                        <tr>
                            <td width="150px">
                                <div class="legende">Description :</div>
                            </td>
                            <td>
                                <p>##ticket.content##</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="suivis">##FOREACHfollowups##
                <div class="suivi">
                    <div>
                        <h2>Message de ##followup.author##, le ##followup.date##:</h2>
                        ##followup.description##</div>
                </div>
                ##ENDFOREACHfollowups##</div>
            <div class="nbSuivis">Nombre total de suivis : ##ticket.numberoffollowups##</div>
            <div class="autresInfos">
                <table class="invisible">
                    <tbody>
                        <tr>
                            <td width="200px">
                                <div class="legende">Catégorie :</div>
                            </td>
                            <td>
                                <div class="contenu">##ticket.category##</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="legende">Urgence :</div>
                            </td>
                            <td>
                                <div class="contenu">##ticket.urgency##</div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="legende">Matériel concerné :</div>
                            </td>
                            <td>
                                <div class="contenu">##ticket.item.name##</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="piedPage">
                <div class="infos">Ticket ###ticket.id## - <a href="##ticket.url##">Voir plus d'informations</a></div>
            </div>
        </div>

Je précise que c'est le code de micter59 que j'ai un peu modifié à ma sauce.

Avez-vous une idée concernant le problème ?

Last edited by Boubou (2017-07-21 10:03:21)

ddurieux

Plugins Dev

From: Propières, France

Registered: 2005-06-17

Posts: 7,521

Re: CSS non effectif sur mes notification

y a des clients mail qui supprime les classes css....

Boubou

Member

Registered: 2017-07-21

Posts: 3

Re: CSS non effectif sur mes notification

Merci de votre réponse.
Je ne pense pas que ce soit le cas ici, je reçois correctement tout ce qui touche aux couleurs, sauf les borders, padding et margin

Last edited by Boubou (2017-07-21 11:18:12)

LaDenrée

HELPER

Registered: 2012-11-19

Posts: 6,287

Re: CSS non effectif sur mes notification

avez vous essayé d'afficher le code source de l'email dans votre client de messagerie et de le coller dans une page html et de vérifier le résultat ?
le resultat est parfois surprenant...

---

Trouver la panne avant de réparer...
GLPI10.0.16 (ubuntu 22.04 PHP8.1  Mariadb10.6 ) plugins : comportements 2.7.3 reports 1.16.0 formcreator 2.13.9, datainjection 2.13.5 fields 1.21.9

Boubou

Member

Registered: 2017-07-21

Posts: 3

Re: CSS non effectif sur mes notification

En effet, ce n'est définitivement pas ce à quoi je m'attendais...

Je suis censé voir ça: https://imagebin.ca/v/3U8HermZJmiB

mais la plupart des classes sont remplacées par la classe "MsoNormal"...
ça vient donc de Outlook ?

taupin-a

Member

Registered: 2017-07-25

Posts: 10

Re: CSS non effectif sur mes notification

Bonjour,

le client outlook tient compte dans la css déclarée en en-tête que les directives de style (bold, size color, etc..) et encore pas dans tous les cas (pas xhtml ni html5).
Par contre, si ces directives sont appliquées directement dans le tag html sous la forme de "style="color: #000; font-size : 12px;" il en tient compte
Cdt,