[Python] Django's Password Reset Email is not rendering the CSS properly but grabbing the HTML...

I am using Django's password reset and I'm trying to send the password reset with a custom HTML template for when the user receives the email, its nicely formatted. Right now when I send it, it's sending the content of what's in the HTML file, but the styling isn't there for some reason and I can't figure out why. There should be spacing and all of that, so it looks nice, but it isn't doing it.

password_reset_email.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reset Your Password</title>
<style>
/* Inline styles for email clients */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
.password_reset_email {
max-width: 600px;
margin: 0 auto;
padding: 2rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.password_reset_email-header {
text-align: center;
margin-bottom: 2rem;
}
.password_reset_email-header h1 {
color: #2c3e50;
font-size: 2rem;
margin-bottom: 1rem;
}
.password_reset_email-content {
margin-bottom: 2rem;
}
.password_reset_email-content p {
margin-bottom: 1rem;
color: #333;
}
.password_reset_email-button {
display: inline-block;
background: #3498db;
color: white;
padding: 0.8rem 1.5rem;
border-radius: 4px;
text-decoration: none;
margin: 1rem 0;
}
.password_reset_email-footer {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid #ddd;
text-align: center;
color: #7f8c8d;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="password_reset_email">
<div class="password_reset_email-header">
<h1>Reset Your Password</h1>
</div>

<div class="password_reset_email-content">
<p>Hello,</p>
<p>We received a request to reset your password for your Test account. If you didn't make this request, you can safely ignore this email.</p>
<p>To reset your password, click the button below:</p>

<div style="text-align: center;">
<a href="{{ protocol }}://{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}"
class="password_reset_email-button">
Reset Password
</a>
</div>

<p>This link will expire in 24 hours for security reasons.</p>
<p>If you're having trouble clicking the button, you can copy and paste this link into your browser:</p>
<p style="word-break: break-all; color: #3498db;">
{{ protocol }}://{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
</p>
</div>

<div class="password_reset_email-footer">
<p>This email was sent by Test Domain</p>
<p>If you have any questions, please contact our support team</p>
</div>
</div>
</body>
</html>


views.py

class ResetPasswordView(SuccessMessageMixin, PasswordResetView):
template_name = 'forgot_password.html'
html_email_template_name = 'password_reset_email.html'
subject_template_name = 'Password_reset_subject.txt'
success_message = "We've emailed you instructions for resetting your password, " \
"if an account exists with the email you entered. You should receive an email shortly." \
" If you don't receive an email, " \
"please make sure you've entered the address you registered with, and check your spam folder."
success_url = reverse_lazy('login')


urls.py (main url)

from django.urls import path, include
from users.views import ResetPasswordView
from django.contrib.auth import views as auth_views


urlpatterns = [
path('password_reset/', ResetPasswordView.as_view(), name='password_reset'),

path('password_reset_confirm/<uidb64>/<token>/', auth_views.PasswordResetConfirmView.as_view(template_name='password_confirmation.html'), name='password_reset_confirm'),
path('password_reset_complete/', auth_views.PasswordResetCompleteView.as_view(template_name='password_complete.html'), name='password_reset_complete'),

]


What email shows: Email Example

Continue reading...