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.

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.