You guys were able to help me with last issue involving Django so I thought I'd ask another that has been killing me for the past couple days!
I have a small one app project with about 6 different pages, and I can get them to show however my style.css is not "showing" on the web page, I have followed countless guides including the Django's website and I just can't seem to get this working correctly. Here are some files that I think are relevant:
public_html/mysite/nfl/templates/home.html:
{% load staticfiles %}
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Draftr Home Page </title>
<meta charset="utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<!-- Using Bootstrap 3 framework with permission from getbootstrap.com -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Custom Style Sheet -->
<link href="{% static 'style.css' %}" rel="stylesheet" media="screen">
style.css is located here public_html/mysite/nfl/static AND /home/gobelogic/public_html/mysite/static(alongside admin/)
/home/gobelogic/public_html/mysite/mysite:
import os.path
import sys
PROJECT_ROOT = os.path.normpath(os.path.dirname(__file__))
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
INSTALLED_APPS = (
#other
'django.contrib.staticfiles',
'nfl'
)
TEMPLATE_DIRS =
"nfl/templates",
)
STATICFILES_DIRS = (
'/home/gobelogic/public_html/mysite/nfl/static',
)
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static')
Ok I'm going to try and explain how I think django handles static files, please correct me where I'm wrong:
so in settings.py django is locating all static directories in my project and placing their contents in a single directory static/ next to manange.py(which is done when I run manage.py collectstatic
in the html file I tell django to load all the static files so that i can use them at the top by using {% load staticfiles %} and then i say which one in particular by using <link href="{% static 'style.css' %}" rel="stylesheet" media="screen"> by doing this, django uses the settings.py(?) to find where I put these static files and then loads up the stylesheet that way
Again I am running this on my production server so none of this is run through django built in server, idk if that matters or not
Thanks for any help
EDIT using django 1.8
Since you are not using Django internal server (rightly so), you need to make your production web server aware of the static file location. There is an example in Django docs for Apache (https://docs.djangoproject.com/en/1.8/howto/deployment/wsgi/modwsgi/#serving-files). Even if you are not using apache, generally you need to make sure that /static/ or whatever your STATIC_URL points to is served from the place where your STATIC_ROOT points to.
Related
The 500 error handler template won't load CSS even if typed everything correctly.
For example, my home template loads CSS properly using the same method
Here's the 500.html template
<html>
<head>
{%load static%}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>500</title>
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"/>
</head>
<body>
html code here
</body>
</html>
This should load the style.css file from the static folder
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"/>
In the terminal it looks like everything is OK, but it still doesn't load.
"GET /static/style.css HTTP/1.1" 200 734
if I try to access 127.0.0.1:8000/static/main.css (the one for the homepage) it shows it how it should
if I try to access 127.0.0.1:8000/static/style.css it gives me an error
I don't know if it matters but I'm doing this with DEBUG = False
Edit: I solved the error by running the server with py manage.py runserver --insecure
At this point I wonder how could I get around this if I wanted to host the website on a server? Why doesn't it load static files for error pages without running the server like that?
The manage.py runserver command starts the Django development server, a server which it is not intended to be used in production and which, as a result, stops to serve the static files when DEBUG=FALSE.
As you point out in your edit, you can bypass this security by using the --insecure option when you start the server (see the documentation here). But this is clearly an insecure and inefficient solution.
So you can serve the static files with a real HTTP server (some examples and tutorials are given here) or you can have a look to the very popular WhiteNoise application to help you doing that.
this is usually i render django template tags : {% load static %}. sometimes pay attention to spaces. and also, I include static on the top of the page.
Keep DEBUG=TRUE in setting.py
Documentation: https://docs.djangoproject.com/en/3.2/ref/settings/
Static files are served via Django on when DEBUG is True.
I already have an index file in a template folder that hold the html code,Also i have css and javascript file in the static folder so when i load the browser i only see the index content without css and javascript
in setting.py file i set clearly the path to the static files that hold css and javascript also in index file we put special tags that specify our static files
The following is the setting.py contents:
STATIC_URL = '/static/'
STARTICFILES_DIRS=[
os.path.join(BASE_DIR,'static'),
]
STATIC_ROOT= os.path.join(BASE_DIR,'assets')
The following is the index file contents:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Travello</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="
{%static'styles/bootstrap4/bootstrap.min.css' %}">
I expect the output of css style and javascipt functionality
STARTICFILES_DIRS is a typo. It is supposed to be STATICFILES_DIR.
STATICFILES_DIRS is the list of folders where Django will search for additional static files aside from the static folder of each app installed.
python manage.py collectstatic collects all the files defined inside static/ folder in your applications and puts it all to the static root.
The website I see when I run the server has not CSS in it, but just the HTML. So far I read that you keep CSS files in a static folder under the project directory. I have an Html template that is in the templates folder and it works perfectly when I load it from the views.home . In the HTML file, I have {% load staticfiles %} at the top of the document, and yes I have checked my installed apps for 'django.contrib.staticfiles' in the settings. Also, in the HTML document, in the href attribute I've added {% static 'style/style.css' %} which is the name of the folder under the static folder.
<!DOCTYPE HTML>
{% load staticfiles %}
<html>
<head>
<title>night_sky_2</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252"
/>
<link rel="stylesheet" type="text/css" href="{% static 'style/style.css'
%}" />
</head>
I finally found a solution. All I had to do was add this:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
'DjangoProjects\Sample\website\static'
)
In the settings and also moved:
{% load staticfiles %}
To the very top of the HTML document, instead of under. I put it under at first because it wasn't giving a red line which to me seems like there isn't an error.
it seems that you have done right in your html template do load the static file. Have you done this configuration in your settings.py ?
STATIC_URL = '/static/'
STATIC_ROOT = 'static'
I've read in this doc that the { % loadstatic %} has been done as {% load static %} just.
See: django docs about sttic files
Its easier than you think, but almost everyone gets it wrong the first time. There was a lightning talk about it at the DjangoCon Europe a couple of days ago: https://youtu.be/eEZYDDaDeCs?t=29m50s
I´m new in python and django.
My code is below and the problem is that the images do not appear.
I include in the teste.html this tag but it didn´t work src="./assets/images/3ed274bc061c771ef0b153111a6fe932_logocartorio.png"
My path is:
BCcartorio
bccartorio
settings
urls
iddigital
views
urls
templates
iddigital
teste.html
assets
css
images
js
My iddigital.views.py:
from django.shortcuts import render, HttpResponse
def home(request):
return (render(request, "iddigital/teste.html"))
My teste.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>teste</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<h1>Welcome</h1>
<button class="btn btn-danger" type="button" name="button">login</button>
<div class="bd-vertical-align-wrapper">
<img class="bd-imagelink-1 bd-own-margins bd-imagestyles " src="./assets/images/3ed274bc061c771ef0b153111a6fe932_logocartorio.png">
</div>
</body>
</html>
It is not a good practice to hard-code the URL of an image as this can cause many unexpected problems(e.g. paths mixup). In order to avoid this Django provides a hassle-free way to manage and serve your static files easily.
First you have to include the django.contrib.staticfiles app in your INSTALLED_APPS and then define in your settings file the STATIC_URL which will serve as the base path that'll be used by Django to find your static files in a template. It is a good practice to have a separate static folder that will contain the assets folder which -in turn- will contain your css, js, images etc sub-folders.
So I'd take the assets folder from that path and put move it in a static folder that would be in the same level as the iddigital and templates ones. In that case your STATIC_URL variable would be equal to '/static/.
Now in the teste.html template you can load your static folder by adding {% load static %} at the top of your file. Your images can now be called as simple as this: <img src="{% static "assets/images/logocartorio.png" %}" class="bd-imagelink-1 bd-own-margins bd-imagestyles"/>
More info on the above can be found at the excellent Djangodocumentation.
I'm new to Django, and facing issues rendering bootstrap on a django page.
This is my base html,
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Dropbox Web App Prototype</title>
<!-- Bootstrap -->
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
The static file is at the same level as the project directory and has the following structure,
I've also added the following line, to my settings.py file
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
The CSS is not rendering on the home page. Any help appreciated.
You are using an older syntax that's probably doesn't match your version of Django.
In your html file change:
{% load staticfiles %}
to
{% load static %}
Also, replace the single quote with a double quote :
"{% static 'bootstrap/css/bootstrap.min.css' %}"
to:
"{% static "bootstrap/css/bootstrap.min.css" %}"
you can see the exact syntax of dealing with static files here
BASE_DIR is defined by default to:
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
Here __file__ is actually settings.py, so BASE_DIR is on the parent directory, the one that contains manage.py.
It seems your static folder is on another level, so just move it to the same level as manage.py and it should work.
CDN:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
Static
In urls for django runserver:
if settings.DEBUG:
urlpatterns += [url(r'^static/(?P<path>.*)$', views.serve),]
When running from the webserver, you need to config an alias. Nginx example:
location /static {
alias /home/username/mysite/static;}
settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
In the html
replace this
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
with this
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
and check this is in the settings.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
just define additioaly static url in your settings as follow somewhere on the bottom:
STATIC_URL = '/static/'
and check again if your bootstrap is served
can you paste your BASE_DIR ? Can you set it to: BASE_DIR to BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))