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
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.
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:
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:
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.
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.
@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.
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.
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.
