Local CSS Not Loading on Flask Template - python

Hey I am trying to input custom css into my flask application. I was able to load bootstrap fine but when it comes to my local css I am having touble.
Here is how I am loading my css:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<link ref="stylesheet" href="{{ url_for('static',filename='styles/main_design.css') }}">

Maybe this is because your browser is not refreshing static files you can easily fix this by hot refreshing (ctrl+refresh or ctrl+F5)

Related

Can't load bootstrap css file

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

Can't properly serve static files in flask

I am trying to serve a static image to a css file using flask. I am using render_template() to to get the html file, and I have a static directory for my css and javascript. My other image is loading, but the image that I am referencing from the css file is not working and I get his from the flask terminal: GET /static/static/res/typewriter.jpg HTTP/1.1" 404
I tried typing in the path in my browser and it works fine
This is how I am referencing the image since the CSS file is already in the static directory. background-image: url("/res/typewriter.jpg");
I hope there is an easy fix for this, especially since I am new to this stuff. Thanks!
In your html file you should have this in the header:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='mainpage.css') }}">
... as long as your static directory is named static. In several of my Flask applications I am importing Bootstrap css like so:
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap.css') }}">
Ensure you are visiting http://127.0.0.1:5000 in your browser (unless you changed the default).
Also here is a random example of how I serve images from the static directory:
h1 class="display-3"> <img src="/static/title_welcome.png" alt="about"></h1>

Django: CSS and Images (Static Files) loaded successfully but not applied

I'm using Django Dev Server and trying to test some templates I've made. When I visit addresses, I can see from the server prompt that CSS and images are loaded, but when I'm looking in a browser it is not applied. I'm also using Bootstrap and strangely enough, it does get applied.
I would really like some help. I've seen (and implemented) the solution from various other threads with no avail. Please Help!
Threads I've seen:
Django -- Can't get static CSS files to load
CSS loaded but not applied
Django Static Files - CSS File Won't Load
Django CSS Attachment
Django - CSS problems
CSS loaded but empty
Moving the CSS after bootstrap worked for me.
Like this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'css/checkout.css' %}">

Problems with Routing, Render and CSS in Flask

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') }}">

How to install CSS templates with Flask?

I'm trying to use this template: http://www.free-css.com/free-css-templates/page185/flat-style#shout
and this is my file directory:
app
- static
[--] css (inside static)
[--] images (inside static)
[--] js (inside static)
- templates
but the images won't load properly still:
http://i.imgur.com/Mh71ko9.png
Does anyone know why the images won't properly load?
You have simply dumped the HTML from the website in to your templates folder and all the href and src attributes for images and CSS are still using relative links. These need to be converted to use Flask's static files functionality.
For example, to get the CSS working, change this line:
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
to this:
<link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel='stylesheet' type='text/css' />
And similarly for images, you can change:
<img src="images/logo.png" title="Flat style" />
to
<img src="{{ url_for('static', filename='images/logo.png') }}" title="Flat style" />
You'll need to do this for all static files referenced in the HTML.
Note that your Flask app will need to have imported url_for
from flask import Flask, render_template, url_for

Categories