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.
Related
I am trying to link a css file to my html inside a django project but it does not seem to be linking.
base.html
<head>
<title>Document</title>
{% load static %}
<link rel="stylesheet" href="{% static 'myApp/styles.css' %}">
</head>
my folder structure
You static file(styles.css) should be in a static directory created in the root level.
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.
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
I am trying to install a new template on my Mezzanine website. My Mezzanine is on version 4.2.2 and Django on 1.9.7 . Here is what I did:
With
DEBUG = true
I created a new app call "template_app" and loaded in settings.py:
INSTALLED_APPS = (
"template_app",
...
)
I created the directory structure, and copied over the default mezzanine files (base, index...) like:
template_app
static
css
img
js
templates
base.html
index.html
includes
footer_scripts.html
I downloaded a bootstrap template and replaced the above css js img folder and index.html with the ones found in the template. (The template I used: https://startbootstrap.com/template-overviews/business-casual/ ) Then link the css and javascript in base.html:
(All css)
{% compress css %}
<link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
<link rel="stylesheet" href="{% static "css/business-casual.css" %}">
<link rel="stylesheet" href="{% static "css/mezzanine.css" %}">
<link rel="stylesheet" href="{% static "css/bootstrap-theme.css" %}">
(All js)
{% compress js %}
<script src="{% static "mezzanine/js/"|add:settings.JQUERY_FILENAME %}"></script>
<script src="{% static "js/bootstrap.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
<script src="{% static "js/jquery.js" %}"></script>
<script src="{% static "js/bootstrap-extras.js" %}"></script>
I'm not sure where I did wrong, or what I am missing. My website can't find the css and javascript file in the app:
Not Found: /css/bootstrap.min.css/
Not Found: /css/business-casual.css/
[07/Jan/2017 08:12:30] "GET /css/bootstrap.min.css/ HTTP/1.1" 404 1716
[07/Jan/2017 08:12:30] "GET /css/business-casual.css/ HTTP/1.1" 404 1720
Not Found: /js/jquery.js/
...
I tried modify urls.py and other parts of setting.py based on other's solutions, but they don't seems to be working. What am I doing wrong?
-- added 2017-01-09 --
Checking with findstatic linked me to the right path. Except bootstrap.css which linked me both the css file in my downloaded template and the mezzanine template.
I had the same issue with static files, but it did require that I set the "STATIC_ROOT" setting since my paths were off course.
Since I was using a custom theme I had to change the "STATIC_ROOT" path in settings.py to point to my app static files rather than it pointing to the default PROJECT_ROOT.
So I added something like this...
## Custom Theme Path (For Static Files)
THEME_URL = "template_app/"
And Changed "STATIC_ROOT" to...
STATIC_URL = "/static/"
STATIC_ROOT = os.path.join(PROJECT_ROOT, THEME_URL, STATIC_URL.strip("/"))
Make sure you restart the test server again (manually if need be), the autorestart doesnt recognise changes to the static/ directories.
I found this question on Google while looking for a solution for the same issue. I managed to work around with these steps:
First of all, double check that template_app is listed on INSTALLED_APPS above all Mezzanine apps;
Re-run findstatic;
If you still don't find it, run collectstatic. While findstatic wouldn't find the theme I wanted (but would find other themes), collectstatic managed to find it and link its static files.
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 %}