Il est possible de configurer une liste personnalisée de styles, et l'utilisateur final peut sélectionner un élément dans cette liste lors de la création d'un message. Ce choix affecte le style (apparence) du message.
Pour configurer le modèle, vous devrez modifier les fichiers .html (voir Mettre à jour le fichier HTML) et les fichiers .json (voir Mettre à jour le fichier params.json). Vous devrez également modifier le fichier (style.css).
Note : Il s'agit d'une fonctionnalité avancée. Nous vous recommandons d'être familier avec les feuilles de style en cascade (CSS). Le CSS est le langage utilisé pour mettre en forme un document HTML et décrit comment les éléments HTML doivent être affichés.
Fichier HTML
Le fichier .html doit avoir une classe div avec l'attribut personnalisé data-parent pour chacun des choix de style proposés à l'utilisateur final (dans notre exemple, style Light ou style Dark) :
<div data-parent="style" data-publish-id="style1" class="light-style">
<div class="text-block">
<p style="font-size: 3vw;text-align: center;">Heading 1</p>
</div>
</div>
<br />
<div data-parent="style" data-publish-id="style2" class="light-style">
<div class="text-block">
<p style="font-size: 3vw;text-align: center;">Heading 2</p>
</div>
</div>Fichier JSON
Le fichier params.json doit avoir une section correspondante pour chacun des styles personnalisés proposés à l'utilisateur final (dans notre exemple, style Light ou style Dark) :
{
"orientation": "landscape",
"fields": [
{
"id": "style1",
"label": "Choose your style",
"default": "light-style",
"choices": [
{ "label": "Light Style", "value": "light-style" },
{ "label": "Dark Style", "value": "dark-style" }
],
"type": "style",
"mandatory": false
},
{
"id": "style2",
"label": "Choose your style",
"default": "light-style",
"choices": [
{ "label": "Light Style", "value": "light-style" },
{ "label": "Dark Style", "value": "dark-style" }
],
"type": "style",
"mandatory": false
}
]
}Fichier CSS
Le fichier style.css doit avoir une section correspondante pour chacun des styles personnalisés proposés à l'utilisateur final (dans notre exemple, style Light ou style Dark) :
.light-style {
background-color: #cfd5e1;
}
.dark-style {
background-color: #596377;
}