Static CSS not being applied to django-allauth templates

user_14010777 0
Viewed 785

My templates do not seem to be able to access static css files. The project using all-auth for authentication. My file structure is as follow:

    Project Folder   
      app 1 
      app 2 
      static
        css
          style.css 
       templates
         account
           login.html
           signup.html
          base.html
          home.html

base.html is as follow:

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Shuffle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href='{% static "css/style.css" %}' rel="stylesheet">
    </head>
    <body>
        <div id="card">
            {% block content %}
            {% endblock %}
          </div> <!--card -->
    </body>
</html>

The rest of the templates extend from base.html. On inspecting the rendered page, all the html are correct but the styling is missing.

Edit:

Error is shown as:

    GET /static/css/style.css HTTP/1.1" 404 1665

Static directory in setting is set as:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
django-allauth django python
2 Answers

It seems like you need to add the setting STATICFILES_DIRS.

You should have all 3 parts in your settings:

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]
user_92256710

It seems like your folder is called CSS all uppercase, but in your template code (<link href='{% static "css/style.css" %}' rel="stylesheet">) you have folder name css in lowercase.

I also see that the folder Static has the first letter capitalized, but the settings code STATIC_ROOT = os.path.join(BASE_DIR, "static") has the folder name as all lowercase.

Both of these have to match their counterparts, capitalization is important in this part.

user_92256710
Related