Loading css file in django allauth login page
Question
I can't seem to be able to change the css of my allauth login page. I would like to add some custom css to change a few things.
I created a base.css file
div_id_login.form-group{
font-weight:200;
}
That is loaded in my login.html file
{% extends "account/base.html" %}
{% load i18n %}
{% load account socialaccount %}
{% load crispy_forms_tags %}
{% load static %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="{% static 'css/base.css' %}">
</head>
{% block content %}
<h1 style = "text-align: center;">{% trans "Sign In" %}</h1>
...
The div class mentioned in the base.css file should be this:
I have made changes to my base.html file according to the answer suggested:
{% load static %}
<!DOCTYPE html>
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/base.css' %}">
</head>
However, still the css changes I made are still not appearing in login.html
2 answers
solution1
1 2019-12-18 16:08:38
Your login.html file extends account/base.html so you need to include this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="{% static 'css/base.css' %}">
</head>
inside a block that is defined in account/base.html. Often there is an extra_head block or similar that you can use for the job.
solution2
0 2020-05-28 15:18:15
Maybe it's because Django can't find your base.css. Do you get a 404 error when you access the CSS upon visiting the webpage? The error would appear like this in the console while running the server:
GET /static/account/style.css HTTP/1.1" 404 1677
In my case, my CSS file is located in <project directory>/static/account/style.css
Django can't seem to find my style.css so I added this in the project's settings.py :
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
And the CSS file is working now. Django's static file searching is kind of tricky.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.