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
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 creating a django project in pycharm and I'm trying to use bootstrap blog example(https://getbootstrap.com/docs/4.4/examples/blog/). I came across a problem: bootstrap.min.css file is not working properly, when I link it like this it works properly,
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
but when I download this file then save it in my_app/static/my_app/bootstrap.min.css and link it like this,
<link rel="stylesheet" href="{% static 'blogs/bootstrap.min.css' %}" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
it doesn't work, the django development server is properly loading the css file
[14/Jan/2020 19:04:26] "GET /static/blogs/bootstrap.min.css HTTP/1.1" 304 0
but it just doesn't have any effect on the site apperance, the blog.css file does have effect as I can see fonts and a few thing change but the bootstrap.min.css file just doesn't.
Try to log your path if it return where your bootstrap.min.css file exists.
Then check if your browser's cache is clear if not then give it a try.
I checked the console in browser, as #tao said, turns out the problem was the
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
in
<link rel="stylesheet" href="{% static 'blogs/bootstrap.min.css' %}" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Thank your for your help
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>
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/