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 %}
Related
This question already has answers here:
Django CSS not updating
(11 answers)
Closed 2 years ago.
my first question here. I'm still new to both Django and CSS.
I'm trying to use CSS from Static folder in my Django project. It's all at a pretty basic stage.
In the 'static' subfolder 'css' I have one main.css file with example code:
body{
font-size: 20px;
background-color: black;
}
h1{
color: #008000;
}
In my settings.py file I have:
import os
(...)
DEBUG = True
(...)
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
And in my base.html template:
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shopping List</title>
<link rel="stylesheet" type="text/css" href="{% static '/css/main.css' %}">
</head>
<body>
<h1>TEST</h1>
{% block content %}
{% endblock %}
</body>
</html>
I've tried moving the css file, changing the view/url, and adding/deleting bootstrap (which alone works).
In the end my page just turns light blue-ish.
Thanks in advance.
So I checked your code and for me it works fine check if you have
'django.contrib.staticfiles' in your INSTALLED_APPS
If this didn't work I'm going to leave my code here, hope it helps.
-DjangoProject
-static
-css
-testing.css
template.html
{% load static %}
<link rel="stylesheet" href ="{% static 'css/testing.css' %}" type="text/css">
settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',]
...
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
I just noticed that my STATICFILES_DIRS is a tuple and not a list like in your example, I don't think it makes any difference but you could try it.
Not sure if this will work, but try removing the "/" before css in your html file:
... href="{% static 'css/main.css' %}">
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
Django static precompiler does not seem to be working with scss files for me. I already checked if i had the compiler installed and my settings for django are are follows
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'static_precompiler',
'cms',
]
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'static_precompiler.finders.StaticPrecompilerFinder',
)
STATIC_URL = '/static/'
STATIC_ROOT = "static"
and i am calling the same from django template as follows
{% load compile_static %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spacemailer</title>
{% block seo %}
{% endblock %}
<link rel="stylesheet" href="{% static 'style/main.scss' | compile %}" type="text/css" media="all" />
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
There are no errors whatsoever. The output is the same scss file with no compilations being made. Can someone point out what am i doing wrong with the same ? or some alternatives that will support compiling scss as well as coffee scripts
By default the compilation should be done at run time serving the template with
compilefilter.
{% static "js/alert.es6"|compile %}
Renders
<script type="application/javascript" src="/static/COMPILED/js/alert.js"></script>
If your using a different storage and STATIC_PRECOMPILER_DISABLE_AUTO_COMPILE is True compile using compilestatic before collectstatic
Verify the Compiler configuration
STATIC_PRECOMPILER_COMPILERS = (
('static_precompiler.compilers.SCSS', {
"executable": "/usr/bin/sass",
"sourcemap_enabled": True,
"compass_enabled": True,
"load_paths": ["/path"],
"precision": 8,
"output_style": "compressed",
}),
)
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 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/'