Well I'm trying to use Bootstrap with Django by copying and pasting the folders from Bootstrap to static folder. But I'm not able to get access to the Bootstrap.css file. It shows 404 error.
Just for experimenting purpose, I created a main.css in the static/css folder and linked it in the template and to my surprise, its running.
So, why the bootstrap.css file is not getting linked.
Here is how I'm linking Bootstrap.css in my template
{% block css %}
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css">
{% endblock %}
Here is my root urls.py
urlpatterns = patterns('',
(r'^',include('apps.home.urls')),
(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root':os.path.normpath( os.path.join( os.path.dirname(__file__),'../static/'))}),
url(r'^admin/', include(admin.site.urls)),
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
MEDIA_ROOT = 'C:/Users/Praful/uploads'
MEDIA_URL = '/media/'
STATIC_ROOT = ''
STATIC_URL = '/static/'
You should try this instead:
{% load static %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css ' %}">
{% endblock %}
...and just make sure you have 'django.contrib.staticfiles' in your INSTALLED_APPS. Please see also https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/#template-tags
(EDIT: fixed typo, I oroginally forgot the "static" keyword)
OR this:
{% block css %}
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/bootstrap.css">
{% endblock %}
..assuming "django.core.context_processors.media" is in your TEMPLATE_CONTEXT_PROCESSORS
Take a look at the faststart-bootstrap Django project skeleton with Bootstrap 3 support. However it's based on LESS style sheets, but LESS is easy to learn (in use) and compatible with CSS.
ok, that's a settings and path problem.
First, put that in your settings:
PROJECT_PATH = os.path.abspath(os.path.dirname(__name__))
MEDIA_ROOT = os.join(PROJECT_PATH, 'uploads')
MEDIA_URL = '/media/'
STATIC_ROOT = os.join(PROJECT_PATH, 'static')
STATIC_URL = '/static/'
And that in your template
{% block css %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}/css/bootstrap.css">
{% endblock %}
Check your project structure. I follow this structure:
/Project_name
/App1
/App2
/App3
/Project_name
/media
/static
/css
bootstrap.min.css
/js
/templates
/Requirements
requirement.txt
.gitignore
With this structure and a proper settings and template files shown by lalo, bootstrap should be work without 404.
Related
I have facing this issue when i am trying to give favicon to my admin portal it was working completely fine till DEBUG was True. When I switch to DEBUG=False it start showing me this error which i mention in tittle.
here is my code :
templates/admin/base_site.html
{% extends "admin/base_site.html" %}
{% load static %}
{% block extrahead %}
<link rel="shortcut icon" href="{% static '/img/favicon.ico' %}" />
{% endblock %}
settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/'
In debug it worked smoothly now it shows me error 400 in browser and in terminal:
raise SuspiciousFileOperation( django.core.exceptions.SuspiciousFileOperation: The joined path (D:\img\favicon.ico) is located outside of the base path component (D:\Social_login\staticfiles)
{% extends "admin/base_site.html" %}
{% load static %}
{% block extrahead %}
<link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" />
{% endblock %}
it solved my problem just / was problem and i spend 8 hours for solution now i am laughing at my self.
I'm trying to load CSS and JS files in my Django templates but it's not working. I could load images succesfully.
My settings:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
STATIC_DIR,
)
My urls.py:
urlpatterns = [
.
.
.
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) + \
static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
My template:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="{% static 'card-js.min.css' %}" rel="stylesheet" type="text/css" />
<script src="{% static 'card-js.min.js' %}" type="text/javascript"></script>
<img src="{% static 'bag1.png' %}" width="25px">
My file structure:
dma
- account
- cart
- dma
- home
- media
- payment
- static
- - bag1.png
- - card-js.min.css
- - card-js.min.js
The image 'bag1.png' is loaded correctly but not the 'css' and 'js' files.
Any help?
Thank you!
html content but i think this problem happened when you use your link tag and js tag in body you should do this :
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% block head %} <!-- for css links --> {% endblock %}
</head>
<body>
{% block body %}<!-- for body content -->{% endblock %}
</body>
{% block js %}<!-- for js links -->{% endblock %}
</html>
and don't remember rel="" for your links
static folder path correct and it was all working before migration.
index.html
{%load staticfiles%}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static "css/mycss.css"%}"/>
<title>My first Django App</title>
</head>
<body>
<h1>{{somthin}}</h1>
<img src="{% static 'images/zoro.jpg'%}" alt="Oops!No Image">
</body>
</html>
after python manage.py runserver in terminal static files are showing 404 error.
make sure all these configuration you have in your settings.py
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(os.path.dirname(BASE_DIR), "static")
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media")
and in main urls.py
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
and use {% load static %} tag in templates, also if you use double quote outside curly brackets, use single quote inside
<link rel="stylesheet" href="{% static 'css/mycss.css' %}"/>
I'm trying to use django-compressor for my project. So far in my development environment, when I run python manage.py compress I been get this error CommandError: An error occurred during rendering D:path/to/a/template.html: Invalid class path 'css'
I have lots of template files spread across many apps. The error pops up randomly, pointing to a different template each time I run python manage.py compress.
I have also tried first running python manage.py collectstatic, but to no avail and nothing in the docs seem to mention this error
OS: Windows 10, Django==2.0.5, django-compressor==2.2
Relevant settings.py section below
DEBUG = True
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
COMPRESS_ROOT = STATIC_ROOT
COMPRESS_URL = STATIC_URL
COMPRESS_PARSER = 'compressor.parser.HtmlParser'
COMPRESS_ENABLED = True
COMPRESS_OFFLINE = True
COMPRESS_OFFLINE_MANIFEST = 'compressor_manifest.json'
COMPRESS_CSS_FILTERS = {
'css': ['compressor.filters.css_default.CssAbsoluteFilter'],
'js': ['compressor.filters.jsmin.JSMinFilter']
}
COMPRESS_PRECOMPILERS = (
('text/x-scss', 'django_libsass.SassCompiler'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'compressor.finders.CompressorFinder',
)
Inside the <head></head> tag of my project's base.html template I have
{% load compress %}
{% load staticfiles %}
{% load static %}
{% compress css file %}
<link rel="stylesheet" href="{% static 'css/fname.css' %}">
{% endcompress %}
{% compress js file %}
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'js/fname.js' %}"></script>
{% endcompress %}
You must define COMPRESS_FILTERS instead of COMPRESS_CSS_FILTERS as the latter is only a backwards-compatible alias for the css key of the former. That is, your configuration should read:
COMPRESS_FILTERS = {
'css': ['compressor.filters.css_default.CssAbsoluteFilter'],
'js': ['compressor.filters.jsmin.JSMinFilter']
}
I've added in settings.py following:
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, '/static/')
in urls.py:
urlpatterns = patterns('^/static/$',
# ... the rest of your URLconf goes here ...
url(r'^$', home, name='home'),
url(r'^admin/', include(admin.site.urls))
) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
in models.py:
class Search(models.Model):
question = models.URLField()
query = models.CharField(max_length=255)
in views.py:
def home(request):
print ' base dir %s' % BASE_DIR
print ' static dir %s' % STATIC_URL
form = SearchForm()
return render_to_response('base.html', {'form': form},
context_instance=RequestContext(request))
and templates/base.html:
{% load staticfiles %}
<head>
<link href="{{ STATIC_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<title>Walker</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<form name="query">
{{ form.as_p }}
</form>
</div>
</div>
</div>
</div>
</body>
I ran ./manage.py collectstatic with no porblems, folder static being created.
When I execute ./manage.py runserver I can see in terminal this error:
base dir home/my/code/walker
static dir /static/
"GET /static/bootstrap/js/bootstrap.min.js HTTP/1.1" 404 1691
Template loading correctly. But bootstrap do not
Several hour can noot figure out what I need to do
If you store static files in locations other than app/static I think you need to specify STATICFILES_DIRS in your settings.py otherwise they will not be collected:
STATICFILES_DIRS = (
"/path/to/static", #collectstatic will find any app/static directories so do not add those here
)
By default it is empty.
Additionally, specify static files using href="{% static 'my-static.css' %}" instead of {{ STATIC_URL }}
You can also use findstatic to check if your static files are able to be located by the server.