Allow color customization in email templates

Feature: Color/style customisation in email templates

Description: For example, I should be able to change the color of the buttons according to the color ranges of our product. e.g. any color other than orange

Screen Shot 2021-04-06 at 3.36.14 PM

Use-case: E.g for email verification / notifications, while the logo can be replaced, but the color of the buttons maybe not in alignment to the look and feel of the app.

@pdumanig,

I think you should be able to change this via the HTML. Were you unable to?

hi
I tried to apply styles to the button, but as an effect it kinda disrupt the overall look and feel of the template.
I was thinking if there is some exposed css for the template, where we can customise some elements.

You can embed a css sheet directly in the HTML too. How to Include CSS in HTML Pages - Tutorial Republic

we’ll try that out.
I hope we should not have to create css for all the elements because it is only the color of the button that we want to change… nothing more.

I’m not sure I understand the request. A style attribute should allow you to directly change the color of the button, without affecting the rest of the template.

For example:
<button style="background-color:tomato;">Button</button>

yes that’s what I did. like I have said, it affects the overall template:

Screen Shot 2021-04-09 at 6.48.22 PM

It kinda clears the original styles, if you do something about the html elements.

Can you please post your code

<html>
  <head>
    <style type="text/css">
      .ExternalClass,.ExternalClass div,.ExternalClass font,.ExternalClass p,.ExternalClass span,.ExternalClass td,img {line-height: 100%;}#outlook a {padding: 0;}.ExternalClass,.ReadMsgBody {width: 100%;}a,blockquote,body,li,p,table,td {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}table,td {mso-table-lspace: 0;mso-table-rspace: 0;}img {-ms-interpolation-mode: bicubic;border: 0;height: auto;outline: 0;text-decoration: none;}table {border-collapse: collapse !important;}#bodyCell,#bodyTable,body {height: 100% !important;margin: 0;padding: 0;font-family: ProximaNova, sans-serif;}#bodyCell {padding: 20px;}#bodyTable {width: 600px;}@font-face {font-family: ProximaNova;src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.eot);src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.eot?#iefix)format("embedded-opentype"),url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.woff) format("woff");font-weight: 400;font-style: normal;}@font-face {font-family: ProximaNova;src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.eot);src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.eot?#iefix)format("embedded-opentype"),url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.woff) format("woff");font-weight: 600;font-style: normal;}@media only screen and (max-width: 480px) {#bodyTable,body {width: 100% !important;}a,blockquote,body,li,p,table,td {-webkit-text-size-adjust: none !important;}body {min-width: 100% !important;}#bodyTable {max-width: 600px !important;}#signIn {max-width: 280px !important;}}
    </style>
  </head>
  <body>
    <center>
      <table
        style='width: 600px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0;padding: 0;font-family: "ProximaNova", sans-serif;border-collapse: collapse !important;height: 100% !important;'
        align="center"
        border="0"
        cellpadding="0"
        cellspacing="0"
        height="100%"
        width="100%"
        id="bodyTable"
      >
        <tr>
          <td
            align="center"
            valign="top"
            id="bodyCell"
            style='-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;margin: 0;padding: 20px;font-family: "ProximaNova", sans-serif;height: 100% !important;'
          >
            <div class="main">
              <p
                style="text-align: center;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%; margin-bottom: 30px;"
              >
                <img
                  src="https://cdn.auth0.com/styleguide/2.0.9/lib/logos/img/badge.png"
                  width="50"
                  alt="Your logo goes here"
                  style="-ms-interpolation-mode: bicubic;border: 0;height: auto;line-height: 100%;outline: none;text-decoration: none;"
                />
              </p>

              <h1>Welcome to {{ application.name}}!</h1>

              <p>Thank you for signing up. Please verify your email address by clicking the following link:</p>

              <p><a href="{{ url }}" style="background-color:green;">Confirm my account</a></p>

              <p>
                If you are having any issues with your account, please don’t hesitate to contact us by replying to
                this mail.
              </p>

              <br />
              Thanks!
              <br />

              <strong>{{ application.name }}</strong>

              <br /><br />
              <hr style="border: 2px solid #EAEEF3; border-bottom: 0; margin: 20px 0;" />
              <p style="text-align: center;color: #A9B3BC;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;">
                If you did not make this request, please contact us by replying to this mail.
              </p>
            </div>
          </td>
        </tr>
      </table>
    </center>
  </body>
</html>

Take note that the only change that I did from this template is the style attribute:
<p><a href="{{ url }}" style="background-color:green;">Confirm my account</a></p>

And if I send a test mail, here’s how it looks like:

Screen Shot 2021-04-14 at 5.24.49 PM

like I have said, it disrupts the whole style after a minor change.

AND, by the way, Resetting the template doesnt work.

I see this as my default template. Can you please provide an example of the default template? I don’t see any changes other than the background color.

I think that’s not it… Thats what you will get if you modify something in the template… this is the look of the default for every type of emails:

I see, it looks like this is not the style tag change that is causing the template to look different, but rather the customization of the template itself. I’ll do some investigation next week and get back.