When refactoring the templates of a Django Project, the response of ONE SPECIFIC .js static file is 404:
Terminal:
[08/Dec/2016 13:54:43] "GET /static/new_site/js/general_scripts.js' HTTP/1.1" 404 1718
[08/Dec/2016 13:54:43] "GET /static/new_site/js/core.min.js HTTP/1.1" 200 758545
HTML
...
<script src="{% static 'new_site/js/general_scripts.js' %}'"></script>
<script src="{% static 'new_site/js/core.min.js' %}"></script>
</body>
</html>
Paths:
.../static/new_site/js/general_scripts.js
.../static/new_site/js/core.min.js
Django==1.8.17
Ubuntu 16.04 (Both files have the same permissions)
OBS: Pycharm IDE is aware of both files
Remove a ' from your line (%}'"):
<script src="{% static 'new_site/js/general_scripts.js' %}"></script>
Instead of:
<script src="{% static 'new_site/js/general_scripts.js' %}'"></script>
Related
I'm trying to build a website in python and flask however my CSS is not loading I don't see anything wrong with my code and I've tried the same code snippet from a few different sites.
My Link:
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
File structure as below:
Error: 127.0.0.1 - - [16/Sep/2021 20:18:34] "GET /static/css/style.css
HTTP/1.1" 404 -
You have written the path to CSS file wrong. It should be:
<link rel="stylesheet" href="{{ url_for('static', filename= 'styles/style.css') }}">
you have written css/style.css. According to the file structure you have attached, it should be styles/style.css.
What is the actual directory your stylesheet is in? I suspect it isn't in /static/css/ under the root directory of your app. This should work if your css file is in /static/css/:
<link href="/static/css/style.css" rel="stylesheet">
Problem: As the title says I am building a django project the base.html extended to homepage.html and works fine, static images appear, but home.css does not works anywhere.
Update
I have switched in the base.html
from this <link rel="stylesheet" href="{% static 'css/home.css' %}">
to this <link href="css/home.css" rel="stylesheet" />
than I have also tried this: <link rel="stylesheet" type="text/css" href="{% static 'css/home.css' %}" />
It deletes a formatting on -s that was caused by another previously used .css that has been deleted since but the formatting sticked on.
I have called this css property thickkk{color: red;}
many places in both base.html and home.html and it still not working.
I have also get the following error message if I inspect the site with/F12/consol/ 127.0.0.1/:1 Refused to apply style from 'http://127.0.0.1:8000/css/home.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Update ERROR message
Refused to apply style from 'http://127.0.0.1:8000/stacic/css/home.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Properties: Python 3.7, Bootstrap 4
settings.py
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'baseprojectfolder/static/')]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
base.html
I have created a base.html that hold the navbar and the footer.
This also has the CSS imported from a static css and also from bootstrap
It finds the static files because it imports the images that are appearing both here and in the home page
<!doctype html>
<html lang="en">
{% load static %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="xz">
<meta name="author" content="xz">
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Click Helps - BE PART OF THE NEW CREATION</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/carousel/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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 'css/home.css' %}">
</head>
....
<!-- Bootstrap core JavaScript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<!-- I have placed in the followring 3 line from bootstrap to make JS work -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
home.html
I have used the center CSS property I have created
{% extends 'applicaonfolderofmine/templates/base.html' %}
{% load static %}
{% block content %}
<main>
<body>
<div class="container">
<h1 id="about" class="center" >About</h1>
...
home.css
it can be found in "django-project/certainapplication/static/css/home.css"
.center {
margin: auto;
width: 60%;
padding: 10px;
}
Error messages in terminal
Not Found: /docs/4.3/dist/css/bootstrap.min.css
[22/Feb/2020 15:55:26] "GET /docs/4.3/dist/css/bootstrap.min.css HTTP/1.1" 404 2494
Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[22/Feb/2020 16:24:29] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509
Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[22/Feb/2020 16:24:29] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509
I have read the following articles but they haven't answered my question:
css for base template in django
Adding css file after all extensions css files
Django UserProfile extension
Background from CSS not working in Base.html
Django mptt, extends "base.html"
{ % extends parent _ template|default:"base.html" % } vs {% extends "base.html" %} in Django?
Django templates extending and CSS
How does Django's extends work?
As you have STATICFILES_DIRS remove STATIC_ROOT then type python manage.py collectstatic, then yes, then run your server again.
The server should respond with the correct MIME Type for JSONP application/javascript and your request should tell jQuery you are loading JSONP dataType: 'jsonp'
Please see this answer for further details ! You can also have a look a this one as it explains why loading .js file with text/plain won't work.
Disable Chrome strict MIME type checking
I'm currently creating django project in pycharm, I was trying to use bootstrap example https://getbootstrap.com/docs/4.4/examples/blog/ but it refused to work.
I created static directory inside my app and put the css files needed for the example to work.
I used {% static %} to reference the css files in the template:
<link rel="stylesheet" href="{% static 'blogs/bootstrap.min.css' %}" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="{% static 'blogs/blog.css' %}" rel="stylesheet">
but the output was https://imgur.com/a/yRfY5bC instead of https://getbootstrap.com/docs/4.4/examples/blog/
However when i put the direct links to the css files:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/4.4/examples/blog/blog.css" rel="stylesheet">
it worked just well.
The css files were properly detected by django when i used the static method:
[11/Jan/2020 16:16:33] "GET / HTTP/1.1" 200 13290
[11/Jan/2020 16:16:33] "GET /static/blogs/bootstrap.min.css HTTP/1.1" 200 159521
[11/Jan/2020 16:16:33] "GET /static/blogs/blog.css HTTP/1.1" 200 1781
[11/Jan/2020 16:16:33] "GET / HTTP/1.1" 200 13290
[11/Jan/2020 16:22:07] "GET / HTTP/1.1" 200 13365
According to your question it seems you did 2 mistakes.
1.to load static in a template its better you use {% load static %}
2.it seems you forgot to configure your static folder in the settings.py file of your project by using STATIC_ROOT
I am a beginner in Python and Django and I have been struggling with the following problem:
On localhost:8000/ webiste is beautiful and working fine but on localhost:8000/invoice/ SOME references are not working. CSS for example does not work but images and JavaScript do.
I am using relative links to point out where my path is.
<script src="{% static "js/jquery.min.js" %}"></script>
<script src="{% static "js/skel.min.js" %}"></script>
<script src="{% static "js/skel-layers.min.js" %}"></script>
<script src="{% static "js/init.js" %}"></script>
<noscript>
<link rel="stylesheet" href="{% static "css/skel.css" %}"/>
<link rel="stylesheet" href="{% static "css/style.css" %}"/>
<link rel="stylesheet" href="{% static "css/style-xlarge.css" %}"/>
</noscript>
<img src="{% static "images/pic07.jpg" %}" alt="" />
Settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static/"),
)
View.py
def home(request):
return render(request, 'principal.html',)
def invoice(request):
return render(request, 'invoice.html',)
When I check the page code with the browser I see the links are being referred as http://localhost:8000/invoice/static/css/somecss.css.
invoice.html is inside /project/folder/templates/ and my .css is inside /project/static/css/. invoice.html is inside the same folder my index.html (principal.html) page, which is working is.
Also, all links inside website/invoice/ page become website/invoice/link instead of website/link
Problem has been resolved removing tag. Also for 404 errors on console due to js files referencing other css files, I added a variable to my template to include the url:
<script>
var url = "{% static 'css/' %}";
</script>
And inside .js I used url.concat('style.css')
Im having some issues in applying my CSS. (I'm using Django 1.5)
Here is my project structure:
project
- app
- project
- static
- css
- style.css
- template
- index.html
My settings are default, apart from adding my db settings.
This is my index.html doing a ref to css:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>app</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
</head>
<body>
</body>
</html>
My error was 404 for style.css location:
[24/May/2013 17:24:57] "GET /static/css/style.css HTTP/1.1" 404 1676
Appreciate if someone can let me know which part I have missed out. Thanks!
If your settings are default it can't work i think. You have to tell Django where static files are served. You do that in the setting file.
This should be of help: https://docs.djangoproject.com/en/dev/howto/static-files/