SO i was creating flask project but while working on index.html I wasn't able to access css,javascript etc files from static folder even after static_url
here is the code
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"
rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="{{url_for('static', filename ='css/styles.css ')}}" rel="stylesheet">
</head>
wasn't able to access css files after using url_for('static', filename='path/to/file')
This is how I make it work:
href="{{ url_for('static', filename='filename.css') }}"
the css file is in the folder "static" in the same directory as the html file.
Related
This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 2 months ago.
I am currently learning HTML and I was trying to create an external CSS file. But when I try to link them together I keep getting a 404 error saying that the css file cannot be found. Both the HTML and CSS file is in the same folder. I am using Notepad++.
<html>
<head>
<link rel="stylesheet" type="text/css" href="global.css">
</head>
<body>
<form>
<ul>
<li><h1>Member Login</h1></li>
<li><label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name.."></li>
<li>Password</li>
<li>Submit</li>
<li>Forgot Password</li>
</ul>
</form>
</body>
</html>
This is your code from the third line
<link rel="stylesheet" type="text/css" href="global.css">
you forgot to add a back slash
'<link rel="stylesheet" type="text/css" href="global.css" />
Reference: https://www.freecodecamp.org/news/how-to-link-css-to-html/
Type the path of the CSS file wherever you have saved it correctly in the html file.
Hope it helps
You forgot the closing tag in the link tag it should go
<link rel="stylesheet" type="text/css" href="global.css"/>
I'm learning Flask and I have this basic web application. I'm using Bootstrap 5 and I noticed that if I load the Bootstrap stylesheet my custom CSS does not work (if I remove Bootstrap stylesheet it works fine).
I have this folder structure:
flaskWebsite
|
|__pycache__
|
|templates
|index.html
...
|static
|
|main.css
|main.js
|venv
|
|app.py
Here is some relevant code:
app.py
#app.route("/")
def index():
return render_template('index.html')
index.html
<head>
<title>Home</title>
<!--Custom CSS-->
<link rel="stylesheet" href="{{url_for('static', filename='main.css')}}">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
I tryed to put bootstrap.min.css (downloaded from Bootstrap) into the static folder, but it doesn't change.
Can anyone explain me why does this happen and how can I fix it?
It is called precedence, whenever you have multiple stylesheets in the same html file, if some of them contain elements with the same specificity, the last one will be applied. In your case, Bootstrap css is probably overriding your custom css. Try placing custom css after bootstrap one like this:
<head>
<title>Home</title>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--Custom CSS-->
<link rel="stylesheet" href="{{url_for('static', filename='main.css')}}">
</head>
When adding a prepared template such as bootstrap template into a django project. I change all src path which is linking local statics files such as javascript, css and images.I want to automate this operations .Is there any way for doing this ? In my opinion,using regex it will be possible.Howeever I can not until now
I put a few patterns down to be the example
<img src="images/slide-dark.jpg" alt="" >
<link href="css/animate.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
will be like this
<img src="{% static 'images/slide-dark.jpg' %}">
<link href="{% static 'css/animate.css' %}" rel="stylesheet">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
I tried to integrate this(having a layout.html and index.html) into my app. Before starting I only had index.html with all of my css/javascript includes at the top.
Current file struct
/app
- app_runner.py
/templates
- layout.html
- index.html
/static
/styles
- mystyle.css
Layout.html (mostly css and javascript CDN and my stylesheet)
<!doctype html>
<!-- Latest bootstrap compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jquery -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<!-- Latest bootstrap compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jstree -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<!-- my stylesheet -->
<link rel='stylesheet' type='text/css' href="{{url_for('static',filename='styles/mystyle.css')}}" />
<script type="text/javascript">
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
{% block body %}{% endblock %}
The page, for the most part, renders the same: The jstree appears, bootstrap works, and the rest of my styling is applied. In my css file I have a line that doesn't get applied:
td {
padding: 5px;
}
The developer console shows padding:0, which comes from a bootstrap script. If I change it in the developer console I can get it to change to 5px.
I've heard using !important is bad practice but I tried it anyway with no change. I tried adding a class to all my td so it'd have higher precedent (based on this answer) and have that style (.my_row{padding:5px;}) apply but again it doesn't change. So it seems my css isn't being applied to my table. Other parts of mystyle.css work though.
Any thoughts on why the padding isn't being applied to my table?
So it turns out my stylesheet wasn't refreshing in the cache. I found an answer on this site.
I added these lines of code to my python (app-runner.py)
#app.context_processor
def override_url_for():
return dict(url_for=dated_url_for)
def dated_url_for(endpoint, **values):
if endpoint == 'static':
filename = values.get('filename', None)
if filename:
file_path = os.path.join(app.root_path,
endpoint, filename)
values['q'] = int(os.stat(file_path).st_mtime)
return url_for(endpoint, **values)
I'm trying to use an external css file in my html file.
At first I used bootstrap framework and it works well.
However, when I tried to customize the web page by adding a customized css file, it doesn't work at all!
Here is my code:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="custom.css" type="text/css">
custom.css:
body{
background-color: #9acfea;}
Here I just want to change the background color.
'custom.css' is under the same path with the HTML file.
Also, I've tried to only apply 'custom.css', so I create a new HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="custom.css" type="text/css"/>
</head>
<body>
hello
</body>
</html>
It doesn't work either.
I'm confused. Why the bootstrap css file works perfect but the customized file doesn't?
By the way, I'm using the Flask framework, but I don't think it matters.
Any suggestions would be appreciate!
<link href="{{ url_for('static', filename='custom.css') }}" rel="stylesheet"/>