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">
Related
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'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
Problem
I have the css files in /static/ and the html files in /templates/.
When I use simple routing, its works well.
#app.route('/newuser', methods=['GET'])
def newuserform():
return render_template("newuser.html")
But in this code, Flask doesn't render correctly the .CSS files, why?
#app.route('/new/user', methods=['GET'])
def newuserform():
return render_template("newuser.html")
Loading .css files in html,
<!-- Bootstrap core CSS -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
Set the link as
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
Or better use static urls generator for Jinja2
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
I have a simple flask application. I have all my css inside static/css directory. I have created a master template in which I want to include css from that directory. Following is what I have tried so far.
<link rel="stylesheet" href="/static/css/justified-nav.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/justified-nav.css') }}" media="screen">
<link rel="stylesheet" type="text/css" href="http://127.0.0.1/static/css/justified-nav.css" media="screen">
In all the cases the file gets loaded but with mime-type text/plain. I have tried putting the css file directly into the static folder as well but no results.
What am I doing wrong? How can I include a css file in a template?
Flask uses the mimetypes module to determine the MIME type of a file, based on its extension. If you get text/plain for a CSS file it means this module returns the wrong MIME type.
On Windows it uses data from the registry, so if the "Content Type" value in HKCR/.css is not set to the proper MIME type it can cause your problem.
Try this and it should work.
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.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/