Message box styling using crsipy form in Django

Question

After the form is successfully submitted, I would like to show a nice green box to display the success message.

Code in views.py -

 upload.save()
 success = True
 messages.success(request, 'Result Uploaded Successfully.')

In html file -

{% if messages %}
<ul class="messages">
    {% for message in messages %}
    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}

It displays as a bullet list.

settings.py --

CRISPY_TEMPLATE_PACK = "bootstrap3"

If there is any error then it displays in red box but not the form submit successfully message.

Any help is highly appreciated. Thanks in advance.

Answer 1

the message styling is not related with django-crispy-forms. This is something that you need to do yourself.

Here's a snippet that works with bootstrap 3 and I use for my projects for displaying the django messages properly:

{% for message in messages %}
<div class="alert fade in {% if message.tags %} alert-{% if 'error' in message.tags %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}">
    <a class="close" href="#" data-dismiss="alert">&times;</a>
    {{ message }}
</div>
{% endfor %}

So you need to use a div instead of li and change its class to alert alert-{{ message.tags }} (which will be danger, success etc). Notice that bootstrap 3 needs a class name of alert-danger to display the error style (red border) while the django messages return error in message.tags for errors, that's why I have the {% if %} there.