I have static files placed in my_site/my_app/static/my_app/js and my_site/my_app/static/my_app/css. For some reason, the code below doesn't produce any output which means it can't find the static files:
#my_app/templates/my_app/base.html
{% load staticfiles %}
Here is setting.py
STATIC_URL = '/static/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'my_app', 'static', 'my_app',).replace('\\','/'),
)
STATIC_ROOT = ''
Why is that?
Add django.contrib.staticfiles to INSTALLED_APPS in your settings.py.
Remove STATICFILES_FINDERS, STATICFILES_DIRS, STATIC_ROOT from your settings.py.
change your base.html to something like this:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="fa">
<head>
<script type="text/javascript" src="{% static 'my_app/js/app.js' %}"></script>
<title>{{ title }}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
I had faced the same issue which got solved after the following changes.
In HTML pages:
{% load static %} ## loads the static folder and images inside it.
<div id='button-holder'><img src="{% static "glass.png" %}" alt="Hi!" /></div> ## for images
src="{% static 'my_app/js/app.js' %} ## for scripts.
In urls.py
urlpatterns = patterns('',...
........
)+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
After this run command as #Daniel Roseman have mentioned python manage.py collectstatic. The findstatic command can help show you which files are found.
Example
python manage.py findstatic css/base.css admin/js/core.js
You can find help here regarding it.
You are supposed to run manage.py collectstatic to copy your app-level static files to the central static directory.
Related
I can't get django to use my css file. I've done a lot of sifting through various sites and tutorials but with no luck. Most of them say to change your STATICFILES_DIRS while some don't mention it at all. I've tried changing it to about every variant that could match my style.css location as well as copying and pasting the css file into a bunch of locations which might match '/static' but nothing works!
for STATICFILES_DIRS I have tried:
os.path.join(BASE_DIR, 'static'),
os.path.join(BASE_DIR, 'static/store'),
os.path.join(BASE_DIR, 'staticfiles'),
os.path.join(BASE_DIR, 'staticfiles/store'),
I also found the file manually and copied the location into a string like so:
'...Desktop/project/staticfiles/store',
I have also tried similarly playing around with the STATIC_URL and STATIC_ROOT to no avail.
My tree looks like this:
project
static
store
style.css
staticfiles
store
style.css
store
static
store
style.css
staticfiles
store
style.css
and my template:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<link rel='stylesheet' type='text/css' href='{% static "store/style.css" %}'>
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
I also tried changing static in the template to staticfiles
I already wasted hours on this problem and am tired and frustrated, please help!
You just need one folder called 'static' and in there you can create a folder 'store' and in there you paste your 'styles.css'.
in your settings.py
STATIC_URL = '/static/'
STATICFILES_URL = [
BASE_DIR / 'static',
]
and you reference it in your html as
{% load static %}
href="{% static 'store/styles.css' %} "
Thanks to Mcdonald Otoyo for posting the solution!
You just need one folder called 'static' and in there you can create a folder 'store' and in there you paste your 'styles.css'.
in your settings.py
STATIC_URL = '/static/' STATICFILES_URL = [
BASE_DIR / 'static', ]
and you reference it in your html as
{% load static %}
href="{% static 'store/styles.css' %} "
My templates do not seem to be able to access static css files. The project using all-auth for authentication. My file structure is as follow:
Project Folder
app 1
app 2
static
css
style.css
templates
account
login.html
signup.html
base.html
home.html
base.html is as follow:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shuffle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='{% static "css/style.css" %}' rel="stylesheet">
</head>
<body>
<div id="card">
{% block content %}
{% endblock %}
</div> <!--card -->
</body>
</html>
The rest of the templates extend from base.html. On inspecting the rendered page, all the html are correct but the styling is missing.
Edit:
Error is shown as:
GET /static/css/style.css HTTP/1.1" 404 1665
Static directory in setting is set as:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
It seems like you need to add the setting STATICFILES_DIRS.
You should have all 3 parts in your settings:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
It seems like your folder is called CSS all uppercase, but in your template code (<link href='{% static "css/style.css" %}' rel="stylesheet">) you have folder name css in lowercase.
I also see that the folder Static has the first letter capitalized, but the settings code STATIC_ROOT = os.path.join(BASE_DIR, "static") has the folder name as all lowercase.
Both of these have to match their counterparts, capitalization is important in this part.
I'm trying to locate all bootstrap files in django project in only one folder and reference them. In order to do that I've added these lines to setting.py:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
My base.html looks like this:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Muplay</title>
<link rel="stylesheet" type="text/css" href="{% static'css/bootstrap.css' %}">
<script src="{% static 'js/bootstrap.js' %}"></script>
</head>
<body style="background-color: #F2F2F5">
{% include 'snippets/nav.html' %}
<div class="container">
{% block content %}{% endblock %}
</div>
</body>
</html>
When I extend this base.html to other html files css and js file is loaded successfully in browser. But, problem is that, in terminal, django returns 404 error as follows:
[10/Dec/2017 14:03:27] "GET /static/js/bootstrap.js HTTP/1.1" 404 1759
[10/Dec/2017 14:03:27] "GET /static/css/bootstrap.css HTTP/1.1" 404 1765
Why django returns 404 code while those static files are successfully loaded in browser?
Remove STATIC_ROOT Add STATICFILES_DIRS to the settings file.(Recommended during development)
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATICFILES_DIRS :
This setting defines the additional locations the staticfiles app will traverse if the FileSystemFinder finder is enabled, e.g. if you use the collectstatic or findstatic management command or use the static file serving view.
This should be set to a list of strings that contain full paths to your additional files directory
STATIC_ROOT :
The absolute path to the directory where collectstatic will collect static files for deployment.
If you want to use STATIC_ROOT, then run the command python manage.py collectstatic which will collect all the static files to the static directory mentioned in STATIC_ROOT. This is used during deployment.
Find the detailed documentation here.
My django project is pictured above:
I'm trying to set a path to my css using:
<link href="{% static "css/bootstrap.min.css" %} rel="stylesheet">
In my settings.py I have:
STATIC_URL = '/static/'
TEMPLATE_DIRS = (
os.path.join(BASE_DIR, 'templates'),
When I run the project I get:
TemplateSyntaxError at /index/
Invalid block tag: 'static'
What am I doing wrong?
The problem maybe is: You don't loaded tag for staticfiles.
{% load staticfiles %}
You should load staticfiles first, and then you can use static tag.
I am using django-compressor to compress css files.
I did as it was explained in http://django-compressor.readthedocs.org/en/latest/quickstart/
I changed my template file as follows:
{% load staticfiles %}
{% load compress %}
<!DOCTYPE html>
<html lang="en">
<head>
{% compress css %}
<link href="{% static "crsq/css/zippednewsapp/bootstrap.readable.min.css" %}" rel="stylesheet">
<link href="{% static "crsq/css/zippednewsapp/zippednewsapp.css" %}" rel="stylesheet">
<link rel="stylesheet" href="{% static "crsq/css/zippednewsapp/typeahead.css" %}"/>
{% endcompress %}
</head>
.....
I do not see any change what so ever. No error. The files are not compressed. How do I change this?
In my settings file:
DEBUG = False
TEMPLATE_DEBUG = False
STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_DIRS = (
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'compressor.finders.CompressorFinder',
)
Appreciate any help. Thanks
If html didn't change, I'd check server restart after the changes.
If not, you can increase logging level and see what does the compressor module print into the logs.
Also,the compressor should run under a user with enough privileges to create files and folders under COMPRESS_ROOT (which defaults to STATIC_ROOT)
Regards