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.
Related
Following is the my static folder structure:
ProjectABC
- App1
- App2
- App3
- ProjectABC
- resources
- static
- imgs
- css
- templates
This is how the project structure looks like.
This is how the static configuration in settings.py looks like:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
This is how the base.html looks like:
<!doctype html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-
scale=1, user-scalable=0">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Open+Sans:400,600,800">
<title>{{SITE_NAME}}</title>
<link rel='shortcut icon' href= "{% static 'img/favicon.png' %}"/>
<link href="{{STATIC_URL}}css/application.css" media="screen" rel="stylesheet"
type="text/css" />
<link href="{{STATIC_URL}}css/style.css" media="screen" rel="stylesheet"
type="text/css" />
<script src="{{STATIC_URL}}js/application.js" type="text/javascript"></script>
{% block extracss %}
{% endblock %}
</head>
<body>
<div class="container">
<h1>Hello</h1>
</div>
</body>
</html>
All the static files are being loaded as seen in terminal, but in browser its just loading bare html without any css or img:
Please lemme know if i am missing something.
Thnk You!
<link href="{%static 'css/style.css' %}" media="screen" rel="stylesheet"
type="text/css" />
add settings.py
STATIC_URL = "/static/"
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
Project App Url
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Static directory must be under the app itself. Create a 'static' directory directly to your app and for better practice, you can also create another directory to the static directory with your app name (static/[app_name]).
Also, {% load static %} must be above doctype in your base.html
change the static config in your settings.py to this:
STATIC_ROOT = os.path.join(BASE_DIR, 'resources/static')
STATIC_URL = 'resources/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'ProjectABC')
]
then run python manage.py collectstatic
and when you call the static file do it like this {% static 'css/style.css' %}
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' %} "
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.
I'm trying to like Django and use it for custom high traffic projects. For this purpose, i'm doing tutorial tango with django. I've stuck with image display step. Here my code:
settings.py file:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.8/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "/static/images"),
STATIC_URL,
]
index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Rango</title>
</head>
<body>
<h1>Rango says...</h1>
{% load staticfiles %}
<img src="{% static "images/lwd.jpg" %}" alt="Picture of Rango" /><br />
hello world! <strong>{{ boldmessage }}</strong><br />
About<br />
</body>
</html>
And here is screenshoot of the result:
not displayed image screenshoot
I don't know what i'm doing wrong, i even looked into documentation.
Please see the Django Docs
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/var/www/static/', # this should be file path not URL
]
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.