I am very new to HTML and CSS. I am trying to link my CSS and JS file to my HTML file, but it is not working. I have looked at many other Stack Overflow questions & answers on this problem, and none of the solutions seemed to have worked. Is there some sort of typo/problem that I am overlooking?
website
|home
|_static
|_home
|_styles.css
|_main.js
|_templates
|_home
|_base.html
This is the top of my base.html file
<head>
{% load static %}
<link rel="stylesheet" href="{% static '../home/styles.css' %}">
<script src="{% static 'home/main.js' %}"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<title>Title</title>
</head>
Here is the relevant code from settings:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
and later
STATIC_URL = '/static/'
Here are the error messages in Command Prompt:
[05/Jun/2019 13:58:15] "GET /home/ HTTP/1.1" 200 1014
Not Found: /home/styles.css
[05/Jun/2019 13:58:15] "GET /static/home/main.js HTTP/1.1" 404 1660
[05/Jun/2019 13:58:15] "GET /home/styles.css HTTP/1.1" 404 2304
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
If this is your entire installed apps, it looks like you haven't installed your own app, and that means staticfiles apps doesn't check that directory since it is not an installed app.Adding your app here would add it to the searched paths and django-dev-server would serve the statics.
change your ../ like this:
<link rel="stylesheet" href="{% static 'home/styles.css' %}">
Related
I'm working on a pyhton django project and now I'm trying to add some style to it with a styles.css file but I just can't get it to work.
My project is named commerce and my app is called auctions and I have the static file under
commerce/auctions/static/auctions/styles.css
My settings.py file include
INSTALLED_APPS = [
'auctions',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
STATIC_URL = '/static/'
My auctions/urls.py
from django.urls import path
from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from . import views
urlpatterns = [
path("", views.index, name="index"),
]
if settings.DEBUG:
urlpatterns += staticfiles_urlpatterns()
My styles.css file
h1 {
color: red;
}
Then in my template file, I have this
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Auctions{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'auctions/styles.css' %}">
</head>
<body>
<h1>Auctions</h1>
</body>
</html>
It feels like I'm missing something obvious.
EDIT:
So I managed to fix my issue, and it was the STATIC_URL in my settings.py that was wrong, it looked in the wrong place. I updated it to:
STATIC_URL = 'auctions/static/'
And now it works. Thanks for your replies and help.
Edit your settings.py file and add WhiteNoise (check here the lib) to the MIDDLEWARE list, above all other middleware apart from Django’s SecurityMiddleware:
MIDDLEWARE = [
# ...
"django.middleware.security.SecurityMiddleware",
"whitenoise.middleware.WhiteNoiseMiddleware",
# ...
]
You should also add this to the settings.py:
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
For more details,check Using WhiteNoise with Django guide.
Addding this in your settings.py should solve the issue:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]
When I access to this static file by just writing path after 'localserver:8000' is works but not working on html file. Even html loads image from image folder in static but CSS is in not applying on that html file. I am stuck for approximately 3 hours please help....
SETTINGS.PY>INSTALLED_APPS
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'multiselectfield',
'shop',
'colorfield',
]
STATC CODE
STATIC_URL = '/static/'
STATICFILES_DIR = [
os.path.join(BASE_DIR, 'static')
]
MEDIA_URL = ''
MEDIA_ROOT = BASE_DIR
HTML
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/base-style.css' %}">
It solved by just restarting all apps.
I have been trying to serve my static files at my Django project, however it cannot find or load it. I have tried different approaches, but none seems to fix the issue.
The static folder is in the same directory as the manage.py.
Also, I have installed the WitheNoise but it also did not solve the problem.
In addition: I am using docker, I have done the collect static and checked the container. All the files are correctly there.
Django version = 2.0.1
Development environment
Code Structure:
Project
- assets
- config
- docs
- project-root
- - static
- - manage.py
- - templates
- - apps
- - project-root
- - - settings.py
- - - urls.py
...
...
setting.py
INSTALLED_APPS = [
'pages.apps.PagesConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
STATIC_URL = '/static/'
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
html file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Bootstrap -->
<link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
<link rel="stylesheet" href="{% static "css/jquery.bxslider.css" %}">
<!-- Custom -->
<link rel="stylesheet" href="{% static "css/style.css" %}">
<link rel="stylesheet" href="{% static "css/animate.css" %}">
</head>
Let me know if there is anything else that I need to add to the post that will help you.
Thank you,
The version of Django is not mentioned in the question, also the environment - (production/development)
-In recent versions of python {% load static %} is recommended instead of {% load staticfiles %}
-If Debug is True and if django.contrib.staticfiles is not present in INSTALLED_APP -
-either add django.contrib.staticfiles to INSTALLED_APP
or
append static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) to urlpatterns to serve the static files.
Also for static files not in app folders the directory needs to be listed in STATICFILES_DIRS-
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'any_other_locations',
]
Edit your settings.py file and add WhiteNoise to the MIDDLEWARE list. The WhiteNoise middleware should be placed directly after the Django SecurityMiddleware (if you are using it) and before all other middleware.
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',
#(Rest of the Middleware here)
]
Routes for the whitenoise cache and static files:
STATIC_URL = '/static/'
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
And run the collectstatic
django-admin collectstatic
or
python3 manage.py collecstatic
If you want to run in inside the docker container, here is more info
https://docs.docker.com/engine/reference/commandline/exec/
More info about Whitenoise:
http://whitenoise.evans.io/en/stable/django.html#
I can't load images and css files in django, although everything seems to be fine in settings.py and in the home.html file itself... what can be a problem here?
In the static folder there are template, css and image folders.
HTML:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<title>Main Page</title>
settings.py:
# Static files (CSS, JavaScript, Images)
MEDIA_ROOT = os.path.join(BASE_DIR, "/media")
#MEDIA_URL = ''
#STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "/static")
]
STATIC_URL = "/static/"
Unfortunately, it looks like this:
django.contrib.staticfiles is not included in your INSTALLED_APPS.
Your settings.py should look like this (in INSTALLED APPS)
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.sites',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
without that static files won't work even if everything else is setup properly because to django it's not installed even though it is (Technically).
On my development env, I get this error when trying to access static css file:
Page not found (404)
Request Method: GET Request URL:
http://127.0.0.1:8000/static/styles.css
Some lines from the settings.py:
DEBUG = True
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
)
STATIC_URL = '/static/'
Path to my styles.css file (where eshop is a root folder of my project):
/eshop/static/styles.css
Relevant lines from my html file:
{% load staticfiles %}
<head>
<link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}" />
...
Could you please advice on what i'm doing wrong?
Add the following to your settings.py file:
# define global static
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
Or just put the static files inside each app:
app_folder/static/app_name