It is possible to set up a custom list of styles, and the end user can select an item from that list when creating a message. This choice affects the style (look and feel) of the message.
To configure the template, you will need to edit the .html file (see Update the HTML File) and .json file (see Update the params.json File). You will also need to edit the (style.css) file.
Note: This is an advanced feature. We recommend that you be familiar with Cascading Style Sheets (CSS). CSS is the language used to style an HTML document and describes how HTML elements should be displayed.
HTML File
The .html file must have a div class with the custom data-parent attribute for each of the style choices offered to the end user (in our example, Light style or Dark style):
<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>JSON File
The params.json file must have a corresponding section for each of the custom styles offered to the end user (in our example, Light style or Dark style):
{
"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
}
]
}CSS File
The style.css file must have corresponding styles for each of the style choices offered to the end user (in our example, Light style or Dark style):
.light-style {
background-color: #cfd5e1;
}
.dark-style {
background-color: #596377;
}