Django Allauth Stiliziranje
Allauth Šablonski Sistemi
Allauth nudi podrazumijevane šablone za prikaze autentifikacije korisnika (prijava, registracija itd.) ali su oni obični i bez stila.
Postoje dva načina za prilagođavanje izgleda i dojma:
Kopiranje svih šablona u projekat i njihovo individualno stiliziranje. Ovo daje najviše kontrole, ali može biti nezgodno za složene postavke.
Zamjena nekoliko centralnih šablona koji kontroliraju opći raspored i stilove elemenata. Ovo je brže, ali manje fleksibilno.
Glavni šabloni uključuju rasporede:
bazni | ulazni | upravljanje nalogom |
|---|---|---|
|
|
|
ForgeAI (root)
└── ForgeAI
├── ForgeAI
├── static
│ ├── allauth_ui
│ │ └── input.css
│ └── css
│ └── global.css
├── templates
│ ├── account
│ │ ├── email
│ │ │ ├── email_confirmation_message.txt
│ │ │ └── email_confirmation_subject.txt
│ │ ├── messages
│ │ │ ├── cannot_delete_primary_email.txt
│ │ │ ├── email_confirmation_failed.txt
│ │ │ ├── email_confirmation_sent.txt
│ │ │ ├── email_confirmed.txt
│ │ │ ├── email_deleted.txt
│ │ │ ├── logged_in.txt
│ │ │ ├── logged_out.txt
│ │ │ ├── login_code_sent.txt
│ │ │ ├── password_changed.txt
│ │ │ ├── password_set.txt
│ │ │ ├── primary_email_set.txt
│ │ │ └── unverified_primary_email.txt
│ │ ├── snippets
│ │ │ ├── already_logged_in.html
│ │ │ └── warn_no_email.html
│ │ ├── account_inactive.html
│ │ ├── base_entrance.html
│ │ ├── base_manage_email.html
│ │ ├── base_manage_password.html
│ │ ├── base_manage.html
│ │ ├── base_reauthenticate.html
│ │ ├── base.html
│ │ ├── confirm_login_code.html
│ │ ├── email_change.html
│ │ ├── email_confirm.html
│ │ ├── email.html
│ │ ├── login.html
│ │ ├── logout.html
│ │ ├── password_change.html
│ │ ├── password_reset_done.html
│ │ ├── password_reset_from_key_done.html
│ │ ├── password_reset_from_key.html
│ │ ├── password_reset.html
│ │ ├── password_set.html
│ │ ├── reauthenticate.html
│ │ ├── request_login_code.html
│ │ ├── signup_closed.html
│ │ ├── signup.html
│ │ ├── verification_sent.html
│ │ └── verified_email_required.html
│ ├── admin
│ │ └── base_site.html
│ ├── allauth
│ │ ├── elements
│ │ │ ├── alert.html
│ │ │ ├── badge.html
│ │ │ ├── button.html
│ │ │ ├── field.html
│ │ │ ├── fields.html
│ │ │ ├── form.html
│ │ │ ├── h1.html
│ │ │ ├── h2.html
│ │ │ ├── hr.html
│ │ │ ├── img.html
│ │ │ ├── p.html
│ │ │ ├── panel.html
│ │ │ ├── provider_list.html
│ │ │ ├── provider.html
│ │ │ └── table.html
│ │ └── layouts
│ │ ├── base.html
│ │ ├── entrance.html
│ │ └── manage.html
│ ├── mfa
│ │ ├── email
│ │ │ ├── recovery_codes_generated_message.txt
│ │ │ ├── recovery_codes_generated_subject.txt
│ │ │ ├── totp_activated_message.txt
│ │ │ ├── totp_activated_subject.txt
│ │ │ ├── totp_deactivated_message.txt
│ │ │ └── totp_deactivated_subject.txt
│ │ ├── messages
│ │ │ ├── recovery_codes_generated.txt
│ │ │ ├── totp_activated.txt
│ │ │ └── totp_deactivated.txt
│ │ ├── recovery_codes
│ │ │ ├── base.html
│ │ │ ├── download.txt
│ │ │ ├── generate.html
│ │ │ └── index.html
│ │ ├── totp
│ │ │ ├── activate_form.html
│ │ │ ├── base.html
│ │ │ └── deactivate_form.html
│ │ ├── authenticate.html
│ │ ├── base_entrance.html
│ │ ├── base_manage.html
│ │ ├── index.html
│ │ └── reauthenticate.html
│ └── socialaccount
│ ├── snippets
│ │ ├── provider_list.html
│ │ └── social_login.html
│ ├── authentication_error.html
│ ├── base.html
│ ├── connections.html
│ ├── login.html
│ └── signup.html
{% load i18n %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{% block head_title %}
{% endblock head_title %}
</title>
{% block extra_head %}
{% endblock extra_head %}
</head>
<body>
{% block body %}
{% if messages %}
<div>
<strong>{% trans "Messages:" %}</strong>
<ul>
{% for message in messages %}<li>{{ message }}</li>{% endfor %}
</ul>
</div>
{% endif %}
<div>
<strong>{% trans "Menu:" %}</strong>
<ul>
{% if user.is_authenticated %}
{% url 'account_email' as email_url %}
{% if email_url %}
<li>
<a href="{{ email_url }}">{% trans "Change Email" %}</a>
</li>
{% endif %}
{% url 'account_change_password' as change_password_url %}
{% if change_password_url %}
<li>
<a href="{{ change_password_url }}">{% trans "Change Password" %}</a>
</li>
{% endif %}
{% url 'mfa_index' as mfa_url %}
{% if mfa_url %}
<li>
<a href="{{ mfa_url }}">{% trans "Two-Factor Authentication" %}</a>
</li>
{% endif %}
{% url 'usersessions_list' as usersessions_list_url %}
{% if usersessions_list_url %}
<li>
<a href="{{ usersessions_list_url }}">{% trans "Sessions" %}</a>
</li>
{% endif %}
{% url 'account_logout' as logout_url %}
{% if logout_url %}
<li>
<a href="{{ logout_url }}">{% trans "Sign Out" %}</a>
</li>
{% endif %}
{% else %}
{% url 'account_login' as login_url %}
{% if login_url %}
<li>
<a href="{{ login_url }}">{% trans "Sign In" %}</a>
</li>
{% endif %}
{% url 'account_signup' as signup_url %}
{% if signup_url %}
<li>
<a href="{{ signup_url }}">{% trans "Sign Up" %}</a>
</li>
{% endif %}
{% endif %}
</ul>
</div>
{% block content %}
{% endblock content %}
{% endblock body %}
{% block extra_body %}
{% endblock extra_body %}
</body>
</html>
{% extends "allauth/layouts/base.html" %}
{% block content %}{% endblock %}
{% extends "allauth/layouts/base.html" %}
{% block content %}{% endblock %}
Globalni CSS
Globalni CSS fajl se može koristiti za stiliziranje elemenata na svim stranicama. Ovaj fajl: global.css se nalazi u direktorij ForgeAI (root)/static/css i uključuje u base.html šablon.
*
{
box-sizing: border-box !important;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif !important;
}
a
{
color: #ededed !important;
}
body
{
background-color: #151515 !important;
color: #ededed !important;
}
#main-title
{
color: #ededed;
font-size: 6rem;
margin-right: 2rem;
}
#main-subtitle
{
color: #a4a4a4;
font-size: 3.5rem;
}
Kopiranje i Modifikacija Šablona
i šablone elemenata (zaglavlja, tipke, obrasci itd.). Zamjenom ovih šablona elemenata, može promijeniti stilove na svim stranicama bez modifikacije sadržaja.
{% load i18n %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{% block head_title %}
{% endblock head_title %}
</title>
{% block extra_head %}
{% endblock extra_head %}
</head>
<body>
{% block body %}
{% if messages %}
<div>
<strong>{% trans "Messages:" %}</strong>
<ul>
{% for message in messages %}<li>{{ message }}</li>{% endfor %}
</ul>
</div>
{% endif %}
<div>
<strong>{% trans "Menu:" %}</strong>
<ul>
{% if user.is_authenticated %}
{% url 'account_email' as email_url %}
{% if email_url %}
<li>
<a href="{{ email_url }}">{% trans "Change Email" %}</a>
</li>
{% endif %}
{% url 'account_change_password' as change_password_url %}
{% if change_password_url %}
<li>
<a href="{{ change_password_url }}">{% trans "Change Password" %}</a>
</li>
{% endif %}
{% url 'mfa_index' as mfa_url %}
{% if mfa_url %}
<li>
<a href="{{ mfa_url }}">{% trans "Two-Factor Authentication" %}</a>
</li>
{% endif %}
{% url 'usersessions_list' as usersessions_list_url %}
{% if usersessions_list_url %}
<li>
<a href="{{ usersessions_list_url }}">{% trans "Sessions" %}</a>
</li>
{% endif %}
{% url 'account_logout' as logout_url %}
{% if logout_url %}
<li>
<a href="{{ logout_url }}">{% trans "Sign Out" %}</a>
</li>
{% endif %}
{% else %}
{% url 'account_login' as login_url %}
{% if login_url %}
<li>
<a href="{{ login_url }}">{% trans "Sign In" %}</a>
</li>
{% endif %}
{% url 'account_signup' as signup_url %}
{% if signup_url %}
<li>
<a href="{{ signup_url }}">{% trans "Sign Up" %}</a>
</li>
{% endif %}
{% endif %}
</ul>
</div>
{% block content %}
{% endblock content %}
{% endblock body %}
{% block extra_body %}
{% endblock extra_body %}
</body>
</html>
{% load i18n %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{% block head_title %}
{% endblock head_title %}
</title>
{% block extra_head %}
{% endblock extra_head %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a:contains('GitHub')").parent().addClass("github-link");
$("a:contains('Google')").parent().addClass("google-link");
$("a:contains('Google')").parent().parent().addClass("ul-removal");
});
</script>
{% load static %}
<link rel='stylesheet' type="text/css" href="{% static 'css/global.css' %}">
<style>
a
{
text-decoration: none;
color: #ededed;
}
ul
{
list-style: none;
padding: 0;
margin: 0;
}
.nav-bar
{
height: 4rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
background-color: rgb(40, 40, 40);
}
.nav-bar ul
{
display: flex;
gap: 1.25rem;
}
.nav-bar ul li
{
background-color: rgb(40, 40, 40);
padding: 1rem;
border-radius: 0.65rem;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
transition: 0.2s ease;
}
.nav-bar ul li:hover
{
background-color: rgb(70, 70, 70);
transition: 0.2s ease;
}
.auth-container
{
margin-top: 2rem !important;
width: 60%;
margin: auto;
background-color: rgb(40, 40, 40);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
border-radius: 0.65rem;
padding: 1rem;
gap: 1rem;
}
.auth-container form p,
.auth-container form p label
{
margin: 1rem 0 !important;
}
.auth-container input[type="checkbox"]
{
display: inline;
width: 1rem;
border-style: none;
border-radius: 50%;
scale: 1.25;
}
button,
input
{
background-color: rgb(140, 140, 140);
padding: 0.75rem;
border-radius: 0.65rem;
font-size: 1rem;
font-weight: 500;
border-style: none;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
width: 100%;
transition: 0.2s ease;
margin: 0.5rem 0;
}
button:hover
{
background-color: rgb(70, 70, 70);
transition: 0.2s ease;
cursor: pointer;
}
</style>
</head>
<body>
{% block body %}
{% if messages %}
<div>
<strong>{% trans "Messages:" %}</strong>
<ul>
{% for message in messages %}<li>{{ message }}</li>{% endfor %}
</ul>
</div>
{% endif %}
<div class='nav-bar'>
<a href="/"><strong style='
font-size: 30px;
'>{% trans "ForgeAI" %}</strong><a>
<ul>
<li>
<a href="{% url 'sessions' %}">{% trans "MIDI Generator" %}</a>
</li>
{% if user.is_authenticated %}
<li>
<a href="{% url 'profile' %}">{% trans "My Account" %}</a>
</li>
{% url 'account_email' as email_url %}
{% if email_url %}
<li>
<a href="{{ email_url }}">{% trans "Change Email" %}</a>
</li>
{% endif %}
{% url 'account_change_password' as change_password_url %}
{% if change_password_url %}
<li>
<a href="{{ change_password_url }}">{% trans "Change Password" %}</a>
</li>
{% endif %}
{% url 'mfa_index' as mfa_url %}
{% if mfa_url %}
<li>
<a href="{{ mfa_url }}">{% trans "Two-Factor Authentication" %}</a>
</li>
{% endif %}
{% url 'usersessions_list' as usersessions_list_url %}
{% if usersessions_list_url %}
<li>
<a href="{{ usersessions_list_url }}">{% trans "Sessions" %}</a>
</li>
{% endif %}
{% url 'account_logout' as logout_url %}
{% if logout_url %}
<li>
<a href="{{ logout_url }}">{% trans "Sign Out" %}</a>
</li>
{% endif %}
{% else %}
{% url 'account_login' as login_url %}
{% if login_url %}
<li>
<a href="{{ login_url }}">{% trans "Sign In" %}</a>
</li>
{% endif %}
{% url 'account_signup' as signup_url %}
{% if signup_url %}
<li>
<a href="{{ signup_url }}">{% trans "Sign Up" %}</a>
</li>
{% endif %}
{% endif %}
</ul>
</div>
<div class='card'>
{% block content %}
{% endblock content %}
{% endblock body %}
{% block extra_body %}
{% endblock extra_body %}
</div>
</body>
</html>
Modifikacija kod html elemenata
Radi lakšeg stiliziranja auth stranica koje koriste allauth, okolo svakog elementa se može dodati div sa klasom auth-element koja će omogućiti lakše stiliziranje elemenata.
primjer kod signup.html:
{% extends "account/base_entrance.html" %}
{% load allauth i18n %}
{% block head_title %}
{% trans "Signup" %}
{% endblock head_title %}
{% block content %}
{% element h1 %}
{% trans "Sign Up" %}
{% endelement %}
{% setvar link %}
<a href="{{ login_url }}">
{% endsetvar %}
{% setvar end_link %}
</a>
{% endsetvar %}
{% element p %}
{% blocktranslate %}Already have an account? Then please {{ link }}sign in{{ end_link }}.{% endblocktranslate %}
{% endelement %}
{% if not SOCIALACCOUNT_ONLY %}
{% url 'account_signup' as action_url %}
{% element form form=form method="post" action=action_url tags="entrance,signup" %}
{% slot body %}
{% csrf_token %}
{% element fields form=form unlabeled=True %}
{% endelement %}
{{ redirect_field }}
{% endslot %}
{% slot actions %}
{% element button tags="prominent,signup" type="submit" %}
{% trans "Sign Up" %}
{% endelement %}
{% endslot %}
{% endelement %}
{% endif %}
{% if SOCIALACCOUNT_ENABLED %}
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
{% endif %}
{% endblock content %}
{% extends "account/base_entrance.html" %}
{% load allauth i18n %}
{% block head_title %}
{% trans "Signup" %}
{% endblock head_title %}
{% block content %}
<div class="auth-container">
{% element h1 %}
{% trans "Sign Up" %}
{% endelement %}
{% setvar link %}
<a href="{{ login_url }}">
{% endsetvar %}
{% setvar end_link %}
</a>
{% endsetvar %}
{% element p %}
{% blocktranslate %}Already have an account? Then please {{ link }}sign in{{ end_link }}.{% endblocktranslate %}
{% endelement %}
{% if not SOCIALACCOUNT_ONLY %}
{% url 'account_signup' as action_url %}
{% element form form=form method="post" action=action_url tags="entrance,signup" %}
{% slot body %}
{% csrf_token %}
{% element fields form=form unlabeled=True %}
{% endelement %}
{{ redirect_field }}
{% endslot %}
{% slot actions %}
{% element button tags="prominent,signup" type="submit" %}
{% trans "Sign Up" %}
{% endelement %}
{% endslot %}
{% endelement %}
{% endif %}
{% if SOCIALACCOUNT_ENABLED %}
{% include "socialaccount/snippets/login.html" with page_layout="entrance" %}
{% endif %}
</div>
{% endblock content %}
Dizajn Stranica
Svaka stranica ima .nav-bar CSS klasu koja se može koristiti za stiliziranje navigacijske trake (nalazi se u base.html).
Procedura Stiliziranja
Ako se želi promijeniti stil globalno, dovoljno je promijeniti
global.cssfajl.Kako je definiran
auth-elementuglobal.cssfajlu, svi elementi koji imaju ovu klasu će biti stilizirani prema definiciji u ovom fajlu (to su auth stranice). Ako se želi promijeniti stil, dovoljno je promijenitiglobal.cssfajl istyle tagunutarbase.html.Ako se želi promijeniti stil samo jednog elementa, npr.
signup.html, dovoljno je promijenitisignup.htmlfajl.
Last modified: 04 June 2024