Django AllAuth How do you Customize your own HTML or CSS

Question

{% extends "account/base.html" %}

{% load url from future %}
{% load i18n %}

{% block head_title %}{% trans "Signup" %}{% endblock %}

{% block content %}

</style>
<h1><b>Free Membership</b>Sign up Today</h1>
<h1>{% trans "Sign Up" %}</h1>

<p>{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}</p>

<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
  {% csrf_token %}
  {{ form.as_p }}
  {% if redirect_field_value %}
  <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
  {% endif %}
  <button type="submit">{% trans "Sign Up" %} &raquo;</button>
</form>

<h1><b>Free Membership</b>Sign up Today</h1>
{% endblock %}
{% block content2 %}
{% endblock %}

This is the original Code from Django All Auth.

What I want to do is bring it more to life like add some better HTML5 or CSS to it when I do it does not change?

Answer 1

Here's my login.html template (I'm using Bootstrap, Jquery and Font-Awesome for the icons).

{% extends "account/base.html" %} {% load i18n custom_tags account %} {% block head_title %}{% trans "Sign In" %}{% endblock %} {% block common_scripts %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
  // Load jquery straight from the cdn for this page.
  $(function() {
    // We need some mappings for Providers names from AllAuth to the icon class names.
    $('.btn-google').addClass('btn-google-plus');
    $('.btn-linkedin_oauth2').addClass('btn-linkedin');
    $('.fa-linkedin_oauth2').addClass('fa-linkedin');
    $('#id_login').addClass('form-control').removeAttr('autofocus').blur();
    $('#id_password').addClass('form-control');
  });
</script>
{% endblock %} {% block content %}
<div class="container col-md-12">
  <div class="well login-well">
    <div class="socialaccount_ballot">
      <ul class="socialaccount_providers">
        {% load socialaccount %} {% for provider in socialaccount.providers %} {% if provider.id == "openid" %} {% for brand in provider.get_brands %}
        <li>
          <a title="{{ brand.name }}" class="btn btn-block btn-social btn-md btn-{{ provider.id }} socialaccount_provider {{ brand.id }}" href="{% provider_login_url provider.id openid=brand.openid_url process=" login " %}">
            <i class="fa fa-{{ provider.id }}"></i>Log in with {{ brand.name }}
          </a>
        </li>
        {% endfor %} {% endif %}
        <li>
          <a title="{{ provider.name }}" class="btn btn-block btn-social btn-md socialaccount_provider btn-{{ provider.id }}" href="{% provider_login_url provider.id process=" login " %}">
            <i class="fa fa-{{ provider.id }}"></i>Log in with {{ provider.name }}
          </a>
        </li>
        {% endfor %}
      </ul>
      <hr>

      <form class="django-login" method="POST" action="{% url 'login' %}">
        {% csrf_token %} {% if form.non_field_errors %}
        <div class="alert alert-warning">
          <ul class="alert-message">
            {% for error in form.non_field_errors %}
            <li>{{ error }}</li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}
        <div class="input-group {% if form.login.errors %}has-error{% endif %}">
          <span class="input-group-addon glyphicon glyphicon-envelope"></span>
          {{ form.login }}
        </div>

        <div class="input-group {% if form.password.errors %}has-error{% endif %}">
          <span class="input-group-addon glyphicon glyphicon-lock"></span>
          {{ form.password }}
        </div>

        <div class="fieldWrapper form-inline remember text-center">
          {{ form.remember }}
          <label for="id_remember" class="text-muted">Remember me</label>
        </div>

        {% if redirect_field_value %}
        <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />{% endif %}
        <div class="btn-div pull-center">
          <button class="btn btn-primary btn-block" type="submit">{% trans "Sign In" %}</button>
        </div>
      </form>
    </div>
    <hr>
    <div>
      <small><a class="text-muted" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a></small>
      <br>
      <small><a class="text-muted" href="{% url 'signup' %}">Sign up</a></small>
    </div>
  </div>
</div>
{% endblock %}

And how it looks:

Answer 2

You can put custom templates for allauth in your template directory under account folder. Django allauth would take the custom template from it and renders it.

Following is sample signup page I have created some days ago:

{% extends "base.html" %}
{% load staticfiles %}
{% load socialaccount %}

{% block extra_body %}account-bg{% endblock %}

{% block partial %}
    <div class="container">
        <div class="row">
          <div class="account-form-container">
            <div class="row">
              <div class="col-md-12">
                <h3>Create New Account</h3>
              </div>
            </div>
            <div class="row">
                    <form class="form-horizontal signup-form" id="userSignupForm" action="{% url "account_signup" %}" method="post" role="form">
                    {% csrf_token %}
                    {% if request.GET.next %}
                        <input type="hidden" name="next" value="{{request.GET.next}}">
                    {% endif %}

                    {% if form.non_field_errors %}
                    <div class="fieldWrapper alert alert-danger">
                        <ul>
                        {% for error in form.non_field_errors %}
                                <li>{{ error | lower}}</li>
                        {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                        <div class="col-lg-12">
                            <div class="form-group inner-addon left-addon {% if form.email.errors %}has-error{% endif %}">
                                <i class="icon-user"></i>
                                <input class="form-control login-field" type="text" id="id_email" name="email" placeholder="Email">
                                <span class="help-block">{{ form.email.errors }}</span>
                            </div>
                            <div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
                                <i class="icon-lock"></i>
                                <input class="form-control login-field" type="password" id="id_password1" name="password1" placeholder="Password">
                                <span class="help-block">{{ form.password1.errors }}</span>
                            </div>

                            <div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
                                <i class="icon-lock"></i>
                                <input class="form-control login-field" type="password" id="id_password2" name="password2" placeholder="Confirm Password">
                                <span class="help-block">{{ form.password1.errors }}</span>
                            </div>

                            <div class="form-group">
                              <div class="col-md-5">
                                <button type="submit" class="btn btn-complete btn-bold pull-right">Sign Up</button>
                              </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

I hope this would help you.