Linking up CSS (and static files in general) to html in Django

Question

My html file isn't reading my css file - I've tried searching for all related questions on this issue, but still can't get the css file to be read. Here's what I have:

settings.py

import os
import os.path

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
...
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
...
STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, "form/static")
)

Beginning of index.html

{% load staticfiles %}
<!DOCTYPE html>
<html leng="en">
    <head>
        <title>Test</title>

        <link rel="stylesheet" 
       href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" 
       href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-
        theme.min.css">
        <link rel="stylesheet" href="{% static 'css/main.css' %}" />
        </head>

My "static" and "templates" folder are on the same level, and main.css is at static/css/main.css

Edit: If it helps, my bootstrap links are being recognized, only main.css is not.

Update: Removed STATICFILES_DIRS from settings.py and added STATIC_ROOT = os.path.join(BASE_DIR, "form/static") as above.

My file structure:

app
  app
  - settings.py
  form
  - static
    - css
      - main.css
  - templates
    - form
      - index.html

can you try putting {% load static %} at the top of the template and let us know if that changes anything? — Asher
– Asher, Commented Feb 16, 2018 at 2:54
I did - at the top of index.html. I tried both {% load static %} and {% load staticfiles %} — ilee
– ilee, Commented Feb 16, 2018 at 3:21

bigblind · Accepted Answer · 2018-02-16 03:30:03Z

0

Try running python manage.py collectstatic. This collects the static files from your STATICFILES_DIRS, and puts them in STATIC_ROOT, where the staticfiles app will look for them to serve them.

If your Django app is running behind another server, like nginx, apache, uwsgi or gunicorn, the configuration of your server can also alter how files are served. Have a look at Django's managing static files documentation for more info.

answered Feb 16, 2018 at 3:30

bigblind

12.9k14 gold badges72 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ilee Over a year ago

I ran that and it gave me an error File "manage.py", line 14 ) from exc ^ SyntaxError: invalid syntax Also, in settings.py above, I don't have a STATIC_ROOT variable - am I supposed to have one?

ilee Over a year ago

I also read here stackoverflow.com/questions/8687927/… that " STATICFILES_DIRS should serve as additional dirs for static files.If you put all your css/js/images into the APP_NAME/static/APP_NAME folder,then there is no need to specify STATICFILES_DIRS "

bigblind Over a year ago

Yes, you should have a `STATIC_ROOT. Also, I'm not sure why you're getting a SyntaxError when running manage.py, as that file is automatically generated by Django. Unless you've somehow changed it.

bigblind Over a year ago

And yep, that's true, you don't need `STATICFILES_DIRS``

ilee Over a year ago

I've successfully run collectstatic, and there's no difference. I had to remove STATICFILES_DIRS as it was exactly the same as STATIC_ROOT and terminal gave this error: ERRORS: ?: (staticfiles.E002) The STATICFILES_DIRS setting should not contain the STATIC_ROOT setting.

PythonBeginner · Accepted Answer · 2023-05-15 06:37:00Z

0

Is form an app? If yes, then you need to register this app in the INSTALLED_APP setting. Next to all the other elements in the list, just add a new element 'form' Only then {% load static %} will work.

Hope this helps!

answered May 15, 2023 at 6:37

PythonBeginner

432 silver badges8 bronze badges

Collectives™ on Stack Overflow

Linking up CSS (and static files in general) to html in Django

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related