Django project css and js not loading

Question

Had a similar question with an older version of Django...

trying to get my site to load with its css and js

This is the structure of my project

gradMVPV1
--> .idea
--> catalog
    views
    models
    apps
    ....
--> gradMVPV1
    settings
    urls
    wsgi
    ....
--> templates
---->static
     css
     js
     ...
---->index.html
db.sqlite3
manage.py

this is what I have on settings.py

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'templates/static')

Here is a screenshot of my page

Not sure if this helps at all but this is the css on my index.html file

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="static/css/bootstrap.css">
<link rel="stylesheet" href="static/vendors/linericon/style.css">
<link rel="stylesheet" href="static/css/font-awesome.min.css">
<link rel="stylesheet" href="static/vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="static/vendors/lightbox/simpleLightbox.css">
<link rel="stylesheet" href="static/vendors/nice-select/css/nice-select.css">
<link rel="stylesheet" href="static/vendors/animate-css/animate.css">
<!-- main css -->
<link rel="stylesheet" href="static/css/style.css">

I have made these changes based on the answers given

settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'templates')
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
STATIC_URL = 'templates/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'templates/static')

I have also made changes to my index.html file to this effect

{% load staticfiles %}
<!doctype html>
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'vendors/linericon/style.css' %}">
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}">
.....

I am however still getting the same issue, the index page loads with not css, js or images

Can you try removing the first / from /templates/static. That's pointing to the root of your filesystem — anowlinorbit
– anowlinorbit, Commented Dec 1, 2019 at 18:51
First I recommend using the debug console in your browser and see the exact error, but it is most likely a 404. In your template file, if you're reference a static resource, you need to load the static files with {% load staticfiles %}. Put this at the top of your template file. And to access static content, use <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}"> where main.css sits in the folder templates/static/css/main.css — anowlinorbit
– anowlinorbit, Commented Dec 1, 2019 at 19:08
@anowlinorbit not sure I am reading you correctly, do you mind adding that as an answer — Emm
– Emm, Commented Dec 1, 2019 at 19:09
Will do. Also checkout docs.djangoproject.com/en/2.2/howto/static-files — anowlinorbit
– anowlinorbit, Commented Dec 1, 2019 at 19:11

dirkgroten · Accepted Answer · 2019-12-01 20:24:42Z

2

Try add STATICFILES_DIRS = (os.path.join(BASE_DIR, "templates", "static"),) Your settings file, i read from this document https://docs.djangoproject.com/en/2.2/ref/settings/#std:setting-STATICFILES_DIRS

edited Dec 1, 2019 at 20:24

dirkgroten

20.8k2 gold badges32 silver badges46 bronze badges

answered Dec 1, 2019 at 19:09

Tài Hồ

411 silver badge7 bronze badges

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

7 Comments

Emm Over a year ago

should I replace STATIC_URL and STATIC_ROOT or add this in addition to these two

Deepansh Parmani Over a year ago

@Emm STATIC_URL and STATIC_ROOT in setting.py works well. don't know about the other one

Tài Hồ Over a year ago

You can keep your STATIC_URL and using href="{% static 'css/style.css' %}>" instead of href="static/css/style.css"> read this template language docs.djangoproject.com/en/2.2/ref/templates/language

Tài Hồ Over a year ago

And add this to {% load staticfiles %} your html file as guy's answer below i forgot about this

Emm Over a year ago

I have tried that, still getting the same issue. Updated my question with what I tried

|

anowlinorbit · Accepted Answer · 2019-12-01 19:15:57Z

0

If you want to use Django's static files in your templates, then you need to first load the static files with

{% load staticfiles %}

Then, if you wish to use a static item, for example main.css in templates/static/css/main.css you would use this syntax.

  <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">

As an example, here is an edited base.html file of mine:

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
</head>

<body>
<h1>Hello Emm</h1>
</body>
</html>

answered Dec 1, 2019 at 19:15

anowlinorbit

3571 gold badge2 silver badges13 bronze badges

1 Comment

Emm Over a year ago

still getting the same issue...noticed that I get these messages as my terminal updates -> Not Found: /img/f-icons/icon6.png ...this is happening presumably for all css, img and js files. Are there any changes I need to make to settings.py?

Seydina · Accepted Answer · 2019-12-01 19:27:07Z

0

Check your static url and replace it to STATIC_URL = 'templates/static/' or edit settings.py and put static folder into gradMVPV1 folder.

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR,'templates')
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
STATIC_URL = '/static/'

You should have this structure
gradMVPV1
--> .idea
--> catalog
    views
    models
    apps
    ....
--> gradMVPV1
    settings
    urls
    wsgi
    ....

---->static
     css
     js
--> templates
     ...
---->index.html
db.sqlite3
manage.py

answered Dec 1, 2019 at 19:27

Seydina

611 gold badge1 silver badge7 bronze badges

1 Comment

Emm Over a year ago

made these changes, but still getting the same issue. Updated my question

Seydina · Accepted Answer · 2019-12-02 09:09:42Z

Check your static url and replace it to STATIC_URL = '/static/' and edit settings.py.

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR,'templates')
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
STATIC_URL = '/static/'

You may to have this stucture
project
--> name_project1
    static
       name_project1
           file1.css
           file2.css
    templates
       name_project1
           base.html
           ...
--> project
    settings.py
    __init__.py
    urls.py
    ...
db.sqlite3
manage.py

Collectives™ on Stack Overflow

Django project css and js not loading

4 Answers 4

7 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related