如何在没有引导程序的情况下自定义django表单和成功消息

Question

我目前正在制作一个注册页面。我正在使用django的注册表格和消息提醒。但是，我不使用引导程序，也不想使用引导程序。如何使用纯CSS自定义我的注册表格和消息提醒？

在这里，我为我的消息警报提供代码：

base.html

<div class="alert">  
{% if messages %}  
{% for message in messages %}  
{{message}}
{% endfor %}
{% endif %}
</div>

视图.py

def register(request):
if request.method == 'POST':
form = UserCreationForm(request.POST)
if form.is_valid():
username = form.cleaned_data.get('username')
messages.success(request, f'Thank you for registering, {username}.')
return redirect('conference:index')
else:
form = UserCreationForm()
return render(request, 'users/register.html', {'form': form})

我试着把"；警报"；类转换为CSS，但是它根本不起作用。为了使CSS样式发挥作用，我是否遗漏了一些东西？

Answer 1

尝试以下操作-

base.css

ul.messages {
margin:10px 100px;
padding:0;
list-style-type:
none;
}
ul.messages li.success,
ul.messages li.warning,
ul.messages li.error,
ul.messages li.info {
margin:0;
padding:14px 20px;
list-style:none;
color:#fff;
}
ul.messages li.success { background:#81ce81; }
ul.messages li.success a { color:#0ac33e; }
ul.messages li.error { background:#a30029; color:#e9828e; }
ul.messages li.error a { color:#e9828e; }
ul.messages li.info { background:#faffae; color:#696b4e; }
ul.messages li.info a { color:#1586de; }
ul.messages li.warning { background:#de9404; }
ul.messages li.warning a { color:#f49000; }
ul.messages li a.close {
margin:0;
float:right;
opacity:1;
border:0;
box-shadow:none;
text-shadow:none;
}
.login-form {
float:left;
}

base.html

{% if messages %}
<ul class="messages">
{% for message in messages %}
<li class="{{ message.tags }}">
{{ message|safe }}
<a href="#" class="close">x</a>
</li>
{% endfor %}
</ul>
{% endif %}

(以上参考来自Antonio Mele的书"Django 3 By Example"(