How to change the styling of your MJML email templates

Mark Phillips

Updated January 06, 2025 15:33

Looking to elevate the look and feel of your MJML email templates? With Ticketsolve’s Look and Feel settings, you can easily customise everything from background colours to CTA buttons, ensuring your emails are both visually striking and perfectly aligned with your branding.

Customise the MJML email styling

MJML email templates can be styled using the Look and Feel settings at the Account and Subdomain level. If your MJML email templates have previously been edited at the Subdomain level, you will need to continue to edit them at the Subdomain level (because this overrides what is set at the Account level).

1. Navigate to Settings > General Settings > "look and feel" setting.

Navigate to Subdomains > select the relevant Subdomain > Settings > "look and feel" setting.

2. Within the Look and Feel settings, go to the Email tab.

Main body colours, text & headers

Background colour: Sets the background colour of the email.
Container background: Sets the background colour of the email’s content blocks – anything with the style tag: mj-class="content-section". Most of the email content, including text, images, tickets etc, is contained within content blocks.
Text: Sets the colour of the text in both the body of the email (set against the background colour), and within the content blocks (e.g. containers). Be careful if the “background colour” and “container background” have contrasting colours, because the text colour needs to stand out against both.
CTA background: Sets the background colour of call-to-action (CTA) buttons with the style tag: mj-class="cta".
CTA text: Sets the colour of the text in CTA buttons with the style tag: mj-class="cta".
Header background: Sets the colour of the header strip at the top of the email. Linked to the merge tag: {{ header }}
Header logo URL: Sets the logo that appears inside the header section.
Footer background: Sets the colour of the footer strip at the bottom of the email. Linked to the merge tag: {{ footer }}
Footer logo URL: Sets the logo that appears inside the footer section.
Banner background: Sets the background colour for content blocks with supplementary information, including Email Notes, Seat Comments, and the Reserved Order Banner.
Banner foreground: Sets the text colour for content blocks with supplementary information.

Link colour: Sets the text colour for links with the style tag: class="link".

Sub-container colours

Sub-container border colour: Sets the border colour for sub-container content blocks, including the “Order Details” section in the Checkout Mailer and the Upcoming Event Details in the Upcoming Event Customer Alert.
Sub-container background: Sets the background colour for sub-container content blocks.
Sub-container foreground: Sets the text colour for sub-container content blocks.

Example of a sub-container within the Upcoming Event Customer Alert email template:

Email font

Fallback font: Font the email will revert to if there is an invalid entry in the “Font name” and “Font URL” fields. By default, this is: sans-serif
Font name: Name of font – if using a custom font. Click here for more information on custom fonts. The default font is: Poppins
Font URL: Link to CSS stylesheet of font – if using a custom font. The default URL for the Poppins font is: https://fonts.googleapis.com/css2?family=Poppins:wght@500;600

Customise the MJML email social icons

You can also customise the style of your social media icons, including the background colour and icon image. Social media icons are linked to the merge tag: {{ social }}

To customise your social media icons:

1. Navigate to Settings > General Settings > search “social”.

2. Select the relevant social media platform you wish to customise e.g. 'Facebook'.

3. You can now change the following settings as required:

Background colour: Use this to customise the background colour of the icon. We recommend using hexadecimal colour values. If this field is empty, the icon will appear in the platform’s default brand colour.
Enabled: Use this to control which social media icons appear in your emails:
- True = will appear
- False = will not appear.
Href: Paste a direct link to your social media page here.
Src: Use this to customise the icon image (see below).

Customising the social icon image

1. Upload your preferred icon image to your Subdomain (we recommend uploading a PNG with a transparent background).

2. Click the 3 dots, and from the dropdown, select Copy image URL.

3. Navigate back to your social setting ( Settings > General Settings > search “social”) > select the desired social setting e.g. 'Facebook'.

4. Paste the image URL into the “src” field and click Update to save.

Social icons without customisation:

Social icons with customisation: