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

1 Like

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.

Is there a timeline for when the ā€œdefaultā€ templates will be updated so that we can make small tweaks without completely changing the look of the email?

We donā€™t have a timeline for this. If you would have interest in this feature please upvote in the original post of this topic.

1 Like

Running into something similar. So ā€˜forkingā€™ the default e-mail essentially breaks it because the same CSS isnā€™t being made available to the new e-mail, correct? This degrades the usefulness of the entire customization feature.

1 Like

@dan.woda At a minimum, would be useful if Auth0 made the default emailā€™s stylesheets available in a read-only fashion so I can manually insert them back into the custom e-mail. Right now, seems like I have to undertake to redo or recreate the styling for the entire e-mail if I want to make the slightest change, which makes it kinda more trouble than itā€™s worth, imo.

If Iā€™m misunderstanding something, please let me know how I can go about this in an easier way.

3 Likes

This also really needs a visualizer of some sort. I donā€™t have access to any of the template variables locally, meaning I have to test with hardwired variables, then manually go back through and swap out every instance where Iā€™m using an Auth0 provided variable. And, as far as I can tell, thereā€™s no way to inspect where or how those variables are set in any central location.

2 Likes

Thanks for the added context @shawn2

This problem still exists as of 12/14/2022.
It seems making any change whatsoever to the template causes the original css to not be applied.
Frustrating to say the least.

correct this is still an issue.