As the title says, only the first static file in a Django template is loaded.
Here is the offending code:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock title %}</title>
<link rel="stylesheet" href="{% static 'global/css/grid.css' %}" media="screen" title="grid" charset="utf-8">
<link rel="stylesheet" href="{% static 'global/css/style.css' %}" media="screen" title="main" charset="utf-8">
</head>
I have 'global' set up correctly in my STATICFILES_DIRS, both 'grid.css' and 'style.css' exist in that directory, and both styles do not conflict.
But only 'grid.css' loads when I render a page with the above code in it.
When I check inspect element in chrome, both links are displayed/rendered correctly:
<link rel="stylesheet" href="global/css/grid.css" media="screen" title="grid" charset="utf-8">
<link rel="stylesheet" href="global/css/style.css" media="screen" title="main" charset="utf-8">
But when I check the 'Sources' of chromes dev tools it shows the folder 'static/global/css', and within it only grid.css is displayed. So Django is not delivering style.css in the response.
I know that style.css works, when I comment out the line that loads grid.css, style.css does load.
So again, it seems that only the first static file that is requested in a template is delivered in the response.
It's the HTML attribute 'title'. When that is set on a stylesheet link, then that stylesheet will become the 'prefered' stylesheet, and all others will be ignored. I got rid of the title attributes and it worked.
I dont think this is from Django, as far as my knowledge django does not do that.
Clear your cache and try again. Maybe your first CSS file might have been loaded from cache and second file might not be cached earlier.
If both files are not loaded after clearing cache, then there is a mistake in your static file configuration.
If the first CSS comes even after clearing the cache, check the Network Tab in Google Chrome. See where the request goes, and see the response received. Check whether the response comes as the file or 404 or 503 and debug accordingly.
Related
Hi i am trying to host a server my raspberry pi with flask but css does not work. It shows plain html. when i try the same thing with same file names, location and same code it works but from my raspberry pi it does not work?
To Fix I Tried (so don't bother saying):
Tried using static or normal way
Tried doing cmd+shift+R
Tried changing file names
HTML:
<!DOCTYPE html>
<html>
<head>
<title>THD</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<html>
FLASK:
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/")
def main_page():
return render_template('learn.html')
TREE VIEW:
Thank You So Much If You Can Fix It.
turns out i have made a typo i didnt notice it for hours my looked like this
<link rel="stylesheet" href=""{{ url_for('static', filename='styles.css') }}>
This is how it works:
<!DOCTYPE html>
<html>
<head>
<title>THD</title>
<link rel= "stylesheet" type= "text/css" href= "static/styles.css">
</head>
<html>
You have to call the relative path to the css file
Do this:
<link rel="stylesheet" href="../static/styles.css/">
You need to get out to templates folder with .. and then put path to styles.css
Hope this helps!
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>
I'm trying to add a maintenance page to my Flask site. I have created a route called /maintenance that renders my maintenance.html template. I then added an #app.before_request to check whether the site is in maintenance mode (a Boolean value).
When I request the /maintenance route directly from the browser, the page displays fine:
However, when the route is called from the #app.before_request, it displays like this:
As can be seen from the console window, I'm getting the following message:
'Resource interpreted as Stylesheet but transferred with MIME type text/html'
Here is the code for the /maintenance route and #app.before_request:
#app.before_request
def check_for_maintenance():
if maintenance == True and request.path != url_for('maintenance'):
return redirect(url_for('maintenance'))
#app.route('/maintenance')
def maintenance():
if request.method =='GET':
return render_template('maintenance.html')
Here's the code for the maintenance page (ish, it inherits lots of parent Jinja templates but the important stuff is here):
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/css/theme.css">
<link href="{{ url_for('static', filename='fonts/peenu/stylesheet.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='favicon.ico') }}" rel="icon">
</head>
<body>
<div id="maintenanceBackground">
<div id="maintenanceTextParent">
<img id="spannerIcon" src="/static/media/graphics/spanner.png" alt="Spanner icon">
<h1 id="maintenanceText1">We're doing some work at the moment</h1>
<h2 id="maintenanceText2">We hope to be running again soon. Please try again later.</h2>
<img id="whiteLogo" src="/static/media/graphics/logoWhite.png" alt="Custom Crochet logo">
</div>
</div>
</body>
</html>
This is somewhat related to flask. If you try to access the html directly without flask's webserver, the html page loads with applied css, as expected.
To be more specific, actual solution is
to create a "css" folder in "static" folder.
add css in path of ".css" file (update all occurrence for any .css file with expected relative path)
eg.
change => href="{{ url_for('static', filename='stylesheet.css') }}" to href="{{ url_for('static', filename='css/stylesheet.css') }}" OR
change => href="../static/main.css" to href="../static/css/main.css"
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
In your case
try moving stylesheet.css from "fonts/peenu/stylesheet.css" to "static/css" folder.
change => href="{{ url_for('static', filename='fonts/peenu/stylesheet.css') }}"
to
href="{{ url_for('static', filename='css/stylesheet.css') }}"
I had spent some time on this issue and was able to resolve it with above mentioned solution.
I want to Include Html file inside the Html file Using jinja
Here Is My Python Code:
#app.route('/sample')
def sample():
return render_template('sample1.html')
And Here is My sample1.html :
<html>
<head>
<title>KrisHnA Creations</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
{% include '/static/myfile.html' %}
But I got an error:
jinja2.exceptions.TemplateNotFound: /static/myfile.html
Any One Know Solution For This ??
Pls answer me
Its weird but I removed everything in the css file, the website still shows all the colours and stuff. I dont know what happened so I need t ask for help.
here is the main html:
<head>
<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="css/animate.min.css" rel="stylesheet">
<link href="css/bootstrap-dropdownhover.min.css" rel="stylesheet">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style.css') }}">
</head>
the style sheet:
(yes its literally nothing)
I'm running flask and I dont know whats happening so..
also the screenshot for the webiste when I put all the styles in:
would be happy if anyone can help me get past this part
Likely, your browser is caching the CSS. If you are in Google Chrome, a longer-term solution while developing is to open the DevTools (Ctrl+Shft+I), go to Network/Disable Cache and then hit the "open to new window" button so you can minimise it.