System Emails
      Back to home
      1. Knowledge Base
      2. Using Duel
      3. System Emails

      System Emails: Customising Default Styling

      This article provides an easy-to-follow guide on customising Duel system emails using HTML & CSS. You'll learn how to make basic changes to our default emails without any coding knowledge required. 

      Introduction

      Enhancing the visual appeal of your system emails can significantly impact their effectiveness. This guide walks you through the process of adding background images, changing background colours, and inserting header images to personalise your system email communications.

      We'll dive into the following topics to provide a more detailed understanding:

      Adding a Background Image to Your System Email

      1. Upload Image to File Manager:

      • Go to Settings.

      • Navigate to File Manager.

      • Choose Upload to add a new image.

      • Copy the URL link of the uploaded image.

      File Manager

      2. Add Background Image to System Emails:

      • Go to Members > Group Profiles > Email Communications.
      • Select the type of email (e.g. Digest, Account verification).

      Screenshot 2023-12-01 at 14.17.35

      3. Insert Custom Template HTML:

      • Click on Custom Template (HTML).
      • Click Insert Default.

      chrome-capture-2023-12-1

      4. Set Background Image:

      • Locate the HTML code:
      HTML copy code

      <body style="background-color: #f8f8f8; margin: 0; padding: 0" class="mobile-bgc">

      • Replace background-color with background-image using the copied URL. Paste the URL you copied in place of NEW_BACKGROUND_IMAGE_URL:

      HTML copy code

      <body style="background-image: url(COPIED_IMAGE_URL); margin: 0; padding: 0" class="mobile-bgc">

      • Replace COPIED_IMAGE_URL with the actual URL you copied.
      • Save the changes.

      Example of an Enhanced System Email with a New Background Image

      Untitled-2

      Changing the Background Colour of Your System Email

      1. Access System Emails:

        • Navigate to Members > Group Profiles > Email Communications.

      2. Insert Custom Template HTML:

        • Click on Custom Template (HTML).
        • Click Insert default.

      3. Set Background Colour in Body:

      • Locate the line with <body style="background-color: #f8f8f8; margin: 0; padding: 0" class="mobile-bgc">.
      • Replace the current background colour value #f8f8f8 with your desired colour:
      HTML copy code

      <body style="background-color: #NEW_BACKGROUND_COLOR; margin: 0; padding: 0" class="mobile-bgc">
      • Replace NEW_BACKGROUND_COLOR with the hexadecimal or RGB value for the colour you want.
      • Save the changes.

      4. Set Background Colour in Table:

      • Locate the line with the table tag:
      HTML copy code

      <table width="100%" align="left" bgcolor="#f8f8f8" border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: #NEW_BACKGROUND_COLOR; border-collapse: collapse; border-spacing: 0; color: #111; font-family: Roboto, sans-serif; font-size: 15px; line-height: 23px; margin: auto" class="mobile-bgc">

      • Replace the current background colour value #f8f8f8 with your desired colour.
      • Save the changes.

      Example of an Enhanced System Email with a New Background Colour

      Untitled (1)-1

      Insert Header Image and URL

      • Access System Email Code Editor:

        • Navigate to the code editor for your system email.

      • Identify Section for Image:

        • Inside the code editor, find the specific section where you want to insert the header image (e.g., before the main text).

      Paste HTML Code:

      • Paste the HTML code for the header image into the desired location.
      HTML copy code

      <p style="text-align: center;">

        <a href="www.glowcosmetics.com" target="_blank">

          <img src="https://obs.duel.me/media/65031634d4f282e8f6fdfc1a/2311/15i2g-screenshot-2023-11-24-at-12-17-09.png" alt="Description of the image" style="width: 100%; max-width: 600px; height: auto;">

        </a>

      </p>
      • Replace placeholders with the actual image URL and website URL.

      Example of an Enhanced System Email with an image URL and website URL

      Untitled (2)-1

      Additional Customisable Elements

      To further tailor your system emails, consider these customisable elements:

      Font Styles and Sizes:

      • Locate relevant HTML tags within the email template and adjust the font-family, font-size, and font-weight properties.

      Button Styling:

      • Modify the CSS properties of buttons to match your brand's aesthetics, such as background-color, color, and border-radius.

      Text Alignment and Spacing:

      • Use CSS properties like text-align, line-height, and margin to control the alignment and spacing of text elements.

      For more ways to enhance text formatting, such as bolding or underlining, refer to this article on HTML Formatting Elements.

      Experiment with these elements to create visually appealing and brand-consistent system emails that resonate with your audience.

      Pro Tip: Enhance Customisation with 3rd Party Programs

      If you desire more extensive customisation options, consider using third-party tools such as Beefree.io. Platforms like Beefree allow you to fully customise your emails and conveniently export the HTML code for seamless integration. This can be particularly beneficial for users seeking advanced design capabilities beyond the scope of traditional email settings.

      Be sure to test the bespoke CTAs and variables thoroughly.