I looked at some other questions here and followed them but my app is still not loading CSS and I do not know what is wrong. My directory is as follows.
(index.html and edit.html here)/static/css (style.css and animate.css here)
mainfolder/templates
my HTML code to load the CSS is
<link rel="stylesheet"
href="{{ url_for('static', filename='css/style.css') }}">
and
<link
rel="stylesheet"
href="{{ url_for('static', filename='css/animate.css') }}">
In Flask, static files such as JavaScript files or CSS files are served from the static folder in your package or next to your module and it will be available at /static in the application.
A special endpoint static is used to generate URLs for static files. For example:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = 'style.css') }}">
<script type = "text/javascript" src = "{{ url_for('static', filename = 'bootstrap.js') }}" ></script>
You need to enter the type of static file when providing the URL of this files. For example:
For CSS: type="text/css"
For JavaScript: type = "text/javascript"
If it still doesn't load, try hard reloading the page. The shortcut keys for different browsers for hard reloading the browser can be found on this page. The shortcut in Chrome (for Windows) to hard-reload is Ctrl+Shift+R
Related
I have my css file and bootstrap file inside css folder which is also inside static folder. My HTML is in templates folder.
static -> css -> theme.css and bootstrap.min.css
templates -> index.html
HTML
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/theme.css') }}" rel="stylesheet">
I get the following error
GET http://127.0.0.1:5000/static/css/bootstrap.min.css net::ERR_ABORTED 404 (NOT FOUND)
Also when I change something in theme.css the style doesn't change.
I recently started a basic django project, i want to load an already made default template. This template has an assets folder with all the CSS, JS files etc
This folder, is later called in the templates, so for example i can have:
<base href="../">
// And a lot of static files being called like this:
<link href="./assets/scrollbar/css/scrollbar.css" rel="stylesheet" type="text/css" />
<link href="./assets/somecss.css" rel="stylesheet" type="text/css" />
// And so on..
<script src="./assets/somejsfile.js" type="text/javascript"></script>
The problem with this is that none of the files in the assets are being retrieved. I know that the problem depends on where i put the assets folder, but i don't know how to solve that. I tried to add it to different parts of my project's structure but it doesn't work, since i only get a lot of errors like this:
http://127.0.0.1:8000/assets/somecss.css net::ERR_ABORTED 404 (Not Found)
Here is my settings.py:
STATIC_URL = '/static/'
In this static folder, there is a basic css file i tested before trying this.
And here is the structure of my project:
//MAIN FOLDER
migrations
ASSETS
templates -> INDEX.HTML (where the assets folder is called)
views, forms etc
Have you read the documentation on this?
It is recommended to use the static template tag to make the filesystem location of your static files independent from your URLs. Using this tag, your URLs would have to be defined like this:
{% load static %}
<link href="{% static 'assets/scrollbar/css/scrollbar.css' %}"
rel="stylesheet" type="text/css" />
<link href="{% static 'assets/somecss.css' %}"
rel="stylesheet" type="text/css" />
You also need to define the setting STATICFILES_DIRS because it looks like your static assets are not inside a default location inside an app of your project.
looking to specify the themed css for bootstrap. can't get bootstrap_find_resource to look to my locally placed css files. Seems to continue to pull from the /site-packages/flask_bootstrap location.
the current default for bootstrap css is pointing here
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
and this is the macro generating the url
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
bootstrap_find_resource code pointed me to the BOOTSTRAP_SERVE_LOCAL config. setting it to true gave me a local endpoint. which created the local endpoint
<link href="/static/bootstrap/css/bootstrap.min.css?bootstrap=3.3.5.7" rel="stylesheet">
so I placed the bootstrap css in this local app static folder /static/bootstrap/css/. and i verified that flask's app.static_folder is actually mapped to where I put the new files. still pulling from site packages and ignores my local static files.
bootstrap_find_resource is for loading static files distributed with Flask-Bootstrap. For your own files, use url_for.
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='locally/placed.css') }}">
{% endblock %}
I have a webapp using django-compressor for js, css and less minification.
I'm using COMPRESS_OFFLINE = True because I'm using django compressor to build a less file containing import to other files (otherwise django compressor does not rebuild files if make change in core.less):
// base.html
{% compress css %}
<link rel="stylesheet" type="text/less" media="all" href="{% static 'less/main.less' %}" />
{% endcompress %}
// main.less
#import "core.less";
#import "variables.less";
#import "utils.less";
#import "sidebar.less";
I am running into the following issue: i have the following .css files in assets/CACHE/css:
2601cbccb2ae.css
52a7aa59f552.css
729b9866970c.css
They are all corresponding to a modification of my core.less file. The issue is that when I log in my webapp, it seems Django-Compress {%compress%} use all those file and not only the last one. So sometimes I have the good design, and if I refresh I got the old one...
// First time the page is ok:
<link href="/static/CACHE/css/2601cbccb2ae.css" media="all" rel="stylesheet" type="text/css"/>
// After reloading I got the old design
<link href="/static/CACHE/css/52a7aa59f552.css" media="all" rel="stylesheet" type="text/css"/>
Each time I refresh the file changes... So I assume there is something related to django compressor cache but I have really no idea how to solve this...
If you guys have an idea, feel free to help me.
I'm using django 1.3
I'm using a base.html template which my pages inherit from. Everything works fine except for one page (which has a form on it).
That page is trying to call the CSS from /links/addlink/css/site.css but this is the wrong location. It is in /static/css/site.css
In my base.html I have <link rel="stylesheet" href="{{ STATIC_URL }}css/site.css" type="text/css" charset="utf-8" />
If I create a completely seperate template and use the full path like <link rel="stylesheet" href="http://127.0.0.1:8000/static/css/site.css" type="text/css" charset="utf-8" /> then my page renders correctly.
What is wrong?
You are not using RequestContextin your view.
See here: Referring to static files in templates