Bootstrap files 404 Django - html

On FireBug I get these errors
GET http://localhost:8000/static/bootstrap/css/bootstrap.min.css 404 (NOT FOUND) localhost/:7
GET http://localhost:8000/static/bootstrap/js/bootstrap.min.js 404 (NOT FOUND) localhost/:8
GET http://localhost:8000/static/bootstrap/css/bootstrap.min.css 404 (NOT FOUND)
My STATIC_ROOT is :
STATIC_ROOT = '/home/bradford/Development/Django/public_pictures/static'
I placed my bootstrap files in a 'static' directory. This 'static' directory is located in my project named 'public_pictures'. I'm not sure why these files can't be located
Here is my HTML file:
<!DOCTYPE html>
{% load staticfiles %}
<head>
<link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}" type="text/css" media="screen" />
<script type="text/javascript" src="{% static "bootstrap/js/bootstrap.min.js" %}" ></script>
</head>
<html>
<body>
<span class="badge badge-success" >HI!</span>
<span class="badge">1</span>
<span class="badge badge-warning">4</span>
<span class="badge badge-important">6</span>
<span class="badge badge-info">8</span>
<span class="badge badge-inverse">10</span>
</body>
</html>
As a result, only regular text is displayed for these bootstrap badges.
Any input is appreciated thank you!!
******EDIT*************
So as of right now my STATICFILES_DIRS in settings.py is
STATICFILES_DIR = ('/home/bradford/Development/Django/public_pictures/static',)
STATIC_ROOT = '', # blank
STATIC_URL = '/static/'
DEBUG = True
urls.py:
from django.conf.urls import include, url, patterns
urlpatterns = patterns('',
url(r'homepage/',include('homepage.urls', namespace = "homepage")),
)
index.html (template)
<!DOCTYPE html>
{% load staticfiles %}
<head>
<link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}" type="text/css" media="screen" />
<script type="text/javascript" src="{% static "bootstrap/js/bootstrap.min.js" %}" ></script>
</head>
<html>
<body>
<span class="badge badge-success" >HI!</span>
<span class="badge">1</span>
<span class="badge badge-warning">4</span>
<span class="badge badge-important">6</span>
<span class="badge badge-info">8</span>
<span class="badge badge-inverse">10</span>
</body>
</html>
All these changes lead me a bit closer to my goal. However the badges of the bootstrap is displayed but there is no color being displayed. Everything is grey with white text =[ I'm not sure if the other features work as well. I shall try them. Thank you again for all the help! much appreciated!

It seems that you have forgot to include your static url in urls.py. If you are using development server you can use the following code in urls.py:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = patterns('',
# ... the rest of your URLconf goes here ...
) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
More reference on deploying static files for development or for production.

Development Server:
Leave STATIC_ROOT empty.
Make a change to STATICFILES_DIRS
STATICFILES_DIRS = (
'/home/bradford/Development/Django/public_pictures/static',
)
Run ./manage.py collectstatic
Should work.

Related

How to link template of html to start working in django? [duplicate]

This question already has answers here:
How to make static style-sheet working in django?
(2 answers)
Closed 3 years ago.
By running this code in normal HTML it runs with style also. But whenever I run it in django it runs and just show me a text. I applied ../static/css/animate.css, ../css/animate.css and css/animate.css but none of them are working. I made changes in settings.py by giving STATIC_ROOT but still showing me just text.
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
views.py
def index(request):
return render(request, 'index.html');
main url
urlpatterns = [
path('', include('app1.urls')),
path('admin/', admin.site.urls)
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
index.html
{% load static %}
<!-- Animate.css -->
<link rel="stylesheet" href="{% static '../static/css/animate.css' %}">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="{% static '../static/css/icomoon.css' %}">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="{% static '../static/css/simple-line-icons.css' %}">
<section id="fh5co-home" data-section="home" style="background-image: url(../static/images/W1.png);" data-stellar-background-ratio="0.5">
<div class="gradient"></div>
<div class="container">
<div class="text-wrap">
<div class="text-inner">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center">
<h1 class="to-animate">Welcome in the World of White Hats</h1>
<h2 class="to-animate">Your Problem with auto Solution</h2>
</div>
</div>
</div>
</div>
</div>
</section>
Folder structure
Try removing "../static/" from index.html
Also don't forget to run: "python manage.py collectstatic" before restarting the server

Import css in Django

I use django1.10
i reference the official doc
https://docs.djangoproject.com/en/1.10/intro/tutorial06/
my project name:mysite
structure:
mysite-
- mysite - urls.py
-views.py
...
- templates - index.html
- images
- static - mysite - assets - css - main.css
- js
...
In my index.html
add
{% load staticfiles % }
<link rel="stylesheet" text = 'html/css' href="{% static 'mysite/static/main.css' %}" />
it said i have a Invalid block tag about TemplateSyntaxError
<link rel="stylesheet" type = 'text/css' href="{% static 'mysite/static/assets/css/main.css' %}" />
views.py (about static files part)
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/mysite/static/',
]
STATIC_URL = '/static/'
STATIC_ROOT='/mysite/static/'
what's part should i notice?
Hi dear try to make python manage.py collectstatic...
hope it solves your problem 😊

CSS styling not showing up on Django app

I have my CSS in the following path: mysite/myapp/static/myapp/style.css. As of now, the CSS is simply:
body {
background-color: #F2B8F0
}
h1 {
color: #7BE0CB
}
I have my HTML set up like this: mysite/myapp/templates/myapp/home.html, where the following code is up on top:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}" />
My settings.py is like:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.7/howto/static-files/
STATIC_URL = '/static/'
However, nothing happened, and the different text and background colors aren't showing up in my HTML. Does anyone happen to know why? Thanks!
Perhaps your css link tag is in the incorrect spot within your HTML. It should be as follows:
<!DOCTYPE html>
{% load static %}
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}" />
</head>
<!-- YOUR HTML HERE -->
</html>
let
{% load static %}
be your first line in your HTML

Django: Using static, hard time with paths to render css

This is a bit embarrassing, but I don't know how to solve this problem:
First off, my project directory looks like this (there are more directories, but we aren't concerned with them):
projectfolder/
wsgi/
openshift/
templates/
home/
simple-sidebar.html
static/
css/
fonts/
js/
And the file we are concerned with is simple-sidebar.html which looks like the following :
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href= "{% static "css/bootstrap.css" %}" rel="stylesheet">
<!-- Add custom CSS here -->
<link href="{% static "css/simple-sidebar.css" %}" rel="stylesheet">
<link href="{% static "font-awesome/css/font-awesome.min.css" %}" rel="stylesheet">
</head>
Now for some reason my static template tags are not working, but that's probably because I don't know how to set up my static template stuff in my settings.py:
STATIC_ROOT = os.path.join(PROJECT_DIR, '..', 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = () <--- dont know if I need this one?
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
#'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
PS: Also how would you do this without the {% static %} tag? I am not sure how my style sheets href would look like.
Try removing the dots from your STATIC_ROOT, for example
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')
STATICFILES_DIRS are there for you if you'd like to map additional folders to your application that can be anywhere on your machine. When you run ./manage.py collectstatic you're essentially asking python to find all the files within said directories and drop them into the static folder defined in STATIC_ROOT
If you would like to map your files manually (without the static tag) you'd have to write out the full path of your file, for example /some/directory/path/css/style.css.
Lastly if you're running with DEBUG = True you are required to add your static and media urls to urls.py so there is an actual path in place. For example
from django.conf import settings
# ... your normal urlpatterns here
if settings.DEBUG:
urlpatterns += patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings.MEDIA_ROOT}),
(r'^static/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings.STATIC_ROOT}))

How to get rid of "%20" code in URLs (django)

Am working with django 1.3 and doing some template inheritance. My /static/ settings path seems to have problems once I leave the home page. Issue is, when I load home.html which inherits from base.html, the CSS and Image links work okay. But once I go to an extra URL (in this case vehicle.html), the css and image get lost with the error below:
console error
"GET /static/%20/static/images/logo_2.jpg HTTP/1.1" 404 1771
"GET /static/%20/static/css/default.css HTTP/1.1" 404 1765
view page source
<link rel="stylesheet" type="text/css" href="/static/ /static/css/default.css">
<link rel="stylesheet" type="text/css" href="/static/ /static/css/default.css">
It looks like some space is appearing from somewhere. Also, from the vehilce.html file, the page source shows that its adding an extra /static/ to the url plust the space. Where could I be going wrong? See below for my documents:
settings.py
STATIC_ROOT = 'D:/dev/workspace/vehicle_request/vehicle_request/mvmanager/static/'
STATIC_URL = '/static/'
urls.py
urlpatterns = patterns('',
url(r'^$', home_page),
(r'^admin/', include(admin.site.urls)),
(r'^media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT}), #Not in use in my code yet
(r'^static/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.STATIC_ROOT}),
(r'^vehicle/', vehicle),
(r'^driver/', driver),
base.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/static/css/default.css">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<header>
<a href="http://localhost:8000" title="Home Page">
<img alt="logo2:" src="{{ STATIC_URL }}/static/images/logo_2.jpg"
style="float:left; margin:5px" height="100"; border=none"></a><br><br>
<h1>Vehicle Request System <span class="version">(Version 0.1 beta)</span></h1>
</header>
<hr style="clear: left">
<hr>
</body>
</html>
vehicle.html
{% extends "base.html" %}
{% block title %}Vehicle Registration{% endblock %}
{% block content %}
<html>
<head></head>
<body></body>
</html>
{% endblock %}
Thanks.
Edits
1. I've changed the stati in href="{{STATIC_URL}} /static/css/default.css"> to read static as that is how it is in my code. I must have backspaced by mistake while posting. Moving on however,
2. When I change {{STATIC_url}} /Static to {{STATIC_URL}}/Static ie. I remove the space between those two words -as suggested by #sarnold below-, home.html works as usual but vehicle.html still doesn't load the css and the image and it spews the error below in the console:
File "c:\Python27\lib\site-packages\django\core\files\storage.py", line 234, in path
raise SuspiciousOperation("Attempted access to '%s' denied." % name)
SuspiciousOperation: Attempted access to '\static\images\logo_2.jpg' denied.
[10/Feb/2012 06:11:55] "GET /static//static/images/logo_2.jpg HTTP/1.1" 500 1731
File "c:\Python27\lib\site-packages\django\core\files\storage.py", line 234, in path
raise SuspiciousOperation("Attempted access to '%s' denied." % name)
SuspiciousOperation: Attempted access to '\static\css\default.css' denied.
[10/Feb/2012 06:23:29] "GET /static//static/images/logo_2.jpg HTTP/1.1" 500 1731
3. When I combine #sarnold and #cptphil suggestions, vehicle.html loads perfectly the css and the image. home.html however fails. See the changes to base.html below:
base.html (edited to look like this)
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/default.css">
<img alt="logo2:" src="{{STATIC_URL}}images/logo_2.jpg"
home.html now doesnt' work! (viewing page source)
<link rel="stylesheet" type="text/css" href="css/default.css">
<img alt="logo2:" src="images/logo_2.jpg"
vehicle.html now works (viewing page source)
<link rel="stylesheet" type="text/css" href="/static/css/default.css">
<img alt="logo2:" src="/static/images/logo_2.jpg"
And this is how the home.html looks like in raw form
{% extends "base.html" %}
{% block title %}GEL: Vehicle Request System{% endblock %}
{% block content %}
{% endblock %}
I believe the template engine is doing what you are asking it to do.
href="{{STATIC_URL}} /stati/css/default.css"
correctly translates to
/static/ /stati/css/default.css
Try
href="{{STATIC_URL}}css/default.css"
in base.html if what you are after is
/static/css/default.css
Can't account for why home.html would work correctly though.
It looks to me like you added the spaces manually to base.html:
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}} /stati/css/defau...
<img alt="logo2:" src="{{ STATIC_URL }} /static/imag....
Take out the space before /stati/css and /static/imag and see if the problem goes away.
space = %20. Be sure to omit space from your url...
like : <script src="{% static " js/dashboard/salesPieChart.js" %}"></script>
To: <script src="{% static "js/dashboard/salesPieChart.js" %}"></script>