i downloaded a website template from bootstrap and i’ve used it into my django project.then i’ve edited it and the html is loading on running it but the css isn’t loading.i have tried several ways to troubleshoot the problems but it ain’t working.kindly need assistance.
this is my code snippets,
import os
‘’’
STATIC_URL = ‘static/’
STATIC_ROOT = os.path.join(BASE_DIR, ‘static’)
DEBUG = True
''' am using python manage.py runserverWelcome @SMARTCODERTECH !
We’ll need to see the directory structure you’re using for these CSS files, what you have in your template for referencing those files, and your STATICFILES_DIRS setting (if you have one).
in debug mode, use STATICFILES_DIRS instead STATIC_ROOT.
STATIC_URL = ‘static/’
# STATIC_ROOT = os.path.join(BASE_DIR, ‘static’) # delete
STATICFILES_DIRS = [BASE_DIR / 'static']
DEBUG = True
Note: The previous answer is not necessarily correct.
While STATICFILES_DIRS is frequently used, it is not a requirement. It is only needed if you are supplying static files other than those in apps.
Also, the setting depends upon the directories being used to supply those files. There is no requirement that the directory being referenced is named static, nor that there be only one entry in that list.
That is why we need to understand how you have your static files organized and how you’re trying to reference them.
okay i’m still learning and can you guys show me how you guys copy your file directory tree coz am trying to generate the file tree from my project and it’s too long.how do you co it so that i can post it here on reply
or you can use this screenshot
this is my static file setting
import os
STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
and this down here is how i’ve linked the css to my template
<title>Moderna Bootstrap Template - Index</title>
{% load static %}
<meta content="" name="description">
<meta content="" name="keywords">
<link href="{% static 'main/img/favicon.png' %}" rel="icon">
<link href="{% static 'main/img/apple-touch-icon.png' %}" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="{% static 'main/vendor/animate.css/animate.min.css' %}" rel="stylesheet">
<link href="{% static 'main/vendor/aos/aos.css' %}" rel="stylesheet">
<link href="{% static 'main/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'main/vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
<link href="{% static 'main/vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
<link href="{% static 'main/vendor/glightbox/css/glightbox.min.css' %}" rel="stylesheet">
<link href="{% static 'main/vendor/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="{% static 'main/css/style.css' %}" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
yes i did run and it didn’t work
What is the full path of your STATIC_ROOT?
this are traceback on vscode console
[29/Jul/2024 16:58:51] "GET / HTTP/1.1" 200 18610
[29/Jul/2024 16:58:52] "GET /static/main/vendor/glightbox/css/glightbox.min.css HTTP/1.1" 404 1888
[29/Jul/2024 16:58:52] "GET /static/main/vendor/boxicons/css/boxicons.min.css HTTP/1.1" 404 1882
[29/Jul/2024 16:58:52] "GET /static/main/vendor/bootstrap-icons/bootstrap-icons.css HTTP/1.1" 404 1900
[29/Jul/2024 16:58:52] "GET /static/main/vendor/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 1888
[29/Jul/2024 16:58:52] "GET /static/main/vendor/animate.css/animate.min.css HTTP/1.1" 404 1876
[29/Jul/2024 16:58:52] "GET /static/main/vendor/aos/aos.css HTTP/1.1" 404 1828
[29/Jul/2024 16:58:52] "GET /static/main/css/style.css HTTP/1.1" 404 1813
[29/Jul/2024 16:58:52] "GET /static/main/vendor/swiper/swiper-bundle.min.css HTTP/1.1" 404 1879
[29/Jul/2024 16:58:52] "GET /static/main/vendor/purecounter/purecounter_vanilla.js HTTP/1.1" 404 1897
[29/Jul/2024 16:58:52] "GET /static/main/img/why-us.jpg HTTP/1.1" 404 1816
[29/Jul/2024 16:58:52] "GET /static/main/img/features-2.svg HTTP/1.1" 404 1828
[29/Jul/2024 16:58:52] "GET /static/main/img/features-1.svg HTTP/1.1" 404 1828
[29/Jul/2024 16:58:52] "GET /static/main/img/features-3.svg HTTP/1.1" 404 1828
[29/Jul/2024 16:58:52] "GET /static/main/img/features-4.svg HTTP/1.1" 404 1828
[29/Jul/2024 16:58:52] "GET /static/main/vendor/aos/aos.js HTTP/1.1" 404 1825
[29/Jul/2024 16:58:52] "GET /static/main/vendor/bootstrap/js/bootstrap.bundle.min.js HTTP/1.1" 404 1903
[29/Jul/2024 16:58:53] "GET /static/main/vendor/swiper/swiper-bundle.min.js HTTP/1.1" 404 1876
[29/Jul/2024 16:58:53] "GET /static/main/vendor/glightbox/js/glightbox.min.js HTTP/1.1" 404 1882
[29/Jul/2024 16:58:53] "GET /static/main/vendor/isotope-layout/isotope.pkgd.min.js HTTP/1.1" 404 1897
[29/Jul/2024 16:58:53] "GET /static/main/vendor/waypoints/noframework.waypoints.js HTTP/1.1" 404 1897
[29/Jul/2024 16:58:53] "GET /static/main/js/main.js HTTP/1.1" 404 1804
[29/Jul/2024 16:58:53] "GET /static/main/vendor/php-email-form/validate.js HTTP/1.1" 404 1873
this is the javascript console
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
bootstrap-icons.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
boxicons.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
bootstrap.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
:8000/static/main/vendor/animate.css/animate.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
:8000/static/main/vendor/aos/aos.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
:8000/static/main/css/style.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
:8000/static/main/vendor/swiper/swiper-bundle.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
why-us.jpg:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
features-2.svg:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
features-1.svg:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
features-3.svg:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
features-4.svg:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
purecounter_vanilla.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
aos.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
bootstrap.bundle.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
glightbox.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
swiper-bundle.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
isotope.pkgd.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
noframework.waypoints.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
main.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
validate.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
bootstrap-icons.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
glightbox.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
swiper-bundle.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
aos.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
bootstrap.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
animate.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
style.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
boxicons.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)Understand this error
What is the full path of your STATIC_ROOT?
Provide your view, html tempate and base.html code.
Also, did you try:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
Also provide your urls.py
Did you do something like that?
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
haven’t done this lemme try
Sure. Read all my messages, provide properly the code I asked and be descriptive or it would be impossible to understand your problem and help you.
this one has made it work.i’ve added
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
on my urls and then adjusted my STATIC_ROOT and my STATIC_DIRS ,then rerun the python manage.py collectstatic the runserver and it worked.thanks much anefta