Customize the mail template (v4.8.0+)


From Ametys 4.8.0

From version 4.8.0 onwards, e-mails sent by the Ametys application are in HTML format, composed of various presentation elements, an example of which is shown below:

L'entête et le pied de page ainsi de la police, couleur du texte peuvent être personnalisés au niveau applicatif ou au niveau de la charte graphique.

To override one or more graphic elements in your e-mails, start by adding a stylesheets/mail/standard/template.xsl :

  • or at the application level in the WEB-INF/params to apply the overload to all e-mails sent by the application
  • either in the graphic design of the file skins/[SKIN_NAME] so that the overload can be customized to suit the site

This file must contain at least

  • for a non-web application:
<xsl:import href="plugin:core-ui://stylesheets/mail/standard/template.xsl"/>
  • for a Web application
<xsl:import href="plugin:web://stylesheets/mail/standard/template.xsl"/>
  • for a charter extending the workspaces charter
<xsl:import href="skin:workspaces://stylesheets/mail/standard/template.xsl"/>

The file will then contain the overloaded elements.

NOTE
Si votre charte est une déclinaison d'une charte Ametys Intranet or Ametys Workspace, toute surcharge pour la personnalisation des mails doit nécessairement être faite dans la charte est non dans WEB-INF/params . En effet les chartes Ametys Intranet et Ametys Workspaces ayant déjà leur propre surcharge, c'est celle-ci qui sera toujours préférée à WEB-INF/params.
Pensez à importer le template de mail de la charte déclinée plutôt que celui du plugin web, par exemple <xsl:import href="skin:intranet://stylesheets/mail/standard/template.xsl"/>

Header logo overload

To override the header logo, the "header-logo-img" template must be overridden.
For example:

<xsl:template name="header-logo-img">
 <img width="164" height="37" src="{ametys:skinImageBase64('img/mail/logo-mail.png')}" alt="My company"/>
</xsl:template>

Watch out!
The image must be resolved in base64 with ametys:skinImageBase64(String path) or pluginImageBase64(String plugin, String path)

Footer logo overload

To override the footer logo, the "footer-logo-img" template must be overridden.
For example:

<xsl:template name="footer-logo-img">
 <img width="164" height="37" src="{ametys:skinImageBase64('img/mail/logo-mail.png')}" alt="My company"/>
</xsl:template>

Watch out!
The image must be resolved in base64 with ametys:skinImageBase64(String path) or pluginImageBase64(String plugin, String path)

Color/font overload

To override the colors and/or fonts used, you can override the style variables defined by default in 01_Runtime\master\main\plugin-core-ui\stylesheets\mail\standard\components\styles.xsl

For example, to simply change the font of all text and the primary color:

<xsl:variable name="font-family">Trebuchet MS, Arial, sans-serif</xsl:variable>
<xsl:variable name="primary">#e8590c</xsl:variable>
<xsl:variable name="primary-light">#fceee6</xsl:variable>

The default font is "Tahoma".
If you wish to change it, be careful to choose a font that will be supported by all clients mail.
Here is a list of fonts that can be used in emails without risk: https://www.w3schools.com/cssref/ css_websafe_fonts .php

It is possible to go further in customizing the mail template.
However, as the format of e-mails is very sensitive, it is strongly recommended not to try to customize anything other than the logo, color and font, and footer text.

Example of overloading

You can download the mail.zip file and unzip it in your graphic charter's root directory to start your overload.

The ZIP includes a simple overload of the mail template for the logo and primary color used.
Modify the file's color codes stylesheets/mail/standard/components/styles.xsl and the resources/img/mail/logo-mail.png.
Don't forget to personalize the logo's alt text.

Below is a rendering of HTML mails with this overload:

 

 

 

 

 

 

 

 

Back to top