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/.
Related
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!
My style.css is placed in appname/static/appname/.
My settings.py has this code:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static/"),
)
And in my base.html I load it like this:
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'appname/style.css' %}">
But the styles are not loading.
If I remove STATICFILES_DIRS and change STATIC_URL = '/static/' to STATIC_URL = '/static/appname/', it works perfectly, but I guess it's not the best practice for the case I'll add any other app to the project later. What I might be doing wrong?
Just change one thing,
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
It will search in static folder inside your app. Also if you want to add a specific directory,
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"), '/your specific directory/',
)
From here you can directly add the particular file name, and djnago will search in that specific directory.
Remove "appname" in {% static 'appname/style.css' %}, you must not place it there because python knows automatically in which application the file is, it get the application name from the request
By default django picks static directory from app's directory. So, if your static directory is inside app directory there is no need to specify STATICFILES_DIRS.
Now /static/ will point to files and directories in the static directory of your app. To refer your css file use
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'appname/style.css' %}">
I know this is a repeated question, but I am unable to find any answers that would make the static files run for me. I am using Django version: 1.10.5 and python version: 3.4.3...
I have read the official documentation too, no luck in solving my problem...
The following is my project structure:
myproject4
/myapp/
/__pycache__/
/migrations/
__init__.py
admin.py
apps.py
models.py
tests.py
views.py
/myproject/
/__pycache__/
__init__.py
settings.py
urls.py
wsgi.py
/static/
/css/
hpage.css
robot.css
/images/
-- Images --
/js/
-- JavaScript Files --
/template/
hello.html
manage.py
Here's what all I have tried:
{% load staticfiles %}
for my hello.html page, right at the top,
<link href="{%static 'css/hpage.css' %}" rel="stylesheet" />
<link href="{%static 'css/robot.css' %}" rel="stylesheet" />
for linking my CSS files in hello.html (it makes use of 2 CSS files).
I have tried {{ STATIC_URL }} way of doing the same and the necessary stuffs I am supposed to do too, but found no luck there.
When I use the <style> </style> tags, the css works perfectly, but that's not what I am looking for.
settings.py:
DEBUG = False
ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp',
]
#Other stuffs go here
STATIC_ROOT = 'staticfiles'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
'/static/',
)
urls.py:
from django.conf.urls import url,include
from django.contrib import admin
from myapp.views import hello,user_profile
from myapp import views
admin.autodiscover()
urlpatterns = [
url(r'^admin/$', admin.site.urls, name='admin'),
url(r'^hello/$', views.hello, name='hello'),
url(r'^hello/user_profile/', views.user_profile, name='user_profile'),
]
views.py:
from django.shortcuts import render, render_to_response
from django.template.context import RequestContext
def hello(request):
return render_to_response('hello.html')
def user_profile(request):
return render_to_response('user_profile.html')
Kindly guide me where I am going wrong...
Thank You in advance :)
EDIT: In my settings.py file, DEBUG = False because I have a file called 404.html that gives out the error page for me as default.
These are the steps I have followed to include CSS to my Django Project:
First, I have added in the settings.py:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static")
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
Second in the urls.py (app folder)"
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Copied all CSS files in the Project folder (same level with manage.py)
Include/Declare CSS in a template (I included mine in base.html)
<head>
{% load static %}
<link rel="stylesheet" href="{% static 'assets/css/bootstrap-theme.css' %}" media="screen" >
<link rel="stylesheet" href="{% static 'assets/css/main.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
</head>
Run:
python manage.py collectstatic
and reload/restart the browser or delete cache.
Make changes to urls.py like bellow. and look at documentation for your ref.
from django.conf.urls.static import static
urlpatterns = [
rl(r'^admin/$', admin.site.urls, name='admin'),
url(r'^hello/$', views.hello, name='hello'),
url(r'^hello/user_profile/', views.user_profile, name='user_profile'),
]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
I have a webpage in Django and now I want to add some CSS (twitter bootstrap) to it. This is the first I am trying. I have carefully read the docs and did everything said there for the django development server to work. I am using development server with debug=True and django version 1.6.5. My settings.py looks like this:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
)
My files are under /mysite/static/bootstrap/css folder and in my template.html I have this:
{% load staticfiles %}
<link href="{% static "boostrap/css/bootstrap.css" %}" rel="stylesheet" media="screen">
Unfortunately, nothing happens, I see that the development server says:
"GET /static/boostrap/css/bootstrap.css HTTP/1.1" 500 59
which means it cannot find them. I even tried doing the settings without STATIC_ROOT, doing this:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
'/static/',
)
but then the development server returns:
"GET /static/boostrap/css/bootstrap.css HTTP/1.1" 404 1682
Any help appreciated.
You did everything right, the issue here is a simple typo.
Your static files are located in bootstrap
But, in your html, your wrote: {% static "boostrap/css/bootstrap.css" %}
There is a T missing.
The code below will work:
{% load staticfiles %}
<link href="{% static "bootstrap/css/bootstrap.css" %}" rel="stylesheet" media="screen">
You have to load the STATIC file into your project app folder.
---> If your project Name is myblog. You will find another folder named myblog into myblog and you have to place your static folder there.
---> In setting.py you have to add:
STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'myblog/static'), )
In your production mode if you collect static , static file will be copied in root static.
I find this problem many times and every time problem was solved by add url into STATIC_URL i.e.
STATIC_URL = 'http://localhost:8000/static/'
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.