CODEWITHSUNDEEP
pythondjango
Emm
Emm

Reputation: 2507

Django project css and js not loading

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

screenshot

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

Upvotes: 0

Views: 428

Answers (4)

Seydina
Seydina

Reputation: 61

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

Upvotes: 0

T&#224;i Hồ
T&#224;i Hồ

Reputation: 41

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

Upvotes: 2

Seydina
Seydina

Reputation: 61

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

Upvotes: 0

anowlinorbit
anowlinorbit

Reputation: 357

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>

Upvotes: 0

Related Questions