Feels like I'm missing something basic.
I'm just trying to make an django application of currently nothing but a login page using an html template that has its own css and js. But I'm having weird issues with the statements for linking my static files. No CSS styling is being rendered in my browser, and all of the javascript links get 404 file not found errors on my django server.
This is the <head> of auth-login.html.
{% load static %}
<!doctype html>
<html lang="en">
<head>
<title>Login template from online</title>
<!-- these aren't giving errors -->
<link rel="shortcut icon" href="{% static 'assets/images/favicon.ico' %}">
<link href="{% static 'assets/css/bootstrap.min.css' %}" id="bootstrap-style"/>
<link href="{% static 'assets/css/icons.min.css' %}" type="text/css" />
<link href="{% static 'assets/css/app.min.css' %}" id="app-style" type="text/css" />
<!-- these are giving errors for some reason -->
<script src="{% static 'assets/libs/jquery/jquery.min.js' %}"></script>
<script src="{% static 'assets/libs/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'assets/libs/metismenu/metisMenu.min.js' %}"></script>
<script src="{% static 'assets/libs/simplebar/simplebar.min.js' %}"></script>
<script src="{% static 'assets/libs/node-waves/waves.min.js' %}"></script>
<script src="{% static 'assets/js/app.js' %}"></script>
</head>
In settings.py, this is how I'm specifying the static files location:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) # lpbs_demo/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
The Django project is currently structured with a project app called lpbs_demo and an app called user_auth. The static/ folder is inside of the project app (lpbs_demo/ folder). The templates/ folder is at the project root directory, i.e. at the same level as manage.py
. lpbsnew/
+-- manage.py
+-- lpbs_env/ (venv)
+-- lpbs_demo/ (project app/package)
| +-- __init__.py
| +-- settings.py
| +-- static/
| +-- urls, asgi, wsgi ...
+-- user_auth/ (app)
| +-- migrations/
| +-- admin.py
| +-- views.py
| +-- models, tests, ...
+-- templates/
The project app urls.py in lpbs_demo/ looks like...
from django.contrib import admin
from django.urls import path
from django.contrib import admin
from django.urls import path, include
from user_auth import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.userLogin, name='loginHome'),
path('login', views.userLogin, name='login'),
path('logout', views.userLogout, name='logout'),
path('registration', views.userRegistration, name='registration'),
path('dashboard', views.dashboard, name='dashboard'),
]
So with this, I'm not sure why only the Javascript files are generating errors and not being found, while the css files aren't generating errors but they're not rendering on the web page at all and I just see text in Times New Roman unstylized. It feels like there's something basic about linking static content that I must be missing.
I've called python manage.py collectstatic already as well.
edit: forgot to include templates/ folder location in the original post.
Edit 2: I got two suggestions on using STATIC_ROOT in settings.py but neither of them are changing the visuals I'm getting.
STATIC_URL = '/static/'
# STATIC_ROOT = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "staticFiles")
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
Several messages about potentially overwriting files come out.
Edit 3: It appears that the js files weren't getting copied via the python manage.py collectstatic command for some reason and I wasn't really sure why. But I made a new django project and was able to get that to work.
I'm no longer getting file not found errors, but I'm still not able to get any styling to render for some reason, so I made a new question.
Django not serving static files and not stylizing anything
Move the static directory to the same level as the manage.py file.
BASE_DIR means the outermost folder of your project. So, this— os.path.join(BASE_DIR, 'static')—would return a path like lpbsnew/static/. Django is trying to find a folder called static inside lpbsnew but it isn't there.
I try to sort it out step by step (I personally had a hart time to sort out all the aspects of paths, urls, reverses and dev/deployment in a django app):
BASE_DIR should (by convention) point to the base folder which is lbpsnew in your case.
your assigment is doing that, but the comment is wrong! It does not point to lpbs_demo but to lbpsnew!
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) # lpbs_demo/
Btw, in most of the django projects lpbs_demo would be called lpbsnew (lbpsnew_project/lbpsnew/lbpsnew/settings.py)
STATIC_ROOT is the (absolute) target path where "collectstatic" will copy all your static files to.
Please check after running "collectstatic" if files are there.
it is a difference if you run your app with "runserver" or Apache etc. Why?
3a) because in Apache you could have Alias defined (which might be the problem) or a missing access right to the static folder.
3b) it makes a difference if you have DEBUG = True/False in your settings.py
... so please provide more details.
For Debugging:
you can use the print(str(BASE_DIR)) to check directly in the seetings.py file.
you can display the page source code in the browser and check what {% ulr ... %} has done in your html file
missing css (files, individual items) never lead to error messages to my experience. Style is then just missing. Carefull to empty Browser cache if you change css file content!
Related
I'm trying to create a Django app and i have made all the static settings like
Settings.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'CricketTeamManagement/static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
URLS.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('Management.urls'))
] + static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
I have also created a static folder in Main project folder and ran python manage.py collectstatic it created a new static folder outside and it has admin folder in it and sub folders like js,css,font,images and collectstatic collects the images and stores in this folder. I see static files are clearly working.
All the models.py imagefields are uploaded to media folders and even that works.
The Problem comes here
My css files are not taking its styles and not altering my html elements.
If I have the below code in html file the styling works and if i separate it to a css folder and create a css file by removing style tag it is not working.
<style>
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
</style>
when i saw the css file Not Found error it got fixed with
to make html check the css file.
Unsure what is the issue. Thanks in Advance.
Update
Project Format
Link Tag in HTML
The href in your index.html right now refers to yourwebsite/stylesheet.css. Django doesn't know where that URL is as you defined your static URL as "/static/". Static located in the STATIC_DIRS will be loaded under the URL yourwebsite/static/stylesheet.css. This is why you are getting the 404 on the CSS file.
Change your index.html to use Django built-in template tags to make it easier.
{% load static %}
Some code here.....
<link rel="stylesheet" type='text/css' href="{% static 'css/stylesheet.css' %}">
This will automatically generate the right url for your static file which should solve the problem.
You don't need to run collect static in development as django's server will take care of the static files. During production will will need to run collect static and point your reverse proxy or the like towards the static files.
you have to link your css files this way in templates, also collectstatic command is not required during production stage only
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/>
I have read many posts about the topic and tried to follow all the suggestions (new to python here) but I am unable to get bootstrap to work in Django.
I have a project "myoffice" and an app "proposals" in it.
I have downloaded a css file and put it in following folder
django\bin\myoffice\proposals\static\bootstrap\bootstrap.min.css
I have made following changes to the settings.py
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')
STATICFILES_DIRS = (
os.path.join(
os.path.dirname(__file__),
'static',
)
STATIC_URL = 'proposals/static/'
and included static files in my template like this.
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
</head>
<body>
But it is still showing view without any formatting.
I figured it out. It was actually a stupid error. I discovered, I have to restart the webserver after adding css file to the static directory and making changes to the settings.py
I can't seem to include my bootstrap css files for some reason. I am quite new to Python and Django especially, so I am definitely doing something wrong.
Django 1.9.2
After reading the official Django explanation on the "Static files" management I am absolutely zero smarter :(. Here is my project folders hierarchy:
/projectname/
/appname/
/static/
| /appname/
| /css/
| | bootstrap.min.css
| | custom.css
| /img/
| /js/
|
/templates/
/includes/
head.html
footer.html
index.html
base.html
I started with the basics so I disregarded the head.htmland tried with the base.html like so:
<title>{% block title %}{% endblock %}</title>
<!-- Bootstrap core CSS -->
{% load staticfiles %}
<link href="{% static 'static/appname/css/bootstrap.min.css' %}" rel="stylesheet">
No luck. Here is my settings file:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
...
STATIC_URL = '/static/'
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
STATICFILE_DIRS ='/users/edchigliak/documents/projects/projectname/appname/static/'
As fas as I understand, it is possible to have a "global" 'static files location' which all your projects can use, and "per app" 'static files location' which can be uses only by the app inside which base directory they reside.
Any help appreciated!
EDIT:
This is my urls.py configuration:
from django.conf.urls import url
from django.contrib import admin
from budgeteer.views import hello, hours_ahead, current_datetime
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^hello/$', hello),
url(r'^index/$', current_datetime),
url(r'^time/plus/(\d{1,2})/$', hours_ahead),
]
I have similar problem (Django 1.10). Hierarchy:
myapp
...
myapp
...
blog
migrations
templates
...
static
blog
style.css
So if I add <link href="{% static 'blog/css/bootstrap.min.css' %}" rel="stylesheet"> (style.css located in dir 'blog/css') all styles won't work.
BUT when I delete 'css': <link href="{% static 'blog/bootstrap.min.css' %}" rel="stylesheet"> (style.css located in dir 'blog') it's ok.
May be it help you!
I think you need to add following to your URLs:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
unless you work on Django server and it serves your static files.
According you the Django docs your app structure is OK.
When you will setup your prod and start serve static by Apache/Nginx/etc, than you will need to run collectstatic.
For now it don't needed.
My quick guess is that you are one level up. You have your static directory nested under appname. Try moving it up a level and accessing the resource directly in the browser (http://example.com/static/appname/css/bootstrap.min.css)
I've never done app specific resources, so if that is the goal, my apologies.
what if your static link starts with just appname?
i.e., instead of
<link href="{% static 'static/appname/css/bootstrap.min.css' %}" rel="stylesheet">
please try
<link href="{% static 'appname/css/bootstrap.min.css' %}" rel="stylesheet">
AFAIK, the string in {% static %} is the path to a static file inside the static folder.
I don't have points enough to comment, so I leave my guess here.
STATIC_ROOT = os.path.join(BASE_DIR, 'static_files')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
You need to put this line on the outside of HTML tags.
{% load static %}
I found the answer here: https://tutorial.djangogirls.org/en/css/.
I am learning Django and trying to create modular templates and I am coming across this issue
In my Developer tools I am getting this error:
GET http://127.0.0.1:8000/static/assets/css/default.css 404 (NOT FOUND) 127.0.0.1/:8
GET http://127.0.0.1:8000/static/assets/images/pythonlogo.jpeg 404 (NOT FOUND) 127.0.0.1/:84
From my understanding, having STATIC_URL = '/static/' allows {% static %} to be used and also appends /static/ to the path of your static folder. Also, using STATICFILES_DIR is for locating the static files in your project.
Currently I have:
STATIC_URL = '/static/'
STATICFILES_DIR = (
('assets', '/Users/BobDole/Development/django-brad/django_test/'),
)
From reading the documentation, it seems to me that 'assets' is used as a namespace or a variable to represent /Users/BobDole/Development/django-brad/django_test/
In my html page I used
<img src="{% static 'assets/images/pythonlogo.jpeg' %}">
<link rel="stylesheet" type="text/css" href="{% static 'assets/css/default.css' %}">
My current project directory structure
django_test/
admin/
article/ <-- app
templates/
django_test/
templates/
images/
static/
css/
I believe that I am using STATIC_URL and STATICFILES_DIR improperly could some provide me with some suggestions? Thank you!
try this:
<img src="{{ STATIC_URL }}assets/images/pythonlogo.jpeg">
Django will change STATIC_URL for /whatever/whatever/static/, so the url the img will access is: /whatever/whatever/static/assets/images/pythonlogo.jpeg
The thing is /whatever/whatever/static/ has to be the path until the "static" folder inclusive
I use in my projects STATIC_URL like this(settings.py):
PROJECT_PATH = os.path.abspath(os.path.dirname(__file__))
STATIC_ROOT = os.path.join(PROJECT_PATH, "static")
STATIC_URL = '/static/'
EDIT You have to add this 3 lines in your settings.py
What makes you think assets is magic in some way? It's not, it's simply the name of a directory. You don't have a directory called that, so you shouldn't use it. Use {% static 'images/pythonlogo.jpeg' %} etc.
I can't seem to get my static files to load from my templates. I've followed the official documentation but I must be missing something.
My directory layout (generated by Django, most files omitted):
myproject
myproject
settings.py
urls.py
static
css
bootstrap.css
main.css
templates
base.html
myapp1
myapp2
...
manage.py
My settings.py:
STATIC_URL = 'static/'
I'm referencing my stylesheets like so (from my templates):
{% load staticfiles %}
<link rel="stylesheet" href="{% static "css/bootstrap.css" %}" type="text/css">
<link rel="stylesheet" href="{% static "css/style.css" %}" type="text/css">
Which gives this once rendered (in HTML):
<link rel="stylesheet" href="static/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="static/css/style.css" type="text/css">
Yet these links don't actually lead anywhere (when I visit them I get 404 error from Django). I feel that I could fix this by adding something in urls.py, but I thought Django did this automatically when you run the server? What am I missing?
Have you defined your static files directory in settings.py ?
I'm guessing you have 'django.contrib.staticfiles', in your installed apps.
If you haven't defined your static files dir, you could by doing something like this:
import os.path
PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__))
STATICFILES_DIRS = (
os.path.join(PROJECT_ROOT, 'static'),
)
This is the working solution for static/media/template access in django for windows,
settings.py
import os.path
STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join('static'),
)
My problem was solved by adding "STATICFILES_DIRS" in settings.py file
STATIC_URL = '/static/'
STATICFILES_DIRS = ( os.path.join('static'), )
I thought Django did this automatically when you run the server?
Why did you think that? If you've followed the official documentation, you won't have found that. Read what you have to do to serve them in development here.
There's another problem. Your STATIC_URL is a relative link, so browsers add it to the existing page URL. So if you're on page /foo, 'static/css/style.css' evaluates to /foo/static/css/style.css'.
Make sure it either starts with / - ie /static/ - or is a full URL, ie http://myserver.com/static/.
Check if STATICFILES_FINDERS is defined in your settings.py
https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/#std:setting-STATICFILES_FINDERS
The default value of STATICFILES_FINDERS is good enough but you have 2 choices :
you need to have the static file inside an app and having this app in your INSTALLED_APPS
or you need to define STATICFILES_DIRS with your path to the static files if expect the behavior being the one of django.contrib.staticfiles.finders.FileSystemFinder
I encountered this problem too. And I solved the problem by revising the href like this:
<html>
<link rel="stylesheet" href="{{STATIC_URL}}css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="{{STATIC_URL}}css/style.css" type="text/css">
</html>
Make sure that you have the static folder set up in the right place, that is if it is in the app folder, then you can get further clarification from this helpful resource1.
My solution was DEBUG = True in settings.