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/'
Related
I have no idea what I'm doing wrong. I have STATIC_URL = '/static/' STATICFILES_DIR = [str(BASE_DIR.joinpath('static'))] under my settings.py. Here is an image to my current file structure https://pasteboard.co/K3uhtSN.png I linked with <link rel="stylesheet" href="{% static 'css/base.css' %}"> in base.html and loaded at the very top using {% load static %} Thank you
I had the same problem, but it solved by writing "staticfiles_dirs" like this:
STATICFILES_DIRS = ((os.path.join(BASE_DIR, 'static')), )
I had the same problem. If you had created a 'staticfiles' folder or directory during production then be sure to run python manage.py collectstatic in your command prompt or terminal.
I am trying to run the app with DEBUG=False
Below is my setting file configuration
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static/")]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles/')
After running python manage.py collectstatic, all the static files in the app path are copied to staticfiles directory (mentioned in STATIC_ROOT path).
When loading the webpage, the static files are failed to get load.
Error message:
GET /static/dist/bootstrap-4.0.0-dist/js/bootstrap.min.14d449eb8876.js HTTP/1.1" 404 77
GET /static/dist/bootstrap-select/js/bootstrap-select.min.31f649694651.js HTTP/1.1" 404 77
GET /static/js/base.1332bbb46ac5.js HTTP/1.1" 404 77
GET /static/crsummary/dist/amcharts4/core.ea1ec0eb6727.js HTTP/1.1" 404 77
Looking at the error message, apps is trying to load the bootstrap.min.14d449eb8876.js from path /static/\*/\* but the actual file location is staticfiles/\*/\*
I am not sure what configuration that I have missed out here.
Django doesn't allow to load staticfiles when codes in production, instead of using aws or any other online content delivery network
If you really wan't to load staticfiles from the codes directory , you need to install whitenoise , and define it in your middleware, staticfiles, and installed_apps
for more you can search for use and settings whitenoise in django
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href=" {%static 'app1/css/freelancer.css' %}" />
Load the static files like this.
{% load static %}
<img class="img-fluid" src="{% static 'app1/img/portfolio/ai.png' %}" alt="">
Load the image like this.
Before that , Required to specify the Base directory and static directory
STATIC_DIR=os.path.join(BASE_DIR,"static")
STATIC_URL = '/static/'
STATICFILES_DIRS=[STATIC_DIR,]
Base directory
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
Build paths inside the project like this: os.path.join(BASE_DIR, ...)
I ran through weird issue. I have project for website. the project is still under developing process. I am using (Django 1.11). I decided to change one app named polls into ads. I have changed all related names in setting, manage, view, templates and all other related files. also I changed the table labels from the data base(mysql). then I run the server. on chrome and safari the html page is displayed but no css file is loaded. However, on fire fox is working fine. I tried to clear all data history but nothing has changed. I made sure from the setting and path inside setting file. finally, when I disable the ads blocker on chrome and safari (css, javascript, and images all are loaded) and the page displayed as it is supposed. My question here, why is this happen ( happened after I change the app name ) while before I changed the app name, the page is loaded with css and other file even though the add blockers are on. any explain or help to solve this problem
here is portion of the code from the html template:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href=" {% static 'ads/style/bootstrap_3.3.7_dist/css/bootstrap.min.css' %}" >
<link rel="stylesheet" type="text/css" href="{% static 'ads/style/bootstrap_3.3.7_dist/css/bootstrap_theme.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'ads/style/first_page.css' %}">
here is the structure of the project
mysite
mysite
init.py
settings.py
urls.py
......
manage.py
db.sqlite3
ads
static
ads
style
first_page.css
bootstrap_3.3.7_dist/css/bootstrap.min.css
images
javascript
here are portions of settings file:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'ads.apps.AdsConfig',
]
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
STATIC_URL = '/static/'
please note that when ever I run the server, there is no error shown and I get this message:
[05/May/2018 08:08:51] "GET /ads/home_page/ HTTP/1.1" 200 16306
so every things seem fine
Hi guys I'm new to django, now I'm facing problem that the already loaded bootstrap css template gave no effect on the page. I have read several post of this problem in this site, but none of it work. I use python 3.6.4 and django 2.0.
Here is my settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"), ]
settings.installed_apps :
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rango'
]
my index.html :
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<title>Rango</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.css" %}" />
the command prompt said :
[17/Feb/2018 20:06:14] "GET /static/css/bootstrap.css HTTP/1.1" 200 178152
When I copy paste all the bootastrap css style to the head it work
When I call an image from same static folder, it also can show the picture
<img src="{% static "images/alif.jpg" %}" width="500px" height="800px" alt="foto alif">
My debug set True and i use virtual environment
I also check on chrome developer tools>network>css. It said the css run
My folder structure:
tango
|
static
|
css
|
bootstrap.css
Can anyone help me to solve this?
i've figure out the problem, it was the False mimetype, so i add
import mimetypes
mimetypes.add_type("text/css", ".css", True)
and the problem is solved
Replace the static files loader in your index.html
your code:
{% load staticfiles %}
Replace with:
{% load static %}
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/.