[Answered ]-How to customize django forms and success message without bootstrap?

by

1👍

✅

Try the following-

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 %}

(Reference to the above is from Antonio Mele’s book "Django 3 By Example")

👤F A

Leave a comment